5 源碼控制面板（js調(diào)試）
Javascript的調(diào)試，基本上是通過(guò)源碼控制面板和命令行配合進(jìn)行的。
5.1 Beautiful javascript
網(wǎng)上的js一般是壓縮過(guò)的，閱讀壓縮過(guò)的javascript肯定是不是人能進(jìn)行的，更別說(shuō)添加斷點(diǎn)了。在 Scripts 面板下面有個(gè) Pretty print 按鈕(這種符號(hào) {}), 點(diǎn)擊會(huì)將壓縮 js 文件格式化縮進(jìn)規(guī)整的文件, 這時(shí)候在設(shè)定斷點(diǎn)可讀性就大大提高了。
調(diào)整前
調(diào)整后
5.2 代碼出錯(cuò)定位
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>
上面的代碼中，紅色標(biāo)記部分顯然是錯(cuò)誤的，在IDE中有些錯(cuò)誤是檢查不出來(lái)的（特別是跟瀏覽器有關(guān)的部分）。加載該頁(yè)面后，可以在顯示欄看到報(bào)錯(cuò)信息，然后直接定位至出錯(cuò)點(diǎn)。
Javascript錯(cuò)誤位置定位
5.3 添加斷點(diǎn)及單步
5.3.1 斷點(diǎn)中斷
可以通過(guò)單擊左側(cè)側(cè)添加斷點(diǎn)，并在右側(cè)顯示。也可以通過(guò)watch expression添加查看的變量。
我們添加了一個(gè)斷點(diǎn)，如果在頁(yè)面上的操作執(zhí)行到斷點(diǎn)處，就會(huì)在斷點(diǎn)處終止。然后，我們可以通過(guò)右側(cè)最上面的按鈕調(diào)試，與VS等IDE的調(diào)試非常相近。Call stack是顯示函數(shù)的調(diào)用棧，在調(diào)試大規(guī)模的javascript程序是非常有用。
單步調(diào)試
5.3.2 頁(yè)面中斷調(diào)試
除了給設(shè)定常規(guī)斷點(diǎn)外, 還可以在某一特定事件發(fā)生時(shí)中斷(不針對(duì)元素) , 在 Scripts 面板右側(cè), 有個(gè) Event Listener Breakpoints, 這里列出了支持的所有事件, 不僅 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數(shù)開始執(zhí)行時(shí)中斷), onload, scroll 等事件。
6 顯示行（命令行）
命令行對(duì)于我們這種菜鳥有一個(gè)非常有用的地方，對(duì)于javascript提供的API或者API的功能不是非常熟悉。這個(gè)時(shí)候命令行就成為我們?cè)囼?yàn)最好的地方。如，我們想查看document下面有哪些函數(shù)，我們就可以在命令行中輸入，然后選中并嘗試。對(duì)于jquery等開源框架的學(xué)習(xí)，這種方式也非常高效，學(xué)代碼還是得跑起來(lái)才行。
我們可以在命令行里面直接改變內(nèi)存中的內(nèi)容，對(duì)于小函數(shù)我就可以用這樣的方式直接替換。
我們按enter是對(duì)輸入的內(nèi)容運(yùn)行，如果要換行需要按shift+enter。在這里面，我們直接在命令行里面里面講calSum函數(shù)覆蓋掉，a+b換成了a*b。運(yùn)行結(jié)果如下所示。
命令行使用
運(yùn)行結(jié)果
本文導(dǎo)航
- 第1頁(yè): 首頁(yè)
- 第2頁(yè): 右側(cè)功能欄
- 第3頁(yè): 資源控制面板\網(wǎng)絡(luò)控制面板
- 第4頁(yè): js調(diào)試源碼控制面板
- 第5頁(yè): 性能查看控制面板
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
