JS調(diào)試必備的5個(gè)debug技巧
1. debugger;
我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個(gè)斷點(diǎn)效果。
需要帶有條件的斷點(diǎn)嗎？你只需要用if語句包圍它：
debugger;
}
但要記住在程序發(fā)布前刪掉它們。
有時(shí)候你會(huì)發(fā)現(xiàn)DOM不受你的控制，自己會(huì)發(fā)生一些奇怪的變化，讓你很難找出問題的根源。
谷歌瀏覽器的開發(fā)工具里有一個(gè)超級(jí)好用的功能，專門可以對(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)出開發(fā)者工具，然后按ESC鍵(當(dāng)前tab不能是Console)，你就會(huì)看到第二層調(diào)試窗口出現(xiàn)，里面的Emulation標(biāo)簽頁里有各種模擬設(shè)備可選。
當(dāng)然，這不會(huì)就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。
YSlow是一個(gè)非常棒的工具。谷歌瀏覽器的開發(fā)者工具里也有一個(gè)非常類似的工具，叫Audits。
它可快速的審計(jì)你的網(wǎng)站，給你提出非常實(shí)際有效的優(yōu)化你的網(wǎng)站的建議和方法。
沒有這些工具，我不知道將如何開發(fā)。我還會(huì)寫更多的關(guān)于這方面的技巧——一旦我有所發(fā)現(xiàn)，請(qǐng)關(guān)注我的最新文章。
相關(guān)文章
這篇文章主要介紹了JS封裝的模仿qq右下角消息彈窗功能,涉及javascript事件響應(yīng)、頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
向大師們學(xué)習(xí)Javascript（視頻與PPT）
在開始之前，先與大家一起認(rèn)識(shí)下這篇文章的主角，世界級(jí)的javascript大牛們：Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas?？疵忠苍S挺陌生，但是如果你對(duì)javascript還算熟悉，一定不會(huì)對(duì)他們的作品陌生。2009-12-12
JavaScript實(shí)現(xiàn)頁面電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁面電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
Code: write(s,d) 輸出連續(xù)字符串...2007-08-08
js阻止默認(rèn)瀏覽器行為與冒泡行為的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s阻止默認(rèn)瀏覽器行為與冒泡行為的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
Kibo是一個(gè)簡(jiǎn)單的用于處理鍵盤事件的Javascript工具庫。2011-10-10
JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼,可實(shí)現(xiàn)頁面元素的3D旋轉(zhuǎn)變換效果,涉及JavaScript動(dòng)態(tài)數(shù)學(xué)運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2015-09-09
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過鍵值對(duì)來存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對(duì)象添加屬性的方式來增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義可滑動(dòng)日歷界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12