5 源碼控制面板（js調試）
Javascript的調試，基本上是通過源碼控制面板和命令行配合進行的。
5.1 Beautiful javascript
網上的js一般是壓縮過的，閱讀壓縮過的javascript肯定是不是人能進行的，更別說添加斷點了。在 Scripts 面板下面有個 Pretty print 按鈕(這種符號 {}), 點擊會將壓縮 js 文件格式化縮進規(guī)整的文件, 這時候在設定斷點可讀性就大大提高了。
調整前
調整后
5.2 代碼出錯定位
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>javascript add</title> 8 9 <script type="text/javascript">10 11 var div=document.getElementByd("a");12 13 function calSum(){14 15 var a=parseInt(document.getElementById("num1").value);16 17 var b=parseInt(document.getElementById("num2").value);18 19 document.getElementById("num3").value=(a+b);20 21 }22 23 </script>24 25 </head>26 27 <body>28 29 <input type="text" id="num1"/>add<input type="text" id="num2"/>30 31 <input type="button" id="btnCal" onclick="calum()" value="equal"/><input type="text" id="num3"/>32 33 </body>34 35 </html>
上面的代碼中，紅色標記部分顯然是錯誤的，在IDE中有些錯誤是檢查不出來的（特別是跟瀏覽器有關的部分）。加載該頁面后，可以在顯示欄看到報錯信息，然后直接定位至出錯點。
Javascript錯誤位置定位
5.3 添加斷點及單步
5.3.1 斷點中斷
可以通過單擊左側側添加斷點，并在右側顯示。也可以通過watch expression添加查看的變量。
我們添加了一個斷點，如果在頁面上的操作執(zhí)行到斷點處，就會在斷點處終止。然后，我們可以通過右側最上面的按鈕調試，與VS等IDE的調試非常相近。Call stack是顯示函數的調用棧，在調試大規(guī)模的javascript程序是非常有用。
單步調試
5.3.2 頁面中斷調試
除了給設定常規(guī)斷點外, 還可以在某一特定事件發(fā)生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數開始執(zhí)行時中斷), onload, scroll 等事件。
6 顯示行（命令行）
命令行對于我們這種菜鳥有一個非常有用的地方，對于javascript提供的API或者API的功能不是非常熟悉。這個時候命令行就成為我們試驗最好的地方。如，我們想查看document下面有哪些函數，我們就可以在命令行中輸入，然后選中并嘗試。對于jquery等開源框架的學習，這種方式也非常高效，學代碼還是得跑起來才行。
我們可以在命令行里面直接改變內存中的內容，對于小函數我就可以用這樣的方式直接替換。
我們按enter是對輸入的內容運行，如果要換行需要按shift+enter。在這里面，我們直接在命令行里面里面講calSum函數覆蓋掉，a+b換成了a*b。運行結果如下所示。
命令行使用
運行結果
本文導航
- 第1頁: 首頁
- 第2頁: 右側功能欄
- 第3頁: 資源控制面板\網絡控制面板
- 第4頁: js調試源碼控制面板
- 第5頁: 性能查看控制面板
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
