Yahoo!用戶界面博客（YUIBlog）

問薩蒂揚：寫作清潔，調試代碼

薩蒂揚（又名丹尼爾巴雷羅）是一個長期的YUI貢獻者和最豐富的，在大手筆專家YUI的論壇 。 他也是一個YUI 2.8.0，2.8.0 YUI的新著作者：學習的圖書館 。 這篇文章在“詢問薩蒂揚”系列是由JoeDev建議 。 雖然它的重點（如新書的重點）主要是銳 2，這裡描述的許多做法適用於銳 3以及 - 前端總體發展，無論您選擇的庫。

YUI庫論壇張貼問題之前，有很多事情可以做自己，如果你有方便的工具，你可能會發現你的答案全部由自己在任何時間。 此外，簡潔的代碼是健壯的代碼，不太可能休息的時候，強調。 良好做法不僅避免致命錯誤（那種驅動器的IRC頻道或搜索幫助論壇），但他們的一些小錯誤表面警告，並幫助您遠離致命的邊緣。

在這篇文章中，我要去看看這些最佳做法。 其中有些是具體與發展YUI的 ，但絕大多數適用於前端發展，無論您選擇Ajax庫。

JSLint

一個通過旅行JSLint是YUI構建過程的一部分。 JSLint，本身完全用JavaScript編寫的，就像是一個編譯器，但沒有代碼生成。 然而，它產生許多有用的錯誤信息和警告，編譯器將。 瀏覽器的JavaScript解釋器赦免許多錯誤，並承擔默認你可能不知道的; JSLint赦免少了，這點，你在你的程序有更好的選擇。 JSLint是在許多格式; YUI Builder工具使用它作為一個獨立的命令行應用程序，但你也可以集成到Eclipse或任何IDE或更多或能力較差的編輯器，您使用它-甚至有一個雅虎 Widget的JSLint 。

如果YUI庫的代碼在數不勝數的線可以通過 JSLint沒有錯誤和一些警告（它不能避免幾件事情），所以你的代碼。 當我累了，我覺得 JSLint非常有用。 豆在傍晚計數是在浪費時間，你很可能會錯過最明顯的錯誤。 JSLint並不在乎它是一天中什麼時候將指向你直，不匹配的大括號或拼寫錯誤的變量的問題的根源。

JSLint是最有用的，如果你讓你的代碼從一開始就乾淨。 如果你從來沒有使用JSLint之前，嘗試出來的應用程序已經是幾百線長，洪水有這麼多的警告，你會覺得它妨礙你的工作超過它有助於。 然而，這僅發生在第幾十倍。 一旦你學會遠離不良編碼實踐，JSLint診斷將很少，開門見山，​​你真正的錯誤，你瘋了，會明顯地凸現出來。 在此期間，JSLint將教你使你的代碼的安全和穩健的。

所以，不要等待一個艱難的錯誤顯示。 如果你從未使用JSLint，嘗試用您認為是什麼好的代碼，它可能不是你假設的一樣好。 正如 Douglas Crockford的 JSLint作者說，“JSLint會傷害你的感情。”但是，這是一個小的代價為更好的代碼。

全球和未使用的變量

JSLint的事情之一，會警告你的是使用全局變量。 應除可創建自動的，你知道，如沒有全局window document文件的庫，如使用YAHOO雅虎（銳 2） YUI YUI （YUI 3） 。 您可能還需要為自己的命名空間創建一個單一的全球。

全局變量是危險的 ，他們通常有比你更期待;此外，如Mashups和橫幅的“額外”添加其中。 由於window的HTML DOM命名空間可以從複合名稱省略window.name window.name window.length window.length window.location的全局name length長度location位置。 你從來沒有使用過這樣的變量名，在你的代碼嗎？ 我不是說在他們的HTML DOM的意義，但作為日常的字段名稱表-喜歡一個人，一個對象的長度或一本書在貨架上的位置的名字。 如果您使用這些變量沒有聲明該怎麼辦？ 您可能會認為最初是length undefined length window.length length ，但事實上，如果你不聲明你自己的本地副本（並初始化）， length將是一個參考window.length 。 而且，如果你指定的東西location位置，你可能會意外地導致用戶瀏覽當前頁。 在這裡，我只是與可能發生碰撞的例子瀏覽器的內置變量，但如果你開始增加從其他來源的圖書館，碰撞機會增加。 YUI的例子中使用的JavaScript語法高亮，使用dp變量DP作為它的根和全局變量，任何谷歌的腳本可能增加您在您的網頁中插入地圖或其他工具時，是不禮貌的，至少可以說。

