前端日記

由于工作調(diào)動，很久沒寫日記了，這次想起來繼續(xù)寫。一個前端小白的學(xué)習(xí)之路。

移動端H5調(diào)試工具分享

由于工作原因，我們經(jīng)常在處于內(nèi)網(wǎng)的環(huán)境下開發(fā)，開發(fā)PC還比較好，能用Chrome DevTool
（簡稱F12）進(jìn)行調(diào)試，那么如果是移動端呢？

方法1. 使用同一網(wǎng)段，

只要手機(jī)連接同一網(wǎng)段的wifi，然后使用ip那個網(wǎng)址訪問那是可以的。

方法2. 也是本次介紹的重點(diǎn)。

localtunnel

通過localtunnel就能把你的本地地址映射到一個公網(wǎng)地址，比如我本地地址localhost:8002,通過localtunnel生成一個指定前綴的https://cold-baboon-87.loca.lt地址，讓測試人員無需通過局域網(wǎng)等就能訪問。（簡稱內(nèi)網(wǎng)穿透）

安裝和使用

不得不說，這個工具是真的簡單。

// 使用npm或yarn全局安裝localtunnel npm install -g localtunnel yarn add -g localtunnel//使用 lt --subdomain <個性前綴> --port <要映射的端口>lt --subdomain hdz --port 8002lt -p 8002 // 當(dāng)然也可不需要前綴 會隨機(jī)出url地址

最后結(jié)果：

到這一步，已經(jīng)成功了一大半。還有一半？？？你會發(fā)現(xiàn)打開網(wǎng)站后會有如下結(jié)果：

why？？
是因?yàn)樾掳娴膚ebpack-dev-server出于安全考慮，默認(rèn)檢查hostname，如果hostname不是配置內(nèi)的就不能訪問，所以有了以下配置

Vue工程的項(xiàng)目配置

把disableHostCheck設(shè)置為true就好了，默認(rèn)是false。

到此，大功告成！！
謝謝觀賞，如有不足，請下方留言，共勉之! —一個菜雞前端的路程

總結(jié)

以上是生活随笔為你收集整理的移动端H5调试工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。