js调试学习总结
五個你必須知道的javascript和web 調試技術
http://blog.jobbole.com/51872/在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。
Weinre移動調試
DOM 斷點
debugger斷點
native方法hook
遠程映射本地調試
Weinre
在移動上面開發調試是很復雜的，所以就有了weinre。安裝weinre可以實現pc來調試手機頁面，所以對
于移動開發調試是很重要的哦~
weinre-demohttp://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg
安裝weinre
weinre可以通過npm來安裝：
JavaScript
npm install -g weinre
1
npm install -g weinre
安裝完之后，可執行下面的命令來啟動：
JavaScript
weinre --httpPort 8080 --boundHost -all-
1
weinre --httpPort 8080 --boundHost -all-
這樣訪問自己的127.0.0.1:8080按照提示在需要調試頁面中插入一段js，然后就可以調試了。操作界面
類似Chrome的 DevTools，具體操作可以看下
http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html教程
原理
通過在需要調試的頁面中引入一段weinre的js，實現pc和手機的socket通信，從而實現實時調試。
Tips
如果你嫌每次都要在調試的頁面引入js麻煩，可以做個書簽或者chrome插件
如果嫌安裝麻煩，可以使用phonegap的weinre：http://debug.phonegap.com/
DOM斷點
DOM斷點是一個Firebug和chrome DevTools提供的功能，當js需要操作打了斷點的DOM時，會自動暫停，
類似debugger調試。
使用DOM斷點
選擇你要打斷點的DOM節點
右鍵選擇Break on..
選擇斷點類型
120131122125746
Tips
Firebug中，DOM斷點可以在Script> Breakpoints里面看到
chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到
javascript的debugger語句
需要調試js的時候，我們可以給需要調試的地方通過debugger打斷點，代碼執行到斷點就會暫定，這時
候通過單步調試等方式就可以調試js代碼
使用javascript的斷點
在需要打斷點的地方添加debugger：
JavaScript
if (waldo) {
debugger;
}
1
2
3
if (waldo) {
debugger;
}
這時候打開console面板，就可以調試了
Tips
如果你不知道怎么調試，那么盡快看下：Chrome DevTools中斷點部分的教程
原生代碼的hook調試
因為瀏覽器自己會內置一些類似window對象這些原生的js方法，當你知道原生代碼的確有問題，但是你
又不能跟蹤調試的時候，你就可以用這個方法了。
舉個例子
例如我們注意到了一個DOM的屬性值發生了變化，但是我們不知道是哪里的代碼導致的變化，所以我們可
以給DOM元素的setAttribute打個斷點，代碼如下：
JavaScript
var oldFn = Element.prototype.setAttribute;
Element.prototype.setAttribute = function (attr, value) {
? ? if (value === "the_droids_you_are_looking_for") {
? ? ? ? debugger;
? ? }
? ? oldFn.call(this, attr, value);
}
var oldFn = Element.prototype.setAttribute;
?
Element.prototype.setAttribute = function (attr, value) {
? ? if (value === "the_droids_you_are_looking_for") {
? ? ? ? debugger;
? ? }
? ? oldFn.call(this, attr, value);
}
這樣，當元素的屬性發生了變化的時候，就會執行到斷點，你就可以在斷點的棧中找出調用的地方來~
Tips
這種方法不保證在所有瀏覽器中有效，比如ios的safari 隱私模式下，我們就不可以修改localStorage
方法
遠程映射本地調試
當線上某個js/css出現問題，我們可以用代理的方式，將遠程的文件代理到本地來實現遠程映射調試。
其實除了這個功能，還可以作為抓包工具，這在移動端是很重要的。推薦Mac用charles Proxy
（http://www.charlesproxy.com/）， windows用戶使用fiddler（http://fiddler2.com/）
這個就不多說了，直接上國內的幾篇文章：
http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
http://www.cnblogs.com/TankXiao/p/3063871.html
========
前端開發必備工具-網頁調試工具
http://support.zhongsou.net/news/8317219.html在前端開發中我們經常會要調試頁面，主要html、css調試和js調試，這里整理一些工具：
一、firefox網頁調試插件
1.firefox插件Firebug
主要用于html、css的調試和js調試；推薦指數：
從事了數年的Web開發工作，越來越覺得現在對WEB開發有了更高的要求。要寫出漂亮的HTML代碼；要編
寫精致的CSS樣式表展示每個頁面模塊；要調試javascript給頁面增加一些更活潑的要素；要使用Ajax給
用戶帶來更好的體驗。一個優秀的WEB開發人員需要顧及更多層面，才能交出一份同樣優秀的作業。為幫
助廣大正處于Web2.0洪流中的開發人員，在這里為大家介紹一款輕巧靈活的輔助開發工具。(轉載請注明
出處：WEB前端開發 http://www.css88.com/)
介紹下載請參見： http://www.css88.com/archives/130
2.firefox插件Web Developer 1.1.6(最新版本，中文版)
主要用于html、css、js的查看和編輯；推薦指數：
Firefox上開發和調試web站點的不二之選。Web developer toolbar包含了一系列工具，從cookie管理到
CSS調試，從導航線到屏幕標尺，功能簡直是多得說不完。
僅次于Firebug的網頁開發設計者工具。功能眾多而且強勁。看著這令人眼花繚亂的插件設置窗口，就能
一窺它的強大。推薦網頁開發者和網頁設計者使用，能夠幫助你方便的對頁面進行調整和完善;
介紹下載請參見：http://www.css88.com/archives/417
3.firefox插件JavaScript Debugger Venkman:
主要用于JavaScript調試；推薦指數：
一個基于Mozilla的瀏覽器的JavaScript調試環境，是Mozilla瀏覽器的一個擴展。Venkman基于Mozilla?
JavaScript調試API（js/jsd），js/jsd API 構成了 Netscape JavaScript Debugger 1.1的基礎，
Netscape瀏覽器4.x系統都提供了這個調試工具。Venkman是目前比較流行的JavaScript調試工具。強烈
推薦這個剛下載了一個Mozilla免費調試器 JavaScript Debugger。這個調試器的前身為Netscape的
JavaScript調試器，它是Mozilla的一個附加產品。Venkman JavaScript調試器既是一個圖形，也是一個
控制臺調試器。下載并安裝Venkman JavaScript調試器后，就可以通過“工具|Web開發|JavaScript調試
器”菜單啟動它。這個附加產品允許你查看和調試位于源文件或網頁中的JavaScript.(轉載請注明出處
：http://www.css88.com)
Venkman相關下載：https://addons.mozilla.org/zh-CN/firefox/addon/216
?
二、ie網頁調試插件
?
1.SuperPreview微軟的網頁開發調試利器
主要用于html、css的調試和各個瀏覽器（目前只能針對IE6-IE8）的頁面呈現測試；推薦指數：
SuperPreview 是微軟將推出的 Expression Web 3 的一部分，主要用于頁面的調試，目前的?
Expression Web SuperPreview 允許用戶對比他們的站點在 IE 6 與 IE 7, IE 8 中的外觀，而在將來
的完整版中，還將支持 Firefox, Safari, Google Chrome（可能）以及更多瀏覽器;
介紹下載請參見：http://www.css88.com/archives/760
?
2.Internet Explorer Collection讓你同時擁有IE1-IE8
主要用于Internet Explorer 瀏覽器（IE1-IE8）各個版本的頁面呈現測試；推薦指數：
Internet Explorer Collection可以使你的計算機同時安裝IE1-IE8，不過這個工具對vista系統支持不
是很好，最近還有一個發現，Internet Explorer Collection和IE8正式版似乎有沖突，IE8正式版的下
拉框會不能使用，提示“阻止了什么彈出窗口…”,嘗試了幾百次無法解決，最后我卸載了Internet?
Explorer Collection，這個問題就再也沒出現過。(轉載請注明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/687
3.IE Developer Toolbar及IE8 開發人員工具
主要用于html、css的調試和js調試；推薦指數：
雖然這玩意改了時髦的名字，但是卻也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只
是IE的一個插件而已。而在IE8中，瀏覽器已經自動集成了這玩意，不僅改了個有點土鱉的名字，而且功
能也加強了很多。開發人員工具在IE8的工具菜單下，或者直接點擊F12快捷鍵也可以呼叫出來。
微軟的英特網探索者開發工具條是IE上最好的DOM檢查和CSS調試工具。由于IE具有高市場占有率而又在
整個渲染模型上充滿缺陷（比如臭名昭著的hasLayout邊距重疊BUG），調試IE是web開發必不可少的步驟
——沒有這個工具條，IE的調試將會成為一場噩夢。雖然IE Developer Toolbar要比Firebug稍微弱智一
點，不過他至少能幫你馴服IE這頭怪獸。(轉載請注明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/1005和http://www.css88.com/archives/1008
4.IE下的調試工具IE WebDeveloper
主要用于html、css的調試和js調試；推薦指數：
IE WebDeveloper可以讓你檢查和編輯你的HTML DOM, 顯示錯誤信息, 日志信息, 顯示網站源代碼, 監視
DHTML事件和HTTP流量. 如果你是一個開發人員或設計人員, 但平常又喜歡使用IE, 那IE ?webdeveloper
是個不錯的選擇.它的功能可以和火狐下的Firebug相媲美，甚至有些功能還強于Firebug。
IE WebDeveloper允許直接地在瀏覽器窗口中瀏覽、傳輸和更新HTML DOM。該軟件可以實時分析網頁并且
顯示為一種允許你察看表格風格、Javascript腳本，表格以及其它網頁元素的樹形風格。該軟件還可以
在瀏覽器中交互式地突出顯示被選擇的網頁元素，因此你可以在實際網頁中定位其代碼。 查看style元
素，定位div等等。且支持一鍵w3c檢查（包括HTML/XHTML/CSS/Javascript tutorial等）。雖然用起來
不如Firebug那么得心應手，但是畢竟解決了我們在ie上調試工具不足的問題。(轉載請注明出處：
http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/967
?
5.IETester-同時擁有IE6、IE7、IE8（Vista兼容）
主要用于Internet Explorer 瀏覽器各個版本的頁面呈現測試；推薦指數：
雖然以前我寫過IE6、IE7、IE8共存的解決方案，但是看到IETester這個軟件以后那些都已經沒有意義了
（那些辦法副作用比較大，而且實現起來有些難度）。使用IETester能夠較好的解決，測試網頁兼容性
的多IE版本的需求。暫時已經支持IE5.5——IE8beta1，我想這已經足夠了。還在苦苦找尋IE6和IE7共存
或者IE7和IE8共存的朋友，可以試試這個軟件。當然這個軟件也不是萬能的，在最后，官方非常厚道的
給出了暫時存在的重要bug列表。(轉載請注明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/345和http://www.css88.com/archives/564
?
6.前端調試利器DebugBar
主要用于html、css的調試和js調試；推薦指數：
前端調試工具有很多，比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的
PageView，IE WebDeveloper V2，還有IE8自帶的開發工具 等等，這里我再推薦一個DebugBar；
大家肯定都知道ieTester(點擊查看ieTester相關信息),大家都用ieTester來測試各個IE版本的頁面兼容
性，其實新版的ieTester(點擊下載目前最新版的ieTester v0.3.2 ）還有一個很強大的頁面調試插件：
DebugBar。(轉載請注明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/785
7.用vs2008調試Javacscript
主要用于js調試；推薦指數：
面對一大段的JavaScript腳本，以前總是會很頭疼，找不到調試這些代碼的方法。如果出現什么錯誤或
異常，總是要從頭分析，然后插入很多Alert()，調試起來很麻煩。
Visual Studio 2008中JavaScript所具有的另外一個特性，是它提供了更加強大的JavaScript調試功能
，這使得JavaScript的使用及構建AJAX應用都變得容易很多。同樣，這項功能在免費的Visual Web?
Developer Express版本中和Visual Studio中都具有。(轉載請注明出處：http://www.css88.com)
介紹下載請參見：http://www.css88.com/archives/982
三、其他調試工具
1.用Aptana調試JavaScript教程
主要用于js的調試和各個瀏覽器；推薦指數：
1. ? ? ? 你必須安裝firefox瀏覽器；
2. ? ? ? 到http://support.aptana.com/asap/browse/STU-1769 下載并安裝aptanadebugger 及?
firebug；這兩個都是firefox插件；這樣我們就可以調試腳本了。
介紹下載請參見：http://www.css88.com/archives/685
2.Opera Developer Tools
Opera下的DOM,CSS查看工具,類似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
3.webkit
Safari下的開發調試工具
http://nightly.webkit.org/
========
Fiddler教程（Web調試工具）
http://www.cnblogs.com/anny-1980/p/4537922.htmlhttp://kb.cnblogs.com/page/130367/
Fiddler的基本介紹
Fiddler的官方網站: ?www.fiddler2.com
? ? ? Fiddler的官方幫助：http://docs.telerik.com/fiddler/knowledgebase/quickexec
Fiddler官方網站提供了大量的幫助文檔和視頻教程， 這是學習Fiddler的最好資料。
Fiddler是最強大最好用的Web調試工具之一，它能記錄所有客戶端和服務器的http和https請求，允
許你監視，設置斷點，甚至修改輸入輸出數據，Fiddler包含了一個強大的基于事件腳本的子系統，并且
能使用.net語言進行擴展
你對HTTP 協議越了解， 你就能越掌握Fiddler的使用方法。你越使用Fiddler，就越能幫助你了解
HTTP協議。
Fiddler無論對開發人員或者測試人員來說，都是非常有用的工具。
Fiddler的工作原理
Fiddler 是以代理web服務器的形式工作的，它使用代理地址:127.0.0.1，端口:8888。當Fiddler退
出的時候它會自動注銷，這樣就不會影響別的 程序。不過如果Fiddler非正常退出，這時候因為Fiddler
沒有自動注銷，會造成網頁無法訪問。解決的辦法是重新啟動下Fiddler。
同類的其它工具
同類的工具有: httpwatch, firebug, wireshark
Fiddler 如何捕獲Firefox的會話
能支持HTTP代理的任意程序的數據包都能被Fiddler嗅探到，Fiddler的運行機制其實就是本機上監
聽8888端口的HTTP代理。 Fiddler2啟動的時候默認IE的代理設為了127.0.0.1:8888，而其他瀏覽器是需
要手動設置的，所以將Firefox的代理改為 127.0.0.1:8888就可以監聽數據了。
Firefox 上通過如下步驟設置代理
點擊: Tools -> Options, ?在Options 對話框上點擊Advanced tab - > network tab -> setting.
Fiddler如何捕獲HTTPS會話
默認下，Fiddler不會捕獲HTTPS會話，需要你設置下， 打開Fiddler ?Tool->Fiddler Options-
>HTTPS tab
選中checkbox， 彈出如下的對話框，點擊"YES"
點擊"Yes" 后，就設置好了。
Fiddler的基本界面
看看Fiddler的基本界面
Fiddler的HTTP統計視圖
通過陳列出所有的HTTP通信量，Fiddler可以很容易的向您展示哪些文件生成了您當前請求的頁面。
使用Statistics頁簽，用戶可以通過選擇多個會話來得來這幾個會話的總的信息統計，比如多個請求和
傳輸的字節數。
選擇第一個請求和最后一個請求，可獲得整個頁面加載所消耗的總體時間。從條形圖表中還可以分
別出哪些請求耗時最多，從而對頁面的訪問進行訪問速度優化
QuickExec命令行的使用
Fiddler的左下角有一個命令行工具叫做QuickExec，允許你直接輸入命令。
常見得命令有：
help ?打開官方的使用頁面介紹，所有的命令都會列出來
cls ? ?清屏 ?(Ctrl+x 也可以清屏)
select ?選擇會話的命令
?.png ?用來選擇png后綴的圖片
bpu ?截獲request
Fiddler中設置斷點修改Request
Fiddler最強大的功能莫過于設置斷點了，設置好斷點后，你可以修改httpRequest的任何信息包括
host, cookie或者表單中的數據。設置斷點有兩種方法：
第一種：打開Fiddler 點擊Rules-> Automatic Breakpoint ?->Before Requests(這種方法會中斷
所有的會話)
如何消除命令呢？ ?點擊Rules-> Automatic Breakpoint ?->Disabled
第二種: ?在命令行中輸入命令: ?bpu www.baidu.com ? (這種方法只會中斷www.baidu.com)
如何消除命令呢？ ?在命令行中輸入命令 bpu
看個實例，模擬博客園的登錄， 在IE中打開博客園的登錄頁面，輸入錯誤的用戶名和密碼，用
Fiddler中斷會話，修改成正確的用戶名密碼。這樣就能成功登錄：
1. 用IE 打開博客園的登錄界面 ?http://passport.cnblogs.com/login.aspx
2. 打開Fiddler, ?在命令行中輸入bpu http://passport.cnblogs.com/login.aspx
3. 輸入錯誤的用戶名和密碼，點擊登錄
4. Fiddler 能中斷這次會話，選擇被中斷的會話，點擊Inspectors tab下的WebForms tab 修改用
戶名密碼，然后點擊Run to Completion 如下圖所示。
5. 結果是正確地登錄了博客園
Fiddler中設置斷點修改Response
當然Fiddler中也能修改Response：
第一種：打開Fiddler 點擊Rules-> Automatic Breakpoint ?->After Response ?(這種方法會中斷
所有的會話)
如何消除命令呢？ ?點擊Rules-> Automatic Breakpoint ?->Disabled
第二種: ?在命令行中輸入命令: ?bpuafter www.baidu.com ? (這種方法只會中斷www.baidu.com)
如何消除命令呢？ ?在命令行中輸入命令 bpuafter,
具體用法和上節差不多，就不多說了。
Fiddler中創建AutoResponder規則
Fiddler 的AutoResponder tab允許你從本地返回文件，而不用將http request 發送到服務器上。
看個實例：
1. 打開博客園首頁，把博客園的logo圖片保存到本地，并且對圖片做些修改。
2. 打開Fiddler 找到logo圖片的會話，?
http://static.cnblogs.com/images/logo_2012_lantern_festival.gif， ?把這個會話拖到
AutoResponer Tab下
3. 選擇Enable automatic reaponses 和Unmatched requests passthrough
4. 在下面的Rule Editor 下面選擇 Find a file... 選擇本地保存的圖片. ?最后點擊Save 保存下
。
5. ? 再用IE博客園首頁， 你會看到首頁的圖片用的是本地的。
Fiddler中如何過濾會話
每次使用Fiddler, 打開一個網站，都能在Fiddler中看到幾十個會話，看得眼花繚亂。最好的辦法
是過濾掉一些會話，比如過濾掉圖片的會話。Fiddler中有過濾的功能， 在右邊的Filters tab中，里面
有很多選項， 稍微研究下，就知道怎么用。
Fiddler中會話比較功能
選中2個會話，右鍵然后點擊Compare，就可以用WinDiff來比較兩個會話的不同了（當然需要你安裝
WinDiff）
Fiddler中提供的編碼小工具
點擊Fiddler 工具欄上的TextWizard, ?這個工具可以Encode和Decode string.
Fiddler中查詢會話
用快捷鍵Ctrl+F打開Find Sessions的對話框，輸入關鍵字查詢你要的會話。 查詢到的會話會用黃
色顯示。
Fiddler中保存會話
有些時候我們需要把會話保存下來，以便發給別人或者以后去分析。 ?保存會話的步驟如下：
選擇你想保存的會話，然后點擊File->Save->Selected Sessions
Fiddler的script系統
Fiddler最復雜的莫過于script系統了，官方的幫助文檔:?
http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。
首先先安裝SyntaxView插件，Inspectors tab->Get SyntaxView tab->Download and Install?
SyntaxView Now... 如下圖
安裝成功后Fiddler 就會多了一個Fiddler Script tab，如下圖：
在里面我們就可以編寫腳本了， 看個實例讓所有cnblogs的會話都顯示紅色。
把這段腳本放在OnBeforeRequest(oSession: Session) 方法下，并且點擊"Save script"
if (oSession.HostnameIs("www.cnblogs.com")) {
oSession["ui-color"] = "red";
}
這樣所有的cnblogs的會話都會顯示紅色。
如何在VS調試網站的時候使用Fiddler
我們在用visual stuido 開發ASP.NET網站的時候也需要用Fiddler來分析HTTP， 默認的時候
Fiddler是不能嗅探到localhost的網站。不過只要在localhost后面加個點號，Fiddler就能嗅探到。
例如：原本ASP.NET的地址是 http://localhost:2391/Default.aspx， ?加個點號后，變成?
http://localhost.:2391/Default.aspx 就可以了
HTTP Request header
使用Fiddler 能很方便的查看Reques header, 點擊Inspectors tab -> Request tab -> headers ?
如下圖所示.
header 有很多，比較難以記憶，我們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易
記憶。
Cache 頭域
If-Modified-Since
作用： 把瀏覽器端緩存頁面的最后修改時間發送到服務器去，服務器會把這個時間與服務器上實際
文件的最后修改時間進行對比。如果時間一致，那么返回304，客戶端 就直接使用本地緩存文件。如果
時間不一致，就會返回200和新的文件內容。客戶端接到之后，會丟棄舊文件，把新文件緩存起來，并顯
示在瀏覽器中。
例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT
實例如下圖
? If-None-Match
作用: If-None-Match和ETag一起工作，工作原理是在HTTP Response中添加ETag信息。 當用戶再次
請求該資源時，將在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服務器驗證資源的ETag
沒有改變（該資源沒有更新），將返回一個304狀態告訴客戶端使用 本地緩存文件。否則將返回200狀態
和新的資源和Etag. ?使用這樣的機制將提高網站的性能
例如: If-None-Match: "03f2b33c0bfcc1:0"
實例如下圖
Pragma
作用： 防止頁面被緩存， 在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一樣
Pargma只有一個用法， 例如： Pragma: no-cache
注意: 在HTTP/1.0版本中，只實現了Pragema:no-cache, 沒有實現Cache-Control
Cache-Control
作用: 這個是非常重要的規則。 這個用來指定Response-Request遵循的緩存機制。各個指令含義如
下
Cache-Control:Public ? 可以被任何緩存所緩存（）
Cache-Control:Private ? ? 內容只緩存到私有緩存中
Cache-Control:no-cache ?所有內容都不會被緩存
還有其他的一些用法， 我沒搞懂其中的意思， 請大家參考其他的資料
Client 頭域
Accept
作用： 瀏覽器端可以接受的媒體類型,
例如： ?Accept: text/html ?代表瀏覽器可以接受服務器回發的類型為 text/html ?也就是我們常
說的html文檔,
如果服務器無法返回text/html類型的數據，服務器應該返回一個406錯誤(non acceptable)
通配符 * 代表任意類型
例如 ?Accept: */* ?代表瀏覽器可以處理所有類型，(一般瀏覽器發給服務器都是發這個)
Accept-Encoding：
作用： 瀏覽器申明自己接收的編碼方法，通常指定壓縮方法，是否支持壓縮，支持什么壓縮方法（
gzip，deflate），（注意：這不是只字符編碼）;
例如： Accept-Encoding: gzip, deflate
Accept-Language
作用： 瀏覽器申明自己接收的語言。?
語言跟字符集的區別：中文是語言，中文有多種字符集，比如big5，gb2312，gbk等等；
例如： Accept-Language: en-us
User-Agent
作用：告訴HTTP服務器， 客戶端使用的操作系統和瀏覽器的名稱和版本.
我們上網登陸論壇的時候，往往會看到一些歡迎信息，其中列出了你的操作系統的名稱和版本，你
所使用的瀏覽器的名稱和版本，這往往讓很多人感到很 神奇，實際上，服務器應用程序就是從User-
Agent這個請求報頭域中獲取到這些信息User-Agent請求報頭域允許客戶端將它的操作系統、瀏覽 器和
其它屬性告訴服務器。
例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0;?
CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2;?
.NET4.0E)
Accept-Charset
作用：瀏覽器申明自己接收的字符集，這就是本文前面介紹的各種字符集和字符編碼，如gb2312，
utf-8（通常我們說Charset包括了相應的字符編碼方案）；
例如：
Cookie/Login 頭域
Cookie:
作用： 最重要的header, 將cookie的值發送給HTTP 服務器
Entity頭域
Content-Length
作用：發送給HTTP服務器數據的長度。
例如： Content-Length: 38
Content-Type
作用：
例如：Content-Type: application/x-www-form-urlencoded
Miscellaneous 頭域
Referer:
作用： 提供了Request的上下文信息的服務器，告訴服務器我是從哪個鏈接過來的，比如從我主頁
上鏈接到一個朋友那里，他的服務器就能夠從HTTP Referer中統計出每天有多少用戶點擊我主頁上的鏈
接訪問他的網站。
例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT
Transport 頭域
Connection
例如： Connection: keep-alive ? 當一個網頁打開完成后，客戶端和服務器之間用于傳輸HTTP數
據的TCP連接不會關閉，如果客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經建立的連接
例如： ?Connection: close ?代表一個Request完成后，客戶端和服務器之間用于傳輸HTTP數據的
TCP連接會關閉， 當客戶端再次發送Request，需要重新建立TCP連接。
Host（發送請求時，該報頭域是必需的）
作用: 請求報頭域主要用于指定被請求資源的Internet主機和端口號，它通常從HTTP URL中提取出
來的
例如: 我們在瀏覽器中輸入：http://www.guet.edu.cn/index.html
瀏覽器發送的請求消息中，就會包含Host請求報頭域，如下：
Host：http://www.guet.edu.cn
此處使用缺省端口號80，若指定了端口號，則變成：Host：指定端口號
HTTP Response header
同樣使用Fiddler 查看Response header, 點擊Inspectors tab ->Response tab-> headers ?如下
圖所示
我們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易記憶。
Cache頭域
Date
作用: ?生成消息的具體時間和日期
例如： Date: Sat, 11 Feb 2012 11:35:14 GMT?
Expires
作用: 瀏覽器會在指定過期時間內使用本地緩存
例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT
Vary
作用：
例如: Vary: Accept-Encoding
Cookie/Login 頭域
P3P
作用: 用于跨域設置Cookie, 這樣可以解決iframe跨域訪問cookie的問題
例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI?
DSP COR
Set-Cookie
作用： 非常重要的header, 用于把cookie 發送到客戶端瀏覽器， 每一個寫入cookie都會生成一個
Set-Cookie.
例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com
Entity頭域
ETag
作用: ?和If-None-Match 配合使用。 （實例請看上節中If-None-Match的實例）
例如: ETag: "03f2b33c0bfcc1:0"
Last-Modified:
作用： 用于指示資源的最后修改日期和時間。（實例請看上節的If-Modified-Since的實例）
例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT
Content-Type
作用：WEB服務器告訴瀏覽器自己響應的對象的類型和字符集,
例如:
Content-Type: text/html; charset=utf-8
Content-Type:text/html;charset=GB2312
Content-Type: image/jpeg
Content-Length
指明實體正文的長度，以字節方式存儲的十進制數字來表示。在數據下行的過程中，Content-
Length的方式要預先在服務器中緩存所有數據，然后所有數據再一股腦兒地發給客戶端。
例如: Content-Length: 19847
Content-Encoding
WEB服務器表明自己使用了什么壓縮方法（gzip，deflate）壓縮響應中的對象。
例如：Content-Encoding：gzip
Content-Language
作用： WEB服務器告訴瀏覽器自己響應的對象的語言者
例如： Content-Language:da
Miscellaneous 頭域
Server:
作用：指明HTTP服務器的軟件信息
例如:Server: Microsoft-IIS/7.5
X-AspNet-Version:
作用：如果網站是用ASP.NET開發的，這個header用來表示ASP.NET的版本
例如: X-AspNet-Version: 4.0.30319
X-Powered-By:
作用：表示網站是用什么技術開發的
例如： X-Powered-By: ASP.NET
Transport頭域
Connection
例如： Connection: keep-alive ? 當一個網頁打開完成后，客戶端和服務器之間用于傳輸HTTP數
據的TCP連接不會關閉，如果客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經建立的連接
例如： ?Connection: close ?代表一個Request完成后，客戶端和服務器之間用于傳輸HTTP數據的
TCP連接會關閉， 當客戶端再次發送Request，需要重新建立TCP連接。
Location頭域
Location
作用： 用于重定向一個新的位置， 包含新的URL地址
========
JS 代碼調試經驗總結（菜鳥必讀）
http://ztreeapi.iteye.com/blog/1559335?
任何一個編程者都少不了要去調試代碼，不管你是高手還是菜鳥，調試程序都是一項必不可少的工作。
一般來說調試程序是在編寫代碼之后或測試期修改Bug 時進行的，往往在調試代碼期間更加能夠體現出
編程者的水平高低以及分析問題的準確度。
在長期解答 zTree 相關問題時，也的確發現很多的問題其實不算什么問題，僅僅是編程者不會調試造成
的，通過自己日常工作觀察，這里面有態度問題也有思考問題的方式方法，
本篇文章主要是幫助大家在調試代碼時，如何建立解決問題的思路。所以并不會專門介紹不同瀏覽器的
具體調試方法。（在網上關于 chrome、firefox、ie 等瀏覽器的具體調試方法已經有很多了，這里就不
一一描述啦。）另外，俗話說的好——“js、html 和 css 是一家”，因此在講述中也會稍帶有html 和?
css 的內容。
?
一、 遇到錯誤怎么辦？
1、 調整心態
?
2、 尋找特征
我們遇見的錯誤表象一般分為以下幾種
?
直接報告 js 語法錯誤
?
js 報錯，但報錯地點不是出問題的根源
?
js 無報錯，但功能無效
?
3、 懷疑一切
?
二、 如何讓錯誤現出原形？
?
1、 化繁為簡
臨床表現：莫名其妙的報錯，不方便調試，單純看代碼無法解釋出錯原因。
主要病因：js腳本沖突、Css沖突、DOM的ID沖突、DOM標簽缺失等多種由于沖突產生的bug根源
排查方法：熟練使用 Delete / Backspace 鍵，對代碼不斷進行區域刪除，直到癥狀消失，最后一次刪
除的區域很可能就是導致錯誤的根源。進一步查找根源可以在目標區域使用更小單位的區域定義反復使
用此方法。
注意：
?
對于 js 代碼建議分別以類庫 ? 功能 ? 行 為單位進行刪除測試
對于 HTML 代碼建議按照頁面結構先刪除最內部的 tag，由內及外，這樣可以迅速發現由于 tag 缺失造
成的錯誤，同時也能保證每次刪除的都是整段的代碼，避免由于刪除產生新的錯誤。
對于 css 代碼建議按照css文件 ? 定義的class系列 ? 行 為單位批量進行刪除測試
?
忌：對于確認與相關功能有關的部分不要隨便刪除。
副作用：使用此方法也可以很好的確認錯誤原因是js造成的還是css造成的。
?
2、 順藤摸瓜
臨床表現：錯誤信息較準確，能夠按照提示的錯誤逐層跟蹤，使用“化繁為簡”能夠基本定位的錯誤類
型
主要病因：基本語法錯誤、邏輯錯誤、不嚴謹（最常見的有：數組下標越界，null空指針導致的對象找
不到，undefined未初始化，NaN數字計算錯誤等）
排查方法：利用瀏覽器的調試工具（F12是個很好的功能鍵）：跟蹤代碼；利用console.log 輸出監控對
象（IE無效）；利用 alert監控（最無奈的方法，用于極端情況）；把調試代碼加載報錯命令行的前面
，
注意：
?
對于無js 報錯的情況，直接調試無效功能的代碼即可。有時候會發現之所以功能無效的原因居然是沒有
調用該代碼！（是不是很可笑？我承認我犯過這種錯誤。）
邏輯錯誤往往不太容易想清楚，這時候可以適當結合“化繁為簡”的思路進行調試。
當你使用的是類似于 jQuery 這種js庫時，如果報錯信息處于js庫內，首先要更換為未壓縮的js代碼進
行調試，然后分析是自己的哪段代碼會調用相關功能。
?
忌：鉆牛角尖！當按照此方法仍無法找到錯誤根源時，說明這并不是一個準確的錯誤信息，肯定有其他
潛在的因素在產生錯誤。立刻更改切入點，不要在一個地方長時間浪費時間。（這種時候，可以參考下
一個方法：“反復對照”）
?
3、 反復對照
臨床表現： 應用普通方法很難定位錯誤，前兩種方法怎么用都還是找不到頭緒。
主要病因： 邏輯復雜、功能互相綁定難以剝離、頁面對象內容復雜、有的頁面正常有的頁面不正常、兼
容問題等
排查方法： 對付這種復雜的麻煩，排查方法也會很繁瑣，但并不是什么特別高深的技術，只是需要多做
一些體力活兒而已。
?
方法一：檢查可疑的代碼，細化功能點，每次只修改一個地方，修改一次就測試一次，直到發現導致錯
誤的關鍵代碼。
方法二：制作最簡單的Demo 只實現需要的功能，當功能正常后，與出錯的正式代碼進行比較（比較中可
以適當使用方法一）
方法三：以正常功能（或出錯）的代碼為原型，修改一個地方就生成一個測試的備份，每個測試的案例
都只有一處與原始代碼不同，編上號碼，在特殊環境下逐一測試，檢查導致錯誤的根源（我曾經用這個
方法解決了韓文系統下IE8加載公司內部flash 不能正常發聲的bug）
?
注意：
?
使用此法一定要有耐心
此方法技術含量低，任何人都可以快速掌握，解決某些疑難雜癥基本上可以說是藥到病除！
?
4、 積累經驗
臨床表現：部分瀏覽器報錯、事件響應異常、js操作DOM無效、PC 和 觸屏系統功能不一致等
主要病因：各種兼容問題
排查方法：對于某些有明顯特征的報錯要熟記于胸，看到這些情況能立刻想到應該是哪些原因導致的。
（最明顯的例子：Json對象多了一個逗號的情況，只有ie報錯）
注意：
?
有個很基礎的問題，但有很多初學者出錯——沒有搞清楚頁面 html、css、js 的加載順序，導致js 操
作失敗。（去Google 或 Baidu 搜索：“html css js 加載順序”）
日常工作要細心，勤觀察。認真對待每一次查找錯誤的工作，對于部分非常特殊的情況可以記下來。
熟練利用 Google、Baidu 等搜索引擎，有時候自己第一次遇到的情況，別人早都知道如何解決了。
?
忌：粗心大意、不求甚解
?
5、 細節決定成敗
以上四種查找錯誤的方法全部都依賴于一個核心——細節！細節往往比你的技術水平更重要。說一句夸
張點兒的話，能有多少那么高深的技術等著你去做？好好把自己手上的工作認真完成吧！但請記住了，
當你重視細節以后，你距離去做高深技術的機會應該也就不遠了。
?
三、 如何修正錯誤？
老程序員們應該已經深有體會，改Bug 最頭疼的還是找錯，一旦找到錯誤后，真正解決問題可能真的是
只有幾分鐘。下面針對一些常見的錯誤原因與修改思路總結一下：
?
1、 基本語法、語言基礎
逗號、分號、雙引號、單引號 以及 各種括號 估計都曾導致過你的代碼錯誤吧？這些東西記牢，必須知
道什么時候應該使用什么，不要為了簡化代碼而精簡這些符號。
例如：if / for 等語句后面的 { } 最好還是帶上吧。
補充，對于js中的Number 數字的范圍希望大家有一定的了解，因為這個范圍肯定和后臺語言中的Long不
一樣的。（已經有不止一個朋友跟我說 zTree 會自動修改節點的id，當我看到案例后，原來是數字溢出
了！）
?
2、 條件嚴謹
對 Array 或者操作對象屬性時，盡可能讓條件判斷語句寫的完整、全面一些。
例如：判斷 a.abc 的時候，最好別忘了判斷 a 是否存在；或者操作Array時先判斷一下Array 是否存在
，要操作的下標是否越界等。
?
3、 注意兼容（css & js）
警惕部分瀏覽器不一致或者出錯的情況，很多情況都是兼容造成的。如果自己經驗不夠，直接去Google?
或者 Baidu。慢慢的自己經常接觸到的一些兼容問題就會牢記下來了。
補充，有時候要注意頁頭 W3C的定義，曾經有朋友問我 zTree 異常的問題，最終發現是 W3C只寫了一半
。
?
4、 邏輯陷阱
條件過于復雜；循環、判斷反復嵌套都是容易導致邏輯陷阱的因素。遇到這種情況，如果自己實在無法
解決那么請個身邊的高手來吧，讓他幫你講解一下。我相信，除了那些有點兒自閉的人來說，別人都會
愿意幫助你解決問題的（前提是你自己別太遭人恨了，呵呵）
補充：多去看看有關 重構 的技術書籍！會讓你提高很多的。
?
5、 異步加載
其實異步加載出現的問題往往屬于邏輯陷阱，但我必須要提出來專門講述，因為在這上面犯錯的人太多
了！！！！這里專門詳細講述一遍處理方法：
?
對于異步加載出現了異常，請按照以下流程進行逐一排查：
1）頁面是否有報錯，是否執行到 ajax 部分的代碼？（如果正常請看下一條）
?
2）用瀏覽器的調試工具監控網絡，ajax 加載的url 地址是否正確？（如果正常請看下一條）
?
3）用瀏覽器的調試工具監控網絡，傳遞給url 的參數是否正確？（如果正常請看下一條）
?
4）用瀏覽器的調試工具監控網絡，從url 返回的數據是否正確？（如果正常請看下一條）
?
5）在 ajax 的success中編寫調試代碼，調試異步加載后的處理方法是否正確
如果以上幾步都正常，那么我可以告訴你異步加載本身是一切正常的，還有錯怎么辦？繼續往下看
?
當異步加載確定正常后，就需要考慮另一個重要問題，也就是我在上一篇文章《這些年我們愛犯的弱智
錯誤（菜鳥必看）》中專門講述的易犯的錯誤——異步加載的疏忽
1）千萬不要在執行了 ajax 之后立刻去執行應該在異步加載完成之后再運行的代碼。因為你執行這段代
碼的時候，ajax根本沒有完成呢。（最明顯的現象：運行時時好時壞，但如果我加入了alert 會發現每
次都正常了）
這種情況，請將你的代碼轉移到 ajax的 success 或 error 里面去執行
?
2）當你設置了某些特殊開關時，一定不要忘了在 ajax 的error 里面進行重置，否則很可能因為一次網
絡異常，就會造成你的頁面js 功能失效。這種錯誤常常是地雷級別的，很難被發現。
?
6、 神奇的setTimeout
對于移動設備 或者 某些特殊情況，可以適當考慮使用 setTimeout 來解決問題。
我遇到比較特例的情況：有兩個js的事件因為不同的功能在同時對同一個DOM操作時會導致IE8崩潰，顯
然這是IE的bug，但我無法去要求微軟做什么…最終使用 setTimeout 讓其中一個功能延遲100-200毫秒
再執行，輕松搞定！
?
7、 別在一棵樹上吊死
做前端的人都很郁悶要適配n多的瀏覽器，往往會遇到一些自己無法解決的問題（因為是瀏覽器bug 造成
的），遇到這種情況怎么辦？一般來說尋找一下有沒有 hacker的方法，如果沒有，那么就換一種思路，
看看是否可以有其他方案來實現類似的功能。如果各種努力都做了…還有人不滿意的話，那么告訴他瀏
覽器的bug，讓項目管理者來決定到底如何處理吧——這種情況死而無憾了！
========
這些年我們愛犯的弱智錯誤（菜鳥必看）
http://ztreeapi.iteye.com/blog/1423986?
? ? No.1 ?大小寫不一致
? ? 把這個弱智錯誤名列榜首，可是當之無愧，從菜鳥到高手，能有幾人逃得過？
? ? 錯誤描述：一會兒用 id、pid；一會兒又是 Id、pId。當然要亂套了。
? ? 避免辦法：養成良好的命名習慣很重要。看著文檔做功課時要仔細。
? ? No.2 ?輸入錯誤
? ? 其實這個錯誤和大小寫不一致類似。
? ? 錯誤描述：輸入變量時左右手指出現了節奏時差，變量名中某兩個字母站錯了位置，本來應該輸入?
function 結果一不小心輸入了 fucntion，如果不仔細看怎么看怎么對。另外多個字母少個字母的情況
也時有發生。
? ? 避免辦法：敲代碼時要盡量集中精神，避免三心二意。檢查錯誤時可以把正常的代碼和錯誤部分的
代碼粘貼到一起，對比查看，往往很容易能夠發現這種錯誤。（推薦多玩玩兒“找不同”，也會不同程
度的提升糾錯能力）
Js代碼 ?收藏代碼
//兩行放在一起對比，是不是一眼就能看出來錯誤的地方呢？ ?
var children = function() { var _this = this; var iCounter = 0; ?iCounter++;} ?
var children = funtcion() { var _this = this; var iCounter = 0; ?icounter++;} ?
? ?
? ? No.3 ?多余的逗號
? ? 相信10個人中至少有8個人犯過這種錯誤。
? ? 錯誤描述：主要是對于 JSON 對象中，最后一個對象后面仍保留一個逗號。這種情況下對于?
firefox、chrome 等瀏覽器來說運行起來一切正常，可是放到 ie 上就報錯，再加上 ie 還很難調試，
所以對于菜鳥來說往往很難找到源頭。
? ? 舉例： {"a":1, "b":2, "c":3,}
? ? 出現這種錯誤最常見的情況就是在 Server 端利用循環語句批量生成 JSON 數據字符串的時候。
? ? 避免辦法：這個的確沒有太好的辦法徹底避免，只能是讓你的腦子里多一根經，一旦批量制作 JSON?
格式的內容時，就要小心最后面是不是會多一個逗號。
? ? No.4 ?數組的長度
? ? 錯誤描述：關于數組的使用時，總會時不時的出現一些下標越界 或者 null 方面的錯誤。
? ? 舉例：某個 function 中一段代碼 ?a[0] = a[1]+1; 大部分時候正常，但偶爾會出現錯誤。
? ? 避免辦法：產生這個錯誤一般來說是沒有養成使用數組時要首先對 數組對象進行檢查的習慣，例如
首先判斷 a!=null; 另外還要判斷 a.length 是否滿足你需要用到的 index 值。這個就是個習慣問題。
? ? No.5 ?詭異的計數器
? ? 這是一個 zTree 中曾經犯下的弱智錯誤，但由于原先使用多棵樹的用戶并不多，所以很長時間都沒
有暴露出來。
? ? 錯誤描述：有一個全局變量用于計數，但有多個不同的地方都在使用這一個計數器，當其中某處忘
記了其他地方還在使用這個計數器時，可能會對其進行清零重置。。OMG，這樣可就糟糕了吧，別的地方
因為計數器歸零會容易導致某些值沖突。
? ? 避免辦法：對于全局變量的使用要規范，對于改變全局變量的地方越少越好，或者封裝成固定的方
法，要清楚全局變量的作用，修改時一定要慎重。
? ? No.6 ?難以理解的等式
? ? 寫代碼就少不了 if；你在使用 if 的時候是否總會出現莫名其妙的結果呢？ 看看下面這段代碼的
結果，比較一下 a/b 的等式結果吧：
Js代碼 ?收藏代碼
var a = 0; ?
var b = "0"; ?
??
if (a) {console.log(1);} ? ? ? ? ? ? ?// false ?
if (!!a) {console.log(2);} ? ? ? ? ? // ?false ?
if (b) {console.log(3);} ? ? ? ? ? ? // ?true ?
if (!!b) {console.log(4);} ? ? ? ? ? // ?true ?
if (a == false) {console.log(5);} ? ?// true ?
if (!!a == false) {console.log(6);} // ?true ?
if (b == false) {console.log(7);} ? ?// ?true ?
if (!!b == true) {console.log(8);} ?// ?true ?
??
?
? ? 錯誤描述：對于 number 和 string 在 if 表達式中，如果值是 ?0 或 "0" 時總會讓你措手不及。?
?
? ? 避免辦法：建議對于非 boolean 對象的在判定時采用 !! 進行標準的 boolean 轉換，同時要記住?
js 中對于 0 這個特殊情況的判定，再結合你的需求編寫正確的判定表達式。
? ? No.7 ?JSON 對象的理解
? ? 有的初學者對于 server 端的對象能夠爭取理解，但是放到 js 中時往往開始變得糊涂了。
? ? 錯誤描述：錯誤的認為只要 {}里面的內容相同，那么這兩個對象就是一樣的。
? ? 舉例：認為 var a = {"id":1}; var b = {"id":1} 那么 a == b (正確答案： a != b)
? ? 避免辦法：需要正確理解 JSON 對象的定義。 每次 {} 就相當于生成一個新的 JSON 對象。
? ? No.8 ?js 文件加載順序
? ? 你是不是出現過js 文件都加載了，可是還總報 undefined 的錯誤呢？
? ? 錯誤描述：由于先加載了使用某個對象的代碼，后加載了定義該對象的代碼，導致報錯。
? ? 舉例：
?
Js代碼 ?收藏代碼
// a.js 文件 ?
function a() {return "a";} ?
??
// b.js 文件 ?
alert(a()); ?
??
?
? ? 避免辦法：牢記先要定義對象，然后才能使用對象，確保 js 文件的加載順序。
? ? No.9 ?瀏覽器的兼容問題
? ? 前兩天看到一句話，大概意思是：“作為一個 前端 程序員來說，很少有人能夠如此幸運——只兼
容一款瀏覽器”。
? ? 錯誤描述：在某個瀏覽器下調整的好好的，怎么換個瀏覽器就不好使了？？
? ? 避免辦法：如果讓你完全牢記所有會出現兼容問題的代碼，貌似不太現實。一般來說只能記住一些
常用的，或者是利用 jQuery 等架構減輕遇到這些問題的可能性。再有就是要提高警惕，一旦出現此類
情況，就要考慮一下是不是因為 js 的兼容問題造成的呢？（然后就去 google 一下，如果被墻了，那
么就去百度吧！呵呵）
? ? 補充：在不少情況下，往往是 css 的兼容出現了錯誤，讓你誤以為是 js 的錯誤。
? ? No.10 ?異步加載的疏忽（一）
? ? 對于一個菜鳥來說，對于異步加載的理解很關鍵，也是一個經常容易犯錯誤的地方。
? ? 錯誤描述：用 Ajax 去給某個對象賦值，緊接著 Ajax 的代碼后面就執行了使用這個對象的代碼。
然后你就會發現明明 Ajax 返回的結果是正確的，為何還不能正常執行呢？？
? ? 避免辦法：對于需要確保 Ajax 執行完畢后才能執行的代碼，一定要在 Ajax 的 success 和 error?
這兩個回調函數中進行。絕對不能緊跟在 Ajax 的代碼后面立刻執行。 一定要深刻理解“異步加載”的
含義，以及它最簡單的工作原理。
? ? No.11 ?異步加載的疏忽（二）
? ? 上面說了一定要在 Ajax 的 success 和 error 這兩個回調函數中執行必要代碼，success 不就可
以了，為何還要在 error 中執行呢？？
? ? 錯誤描述：對于某些在 Ajax 前設定的標識，只在 Ajax 的 success 中修改標識，會發現一旦?
server 或 網絡異常導致 Ajax 出錯時，就會出現一些很難理解的錯誤現象。
? ? 舉例：
?
Js代碼 ?收藏代碼
//這段代碼簡單的實現避免同時多個 ajax 執行的代碼，只有當 ajax 完成后才能重新 ajax ?
//一旦ajax過程出現錯誤后，這段代碼將導致 goAjax 永遠不會再進行 ajax 調用 ?
var a = true; ?
??
function goAjax() { ?
? if (a) { ?
? ? a = false; ?
? ? //這里用 jQuery 的 ajax 調用舉例 ?
? ? $.ajax({ ?
? ? ? ?success: function(msg) { ?
? ? ? ? ? ?a = true; ?
? ? ? ?} ?
??
? ? }); ?
? } ?
} ?
??
?
? ? 避免辦法：對于必要的標識，一定要在 error 中設置相應的數據恢復，避免由于 ajax 異常導致程
序邏輯錯誤。
? ? 例如上面的代碼需要增加:
? ? error: function() { a = true;}
? ? No.12 ?jQuery 搜索DOM對象是否存在的判定
? ? 這是一個剛使用 jQuery 時非常容易犯的錯誤。
? ? 錯誤描述：var a = $("#test"); if(!!a) {alert("ok!");} 運行這段代碼你會發現，永遠都會?
alert，不管是否存在 id = "test" 的DOM
? ? 避免辦法：jQuery 的 $ 方法查找對象，始終都會返回一個 jQuery 對象的，不管是否存在查找的
結果。檢查是否有結果請利用 length 屬性，比如 if(a.length>0) {alert("ok!");}
? ? 臨時起草，不會很全面，以后可能也會慢慢補充進來更多弱智錯誤的。?
========
總結
- 上一篇： VS条件断点学习总结
- 下一篇： js调试学习总结2