它不僅是要加強與尊重別人的變量輕輕 - 你住的全局命名空間，降低風險，他們將在你的步驟，你會在自己的一步。 異步線程編織繞著對方本身，往往是在現代的JavaScript應用程序的情況下，你不能真正確定的順序，你的代碼的各個部分將執行什麼全局變量將被留在什麼人的價值。 唯一明智的做法是盡可能避免它們。

全局變量也可能指向一個錯字。 如果你有你並不意味著有一個全局變量，你有一個未使用的變量與一個相似的名字，你可能拼錯其中之一：也就是說，你可能已經宣布它與一個名字，並用另一個不同的拼寫。 這也意味著你已經宣布它後，你已經使用了它，這意味著，在執行時，您可能會發現你的變量沒有初始化，因為你本來期望。

使用this

使用this往往是初學者麻煩，因為它很容易失去跟踪我們在作用域鏈。 直到我們得到一些練習，保持跟踪的範圍可以是一個問題。 此外，開發應用程序的編碼風格和結構，幫助很大，畢竟，這一切都知道所在的位置事情。 如果你要學會堅持不懈地組織你的代碼，並存儲在狀態邏輯的this （這點到一個這樣的地方），在你的程序的信息將很容易找到。 任何調試器會告訴你this是什麼點，在每一步。 它總是一件好事，首先檢查this是您所期望的引用對象。 很多時候，我們有一個bug，這是因為this是指向window 。 有幾種情況可以產生這種結果的。

如果我們有一個內部函數的方法，當我們調用內部函數，它不會得到調用者的範圍window而是該窗口。 這個例子說明，內部函數不同意的範圍內包含它的方法：

  VAR someObject = {
     outerFunction：函數（）{
         / /打印的console.log（“外”，這的）;外部對象 {}
         VAR innerFunction =函數（）{
            的console.log（“內在的”，這）; / /打印出內心的窗口
         };
         innerFunction（）;
     }
 };
 someObject.outerFunction（）; 

有很多方式來解決這個。 在這個例子中，我們問JavaScript以正確的範圍， call()調用：

  VAR someObject = {
     outerFunction：函數（）{
         / /打印的console.log（“外”，這的）;外部對象 {}
         VAR innerFunction =函數（）{
             / /打印的console.log（“內在的”，這）;內部對象 {}
         };
         innerFunction 致電（本）;
     }
 };
 someObject.outerFunction（）; 

在接下來的例子中，我們採取的內部函數的能力，包含功能共享的變量優勢。 我們創建一個變量， self我們在外部函數初始化價值。 this 然後我們可以使用self的內在功能是指外部函數：

  VAR someObject = {
     outerFunction：函數（）{
         / /打印的console.log（“外”，這的）;外部對象 {}
         自我=;
         VAR innerFunction =函數（）{
            的console.log（“內在的” 自我 ）; / /輸出的內部對象{ }
         };
         innerFunction（）;
     }
 };
 someObject.outerFunction（）; 

最後，事件，監聽器的範圍，這個監聽器被連接的元素：

  VAR someObject = {
     outerFunction：函數（）{
         / /打印的console.log（“外”，這的）;外部對象 {}
         YAHOO.util.Event.on（“按鈕”，“點擊”，函數（）{
            的console.log（“內在的”，這）; / /輸出內<button id="button">
         }）;
     }
 };
 someObject.outerFunction（）; 

除非我們聽者的調整範圍，設置它時

  VAR someObject = {
     outerFunction：函數（）{
         / /打印的console.log（“外”，這的）;外部對象 {}
         YAHOO.util.Event.on（“按鈕”，“點擊”，函數（）{
             / /打印的console.log（“內在的”，這）; 內部對象{}
         }，為此，TRUE）;
     }
 };
 someObject.outerFunction（）; 

這也適用於 YUI的組件。 如果我們聆聽到一個 DataTable細胞，一個 TreeView節點或一個 MenuItem的Click事件，聽眾範圍將擁有該事件的YUI組件實例的 - 除非是明確的設置，否則。

沙箱中應用

保持您的代碼整潔的另一種好方法是用乾淨的骨架開始。 JavaScript應用程序的編碼風格隨著時間的推移發生了變化。 如今，大多數開發人員使用了兩種不同的風格：應用程序和庫組件之一。 大多數YUI的2個例子，反映了舊的風格，在這裡YAHOO.namespace我們用YAHOO.namespace我們自己的代碼創建一個命名空間。

