JS調(diào)試必備的5個(gè)debug技巧
1. debugger;
我以前也說(shuō)過(guò)，你可以在JavaScript代碼中加入一句debugger;來(lái)手工造成一個(gè)斷點(diǎn)效果。
需要帶有條件的斷點(diǎn)嗎？你只需要用if語(yǔ)句包圍它：
debugger;
}
但要記住在程序發(fā)布前刪掉它們。
有時(shí)候你會(huì)發(fā)現(xiàn)DOM不受你的控制，自己會(huì)發(fā)生一些奇怪的變化，讓你很難找出問(wèn)題的根源。
谷歌瀏覽器的開(kāi)發(fā)工具里有一個(gè)超級(jí)好用的功能，專門(mén)可以對(duì)付這種情況，叫做“Break on…”，你在DOM節(jié)點(diǎn)上右鍵，就能看到這個(gè)菜單項(xiàng)。
斷點(diǎn)的觸發(fā)條件可以設(shè)置成這個(gè)節(jié)點(diǎn)被刪除、節(jié)點(diǎn)的屬性有任何變化，或它的某個(gè)子節(jié)點(diǎn)有變化發(fā)生。
XHR斷點(diǎn)，或Ajax斷點(diǎn)，就像它們的名字一樣，可以讓我們?cè)O(shè)置一個(gè)斷點(diǎn)，在特點(diǎn)的Ajax調(diào)用發(fā)生時(shí)觸發(fā)它們。
當(dāng)你在調(diào)試Web應(yīng)用的網(wǎng)絡(luò)傳輸時(shí)，這一招非常的有效。
谷歌瀏覽器里有一些非常有趣的模擬移動(dòng)設(shè)備的工具，幫助我們調(diào)試程序在移動(dòng)設(shè)備里的運(yùn)行情況。
找到它的方法是：按F12，調(diào)出開(kāi)發(fā)者工具，然后按ESC鍵(當(dāng)前tab不能是Console)，你就會(huì)看到第二層調(diào)試窗口出現(xiàn)，里面的Emulation標(biāo)簽頁(yè)里有各種模擬設(shè)備可選。
當(dāng)然，這不會(huì)就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。
YSlow是一個(gè)非常棒的工具。谷歌瀏覽器的開(kāi)發(fā)者工具里也有一個(gè)非常類似的工具，叫Audits。
它可快速的審計(jì)你的網(wǎng)站，給你提出非常實(shí)際有效的優(yōu)化你的網(wǎng)站的建議和方法。
沒(méi)有這些工具，我不知道將如何開(kāi)發(fā)。我還會(huì)寫(xiě)更多的關(guān)于這方面的技巧——一旦我有所發(fā)現(xiàn)，請(qǐng)關(guān)注我的最新文章。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇IE下JS保存圖片的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
js之切換全屏和退出全屏實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了js之切換全屏和退出全屏實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
JavaScript中實(shí)現(xiàn)sprintf、printf函數(shù)
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)sprintf、printf函數(shù),這兩個(gè)函數(shù)在大多數(shù)編程語(yǔ)言中都有,但JS中卻沒(méi)有,本文介紹在js中實(shí)現(xiàn)這兩個(gè)函數(shù)功能,需要的朋友可以參考下2015-01-01
JavaScript缺少塊級(jí)作用域，沒(méi)有private修飾符，但它具有函數(shù)作用域。作用域的好處是內(nèi)部函數(shù)可以訪問(wèn)它們的外部函數(shù)的參數(shù)和變量（除了this和argument2011-12-12
js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼
這篇文章介紹了js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼，有需要的朋友可以參考一下2013-10-10
JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件操作
這篇文章介紹了JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)
jquery easyui中的combogrid比較特殊，算是combo和grid的組合，combogrid結(jié)合一個(gè)可編輯的文本框和下拉數(shù)據(jù)網(wǎng)格面板，可以讓用戶迅速找到并選擇，又可以進(jìn)行搜索，展示與當(dāng)前輸入的字符相匹配的數(shù)據(jù)。下面給大家介紹EasyUi中的Combogrid 實(shí)現(xiàn)分頁(yè)和動(dòng)態(tài)搜索遠(yuǎn)程數(shù)據(jù)2016-04-04
javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06