本文將介紹使用網(wǎng)頁(yè)調(diào)試的一些小技巧和工具。
前提摘要：筆者非專業(yè)的前端工程師，但也涉足全棧多年。本篇文章主要分享一些調(diào)試開(kāi)發(fā)相關(guān)的工具和技巧（筆者的喜好）,但不涉及推薦什么前端框架.
Web開(kāi)發(fā)實(shí)踐
必備利器 - Firefox + firebug
-
選中Html Element 并編輯它，實(shí)時(shí)預(yù)覽效果.
css.png 查看CSS芭逝，修改CSS樣式塌碌，并實(shí)時(shí)預(yù)覽效果
- 網(wǎng)絡(luò)請(qǐng)求速度查看
這一點(diǎn)非常有用渊胸，可以幫助你分析網(wǎng)站的主要延遲的來(lái)源。
- 異步請(qǐng)求查看
Tip:在調(diào)試rest請(qǐng)求的時(shí)候台妆，可以使用此網(wǎng)絡(luò)請(qǐng)求查看包括Post的參數(shù)翎猛，響應(yīng)，Header等接剩，非常實(shí)用切厘。
- JS執(zhí)行調(diào)試
- Xpath,對(duì)于寫爬蟲的人來(lái)說(shuō)，xpath是一種有效的解析網(wǎng)頁(yè)元素的方式懊缺，firebug提供簡(jiǎn)單的$x(exp)方法去測(cè)試Xpath語(yǔ)句疫稿，非常的方便。
- 其它功能鹃两，請(qǐng)到[^1]Firebug Wiki查看文檔遗座。
Mobile Web開(kāi)發(fā)實(shí)踐
必備利器 - Chrome
Tip 不要問(wèn)我為什么這里又要用Chrome，因?yàn)楣P者有多瀏覽器綜合癥俊扳，其實(shí)是Chrome的mobile 預(yù)覽功能比較強(qiáng)大途蒋。其實(shí)Firebug有的功能，Chrome 的開(kāi)發(fā)者工具基本都有[手動(dòng)滑稽]馋记。
Ngrok - 服務(wù)實(shí)現(xiàn)內(nèi)網(wǎng)穿透
一般Mobile Web我們需要在手機(jī)端訪問(wèn)号坡，本地的localhost:8080，除了局域網(wǎng)使用Ip訪問(wèn)外梯醒，局限性很大宽堆，而Ngrok可以將你本地的localhost:8080 映射到外網(wǎng)如 cnbj.tunnel.jiying.mobi:80，注意這里的端口是80茸习，這對(duì)于微信公眾號(hào)開(kāi)放簡(jiǎn)直就是福音畜隶，因?yàn)槟愣模⑿胖唤邮?0端口。
WEB&API調(diào)試同樣也是利器:
一些國(guó)內(nèi)的Ngrok資源：
- http://www.ngrok.cc/
- http://blog.phpor.me/tools/2015/11/04/share-ngrok.html
- 向筆者(關(guān)注我,私信我)索取筆者自建的ngrok服務(wù).
參考列表
下期預(yù)告
下期預(yù)告:Java正則表達(dá)式代箭。
歡迎大家關(guān)注我的簡(jiǎn)書墩划，或者在文章下方 郵件訂閱。菜鳥筆記 周更兩篇技術(shù)文章