如今，我們的應用程序，我們大多使用單一沙箱中的一個匿名函數，執行的範圍內onDOMReady onDOMReady ：

  YAHOO.util.Event.onDOMReady（函數（）{
     VAR DOM = YAHOO.util.Dom，
        事件= YAHOO.util.Event
         LANG = YAHOO.lang;

     VAR yourVariable = initialValue
         moreOfTheSame = otherInitialValue;

     VAR myFunction1 =功能（... ...）
         / /身體功能;
     };
     VAR myFunction2 =功能（... ...）
         / /身體功能;
     };
     ... ...
 }）; 

這種技術有幾個好處。

1. 檢查 DOM的權利的準備，從一開始，我們確保所有的HTML片段，我們可能要操縱是當前和安全使用。
2. onDOMReady提供的功能是沒有白費，它的沙箱中的容器，因為它的匿名的，它不污染全局命名空間。
3. 我們立即開始定義的變量，包括對我們最經常使用的對象的別名或短名稱。 這有其自身的其他一些優點：
   1. 我們節省一些打字
   2. YUI壓縮可以壓縮我們的短名稱，而不能YAHOO或它的屬性， util UTIL Menu Menu無論有多深，他們可能會像全局名稱。 如果他們在全局名稱，如挂靠YAHOO ，整個分支是碰不得的。 因此，我們已經短Dom DOM Event事件Lang郎可能會進一步降低A A B B C C時，壓縮機是在編譯的時候運行。
   3. 翻譯並不需要解決一遍又一遍的長文件名。 如姓名中的每一個點YAHOO.util.Event.onDOMReady是在符號表中所消耗的時間。
   4. 所有的變量，將這個匿名函數內的任何地方，甚至內定義的函數，除非它們定義相同名稱的變量。 基本上，它是，如果次全球環境已定義範圍內，所有的變量，將只是名義上的任何地方。
   5. 在沙箱中的變量，我們不需要使用，這給了我們這樣的頭痛時，使用傳統的OOP技術甚至使得主要功能的對象。 this

4. 我們定義的功能。 我們可以用var語句，像我一樣以上或function聲明;有一個細微的差別，但主要是不相干的。 我強調，他們是一樣訪問其他變量使用var語句：我們在沙箱中的任何地方都可以訪問它們。

當然，這依賴於 JavaScript的能力，讓我們來定義範圍內的職能和功能上的事實，內部函數訪問外部函數中定義的所有變量。 基本上，您定義的每個函數創建一個新的本地環境內的任何進一步的功能訪問。

沙箱是YUI的3做事的標準方式：

  YUI（）。使用（“模塊 1”，... ...，函數（y）{
     / /這是沙箱
 }）; 

對於庫的命名空間

雖然沙盒技術是偉大的最終應用的，它不是為圖書館。 會發生什麼事在沙箱中的停留在沙箱，到外面的世界完全看不見。 然而，當你定義自己的組件庫實用工具或，你想重新使用它，所以它需要在全球範圍內訪問（這不是純粹全球）。 凡是你下定義YAHOO.example -例如YAHOO.example.myUtility -是全局可訪問的。 一旦它被定義，您可以通過它的全名myUtility myUtility，作為一個全球YAHOO雅虎，是不是全球性的的，但它是全局可訪問的。

當我們建庫時，我們通常使用的沙箱，我們的代碼和共享的命名空間，像這樣：

  （函數（）{
     MyClass的=函數（）{
         / /這將是構造函數
     };
     MyClass.prototype = {
         / /屬性和方法
     };
     YAHOO.namespace（“MyLibrary”）;
     YAHOO.MyLibrary.MyClass = MyClass的
 })(); 

我們創建了一個定義一個匿名函數內的一切，我們立即執行的沙箱（括號中看到所有這些有？，他們的意思是“定義這個函數的結果，並執行它”）。 在這裡，我們不等待的DOM準備;圖書館很少做，因為使用它們的應用程序負責檢查一切就緒。 在沙箱中，我們有相同的優點，與以前的沙箱。 我們可以定義短的名稱，我們經常使用的任何，即使我們定義的類：他們沒有將外部可見。 然後，使全局訪問，我們創建了我們自己的的命名空間，並在其中放置我們最近創建的類。

YUI的記錄器

