web前端教程

用大白話，來(lái)講編程

最近有小伙伴在微信上跟我聊到了移動(dòng)端網(wǎng)頁(yè)開發(fā)調(diào)試?yán)牡膯?wèn)題，這個(gè)相信很多前端開發(fā)者都遇到過(guò)。

有一天，測(cè)試妹子拿著測(cè)試手機(jī)過(guò)來(lái)找你，說(shuō)頁(yè)面打不開。

你心想：怎么可能，我手機(jī)里挺好的呀，Chrome調(diào)試工具也沒報(bào)錯(cuò)呀！就把她手機(jī)拿過(guò)來(lái)看了看，發(fā)現(xiàn)一進(jìn)去還真就是一片空白。真是石樂志了！那問(wèn)題就來(lái)了，開發(fā)環(huán)境下沒報(bào)錯(cuò)，可真機(jī)又出現(xiàn)了意料之外的情況，而且沒法像 PC端 那樣祭出 F12 大法，怎么定位問(wèn)題并解決呢？?

這個(gè)時(shí)候我們就需要借助一些調(diào)試神奇，來(lái)幫助我們程序員快速的揪出問(wèn)題，并修復(fù)它。下面推薦3款比較好用的調(diào)試工具給大家：

1. vConsole?

騰訊出品的 Web 調(diào)試面板，相信不少前端小伙伴都用過(guò)。vConsole 會(huì)在你網(wǎng)頁(yè)中加一個(gè)懸浮的小按鈕，可以點(diǎn)擊它來(lái)打開關(guān)閉調(diào)試面板，并查看 DOM、Console、Network和 本地存儲(chǔ) 等信息。

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

2. Charles?

Charles 是一款強(qiáng)大的抓包工具，可以截取包括 https 在內(nèi)的各種網(wǎng)絡(luò)請(qǐng)求并方便的查看具體信息。有 Mac、Windows 和 Linux多版本，通過(guò)配置 WIFI 代理，也可以攔截手機(jī)發(fā)出的請(qǐng)求。

畢竟前端相當(dāng)一部分報(bào)錯(cuò)是網(wǎng)絡(luò)錯(cuò)誤或數(shù)據(jù)不符合預(yù)期導(dǎo)致的。所以通過(guò)攔截 http 請(qǐng)求,查看具體的請(qǐng)求信息和數(shù)據(jù)，能獲取很多有用的信息，可以在一定程度上幫助 debug。

3. weinre?

weinre是一款很不錯(cuò)的網(wǎng)頁(yè)檢查工具，可以通過(guò)在本地啟動(dòng)一個(gè) weinre 服務(wù)，并向手機(jī)網(wǎng)頁(yè)嵌入一段 js 腳本來(lái)實(shí)現(xiàn)和電腦的通信，已達(dá)到類似瀏覽器開發(fā)工具那樣的的調(diào)試效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不過(guò)這一切是在電腦上操作，而不是在手機(jī)上。

微信web開發(fā)者工具的移動(dòng)調(diào)試也是借助于此。

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

熱門文章

原創(chuàng)教程

原創(chuàng)教程：

附加習(xí)題：

趣味職場(chǎng)

行業(yè)困惑：

職業(yè)規(guī)劃：

新手求職：

新手學(xué)習(xí)：

職場(chǎng)感悟：

學(xué)習(xí)困惑：

職場(chǎng)焦慮：

感到迷茫：

薪資待遇：

培訓(xùn)出身：

培訓(xùn)費(fèi)用：

培訓(xùn)簡(jiǎn)歷：

搞笑黑話：

職業(yè)自由：

職場(chǎng)形象：

合作廣告分割線

總結(jié)

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

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