前端日記

由于工作調動，很久沒寫日記了，這次想起來繼續寫。一個前端小白的學習之路。

移動端H5調試工具分享

由于工作原因，我們經常在處于內網的環境下開發，開發PC還比較好，能用Chrome DevTool
（簡稱F12）進行調試，那么如果是移動端呢？

方法1. 使用同一網段，

只要手機連接同一網段的wifi，然后使用ip那個網址訪問那是可以的。

方法2. 也是本次介紹的重點。

localtunnel

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

安裝和使用

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

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

最后結果：

到這一步，已經成功了一大半。還有一半？？？你會發現打開網站后會有如下結果：

why？？
是因為新版的webpack-dev-server出于安全考慮，默認檢查hostname，如果hostname不是配置內的就不能訪問，所以有了以下配置

Vue工程的項目配置

把disableHostCheck設置為true就好了，默認是false。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。