比方說，我們有我們的代碼非常乾淨，沒有 JSLint錯誤或警告，但我們仍然有問題，調試。 YUI可以告訴我們，什麼是錯的。 生產代碼中，我們通常會加載的YUI組件的縮小的版本，但也有其他兩個版本。 debug.js版本是一個可以幫助我們發現問題。 例如，我們可能會使用魔收集的方法setStyle ，可以說，改變一個文本塊的顏色。 這種變化不會發生，我們不能找到什麼是錯的。 文件DOM - debug.js有幫助的線，這是-min分鐘版本中刪除：

  YAHOO.log（“元素”+ EL +'未定義'，'錯誤'，'魔'）; 

這是執行時setStyle試圖找到樣式的元素，並沒有找到它。 錯誤消息可能會顯示一個元素的ID拼寫錯誤或一些這樣的錯誤，就是這麼難挑一個漫長的一天盯著相同的代碼後。

很容易獲得記錄器和運行;，你只需要包括它的文件：

  <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/logger/assets/skins/sam/logger.css">
 <script src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"> </ SCRIPT>
 <script src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"> </ SCRIPT>
 <script src="http://yui.yahooapis.com/2.8.1/build/logger/logger-min.js"> </ SCRIPT> 

基本yahoo-dom-event總的是最有可能就已經被拖放可選依賴是很方便的移動的方式記錄器窗口。 然後，只需添加：

  VAR myLogReader =新YAHOO.widget.LogReader（）; 

然後，它的一個加載的-debug調試版本的組件文件和它們所產生的所有消息將顯示。 因此，明智的做法是不加載-debug版本一次，信息量可以壓倒。 該記錄儀還可以過濾它顯示的信息，您可能會取消的消息信息“類別中，以集中精力警告和故障。 該過濾器不會影響什麼是記錄，只顯示的內容;記錄器記錄所有消息，不管是否讀取器顯示或不。 每個應用程序只有一個消息隊列，並記錄將盡快啟動記錄器組件文件加載，它不無論是顯示或不顯示。

銳 Logger的控制調試的另一個電力用戶的戰略是採取記錄器的能力，利用瀏覽器的控制台（在支持的瀏覽器）優勢：

  YAHOO.widget.Logger.enableBrowserConsole（）; 

這行代碼，你可以管所有的瀏覽器控制台，這是一個在任何情況下你的開發工作流程的自然的一部分logger消息。

唯一的Logger繁瑣的事情是要記住，改變從縮小的，聚合和組合組件文件-debug調試版本。 在這方面，一如既往地依賴配置是一個很大的幫助; -debug左上角的按鈕，點擊它會產生正確的文件清單。

而且，現在，我已經提到它：

檢查你的依賴

這是一個好主意，當你開始使用YUI挑一個例子，非常類似於你想要做的，並修改它。 當您添加更多的功能，你走位，並從其他的例子件，並納入您的開發應用。 頻繁的問題來源之一的依賴關係。 很多人都粘貼到他們的應用程序，每一個例子的相關文件，複製其中的一些一遍又一遍。 丟失，重複或順序依賴性可能會產生意想不到的錯誤。 雅虎全球做任何事之前先加載的對象是最肯定會是致命的。 無論如何，兩次加載的東西一定會增加你的頁面加載所需要的時間。

最後，如果您使用的是自己的服務器負載 YUI庫，您可能有庫錯誤副本的基本路徑。 如果您有螢火蟲，去Net標籤，並檢查有沒有紅色線。 這些將意味著無法找到請求的資源。

調試

Firebug插件為 Firefox仍然是最好的調試器周圍，加上它是免費的。 默認情況下，調試器被激活時，“打破所有的錯誤”選項，這意味著，螢火蟲將停止在發現錯誤的地步，並顯示錯誤信息和源代碼。 有些人將這些錯誤 JSLint會診斷相同，所以JSLint仍然是第一個開始的地方 - 特別是因為螢火蟲只能信號在每次運行錯誤而JSLint可以一次信號。 一些錯誤只會顯示在運行時，調試器是唯一的選擇。 每當你這樣的突破，首先要檢查的是this的，一個最棘手的排序的四個字母的單詞。

調試器使用沙箱時，通常會顯示本地變量和參數，但他們通常不會提供顯示包含的功能，如在沙箱中，並宣布從內部函數內使用的變量。 調試器將能夠證明自己的價值，如果你明確要求他們按名稱，但它不會自動顯示它們。 另一種方法是，使它們在全球訪問。 例如，自YAHOO.example是始終可用（銳2頁），如果你想保持眼上的某些組件在任何時候，你可以簡單地複製它有：

  myTree的=新YAHOO.widget.TreeView（“樹容器”）;
 YAHOO.example.myTree = myTree的; 

