web前端教程

用大白話，來講編程

最近有小伙伴在微信上跟我聊到了移動端網頁開發調試困哪的問題，這個相信很多前端開發者都遇到過。

有一天，測試妹子拿著測試手機過來找你，說頁面打不開。

你心想：怎么可能，我手機里挺好的呀，Chrome調試工具也沒報錯呀！就把她手機拿過來看了看，發現一進去還真就是一片空白。真是石樂志了！那問題就來了，開發環境下沒報錯，可真機又出現了意料之外的情況，而且沒法像 PC端 那樣祭出 F12 大法，怎么定位問題并解決呢？?

這個時候我們就需要借助一些調試神奇，來幫助我們程序員快速的揪出問題，并修復它。下面推薦3款比較好用的調試工具給大家：

1. vConsole?

騰訊出品的 Web 調試面板，相信不少前端小伙伴都用過。vConsole 會在你網頁中加一個懸浮的小按鈕，可以點擊它來打開關閉調試面板，并查看 DOM、Console、Network和 本地存儲 等信息。

基本可以滿足普通前端開發的需求。使用方法也很簡單，通過npm安裝或者直接在需要的頁面引入 js文件 ，然后 new VConsole() 就可以了。

2. Charles?

Charles 是一款強大的抓包工具，可以截取包括 https 在內的各種網絡請求并方便的查看具體信息。有 Mac、Windows 和 Linux多版本，通過配置 WIFI 代理，也可以攔截手機發出的請求。

畢竟前端相當一部分報錯是網絡錯誤或數據不符合預期導致的。所以通過攔截 http 請求,查看具體的請求信息和數據，能獲取很多有用的信息，可以在一定程度上幫助 debug。

3. weinre?

weinre是一款很不錯的網頁檢查工具，可以通過在本地啟動一個 weinre 服務，并向手機網頁嵌入一段 js 腳本來實現和電腦的通信，已達到類似瀏覽器開發工具那樣的的調試效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不過這一切是在電腦上操作，而不是在手機上。

微信web開發者工具的移動調試也是借助于此。

如果有需要調試webpp的小伙伴，可以試一下這3款調試工具，或者你有更好用的工具，歡迎留言分享！

熱門文章

原創教程

原創教程：

附加習題：

趣味職場

行業困惑：

職業規劃：

新手求職：

新手學習：

職場感悟：

學習困惑：

職場焦慮：

感到迷茫：

薪資待遇：

培訓出身：

培訓費用：

培訓簡歷：

搞笑黑話：

職業自由：

職場形象：

合作廣告分割線

總結

以上是生活随笔為你收集整理的推荐3款移动端网页开发调试神器的全部內容，希望文章能夠幫你解決所遇到的問題。

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