我們添加最後的任務，而調試，所以我們可以保持TreeView的實例上的眼睛myTree調試myTree的，因為通常會在沙箱和無形的其他地方。

不要使用以下劃線開始的成員

很多人使用調試器來尋找他們需要的信息的屬性變量或控股的名稱。 有時了解這些信息存儲在一個下劃線一樣，開始物業_nodes 。 按照慣例，這些都是私人性質，不能用於一般用途。 JavaScript的執行沒有真正的私有或受保護的成員概念，因此前導下劃線的是傳統的信號類的開發，私有財產的意圖。 這些屬性可以出現一種誘惑（畢竟，你可以看到他們在調試器中有），但也有幾個很好的理由，為什麼在程序中使用它們是不明智的。

首先，只有公共接口支持。 既然你不應該使用的屬性，開始以下劃線，類的開發人員可以自由隨時更改。 開發商應該提供一些公共的機制來訪問相同的值，例如_nodes _nodes私有財產可能getNodes()方法nodes配置屬性。 要么將這些值相同的公共接口。 不使用前導下劃線的屬性，第二個原因是，他們的訪問器可能需要訪問的私有財產，完全繞過產生二次效應。 然後組件將被留在不一致的，脆弱的狀態。

因此，如果您正在使用的調試器尋找一個值，你會發現在開始領先的財產，它強調，不要使用它。 而API文檔和方法指數中尋找一些getXxxx()方法具有類似的名稱或配置屬性指數。 避免使用私有變量。

堆棧跟踪

YUI庫是強大的和可靠的。 如果調試器在YUI庫的突破，它更可能的，這是由於你的代碼引起的，在銳本身的一些失敗的錯誤。 JavaScript是設計進行，總是盡可能地與錯誤應對。 同樣 YUI庫。 的-debug版本-debug將有額外的檢查，並會發出診斷消息，但它們都剝離在縮小的版本。 如果你看到一個在YUI文件的錯誤很可能，它走出了純粹的固執，但不要試圖找到有錯誤。 當調試器停止它不是因為它發現錯誤的原因，但因為 JavaScript解釋器可以不再進行。

在縮小的文件的休息沒有幫助，如果你得到一個消息，如... ...

  F是不是在DOM - min.js 7行的對象 

... ...這是毫無意義的要求，在它的論壇。 首先， F是YUI壓縮器產生的原始未壓縮文件，以取代一個較長的，描述性的變量名的別名;其次，組件文件的前幾行通常是由版權聲明，YUI壓縮一貫尊重。 此外，由於YUI壓縮也將刪除所有的新行字符，因為它與其他空白，在第7行，8日和9中的所有可執行dom-min.js min.js -行號不說太多，要么。

這是正確的Firebug的腳本“選項卡的子面板（或任何你可以找到在調試器中的堆棧跟踪）的堆棧跟踪標籤來方便。 它告訴你如何到達那裡。 下面是從 Firebug的屏幕捕捉：

頂部右側面板中，的createEvent()是當前語句的函數的名稱，下面一個是所在的地方createEvent() createEvent（）;下面的一個函數調用前一個;依此類推。 大多數調試器將讓你選擇任何的跟踪點，看你怎麼了，你在哪裡。 Firebug還會使您可以檢查變量的值在每個軌跡點。 我們可以看到在左邊的子面板的黃色箭頭指向createEvent() 這個時候，我們很幸運，因為它會始終指向包含有問題的代碼行，但該代碼可能會在該行的任何地方，幸運的createEvent() （）發生在該行的開頭。 查看變量和參數B B G G L L ... ...有沒有猜測本來原來的名稱，因為這是在工作YUI壓縮。 但是，請注意， YAHOO是不變，並保留版權聲明。

您可能無法識別許多在堆棧跟踪中的名稱，因為他們可能在內的YUI庫本身的功能功能。 最終，你可能會看到你認識的函數名。 在此圖像中，我知道showAlbums ，調用的構造REDT類（這是我寫的代碼） 。 我沒有其他任何線索。 這就是我會去尋找 ... ...我知道的。

如果你不知道，你可以通過完整的列表。 如果你看到壓縮代碼（假設你有沒有壓縮你自己），簡單地忽略它，或切換到非縮小的版本的YUI源文件。 但主要集中在這些名字，你認識到屬於自己的代碼。 請注意，Firebug的(?)() (?)()不能命名的痕跡。 通常情況下，在沙箱中的代碼將發出信號，這樣以來，沙箱是一個匿名函數中。 在任何您的跟踪等點，請您提供作為參數的變量的值，其中一些可能不是你的假設。 對 API文檔的檢查，看它是否是一個有效的參數值。

如果你看到的參數和變量的值是不確定的，至少你可以放置一個斷點權利，然後您的代碼調用 YUI組件。 然後，您可能能夠看到如何陷入困境的。

堆棧跟踪開發人員常常被忽視，但JavaScript的傾向，保持本身，因為它試圖進行挖掘到一個更深的洞，這是好事，可以拿出來表面環顧四周。 與所有的調試技術，它可能並不總是工作，但它是很好的，知道它的存在。 讓我們說實話，如果你讀過這遠，你知道絕望是什麼。

異步調用

很多Web2.0的應用程序的交互性特點的基礎上處理異步事件的能力。 在與原有的風格的Web應用程序，每一次互動參與等待了新的一頁，從服務器交付相比，現代的交互式應用程序包括設置了幾種可能的事件發生任何聽 ...然後響應這些事件。 我們設置點擊或鍵盤或其他的綱領性事件的聽眾，這些通常是直觀的。 異步調用和回調，但是，往往是很難理解。

我在論壇上的實現看到的最常見的錯誤是把權後，如連接管理器的異步asyncRequest() （）或sendRequest() sendRequest（）方法，假設操作完成時，將執行這樣的代碼。 當你調用這樣的功能，你只是吸式操作，而不是全面執行。 任何數據都不會提供異步方法調用後。 只有對這些數據的要求，至今已生產。 服務器必須接收和處理，並答复（如果）在未來仍然關閉。 這就是為什麼我們這樣的異步操作使用回調函數。

回調是一樣的功能，我們作為一個監聽分配，如在表單的按鈕點擊事件，當用戶點擊，監聽器被調用。 一個異步事件的回調是非常喜歡這就像我們為用戶發送表單填寫，我們請求消息發送到服務器，就像我們等待填寫的形式提交回我們的節目，我們等待由服務器發送回來給我們的答复。 我們不知道當用戶提交表單或服務器發送的答复，這就是為什麼我們設置用戶操作我們稱之為一個事件監聽器和異步事件中，我們調用一個回調函數。 這似乎服務器的答复是快的，如果不是瞬間的，但它是指年齡在CPU時間。

調試異步調用

有時是沒有辦法，只好通過代碼單步。 要小心，當你如連接管理器的異步asyncRequest()方法，數據sendRequest() （）或window.setTimeout() （ ）。 這些啟動對服務器的數據的異步請求或延遲一些行動，一個給定的時間和他們的回調稱為時已收到的數據或時間已過。 有兩個問題需要考慮，第一，調試器將無法進入回調一步自動。 如果你想捕捉的答复，你把裡面的回調函數斷點。 很多人都達到調用異步方法，並期望單步內回調的異步操作完成時恢復。 不會發生這種情況，執行線程不自動流入回調，並且調試器無法預計的數字，一出。

第二，當您達到與異步調用的線，在回調斷點，然後讓應用程序的運行。 通常情況下，無論異步調用後並不重要;實際上，異步調用通常是一個函數的結尾，因為沒有太多的做，直到到達的答复。 不要在異步調用單步，因為調試器將繼續保持JavaScript解釋和答复時到達或時間之後，它就會錯過以來解釋被凍結，無法處理。 所以，如果你步過一下，當你到異步調用，確保您有回調的斷點，然後單擊運行 JavaScript解釋是積極的和能夠處理的答复。

如重複事件到回調window.setInterval()或其他時間臨界操作，最好是不要把他們的斷點。 當你持有的是，許多事件將被錯過。 它通常是更好的使用console.log或YUI的記錄器，簡單的信號，事件發生和顯示數的臨界值。 不要使用window.alert()出於同樣的原因，將在瀏覽器上保持和您所關心的事件將被錯過。

結論

有許多工具來幫助我們搞清楚什麼是發生在我們的程序。 在合適的工具，我們可以找到比什麼需要我們寫在論壇中的問題在更短的時間內的錯誤。 然而，第一步是編寫良好的和可靠的代碼，使JSLint你的開發過程中不可或缺的一部分。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！