利用chrome除錯JavaScript程式碼

weixin_34391854發表於2013-12-02
Chrome除錯JavaScript

看見網上很多人問怎麼用chrome除錯JavaScript程式碼，我也對這個問題抱著疑問，但是沒有找到一篇能用的中文文章（可能我的google有問題），也不知道怎麼點出一篇E文的,感覺作者寫得不錯，所以儘量按照原來的風格弄一篇中文的，希望對和我一樣存在疑問的朋友有所幫助。如果高手路過，下面留言指點，或給與相關學習連結，謝謝。


下面我將通過一個例子讓大家對chrome的除錯功能有個大概的認識。

幾個存在的bug：
    我發現除錯功能中有個小bug（作者發現的），尤其是在開啟除錯視窗時開啟控制視窗，我的chrome瀏覽器會像變魔術一樣從螢幕上消失（在下面的除錯過程中沒有遇到這樣的問題，可能是作者用的β版的吧，哈哈）。接下來的步驟將不再由我控制。我僅僅是用了一個很簡單的測試頁面就出了問題，不敢想象更大工作量下的情況。
    
    如果你設定了斷點後關閉了除錯工具，斷點任然存在（在測試過程中發現對程式執行沒有影響，但是再次啟動除錯工具後原來的斷點會對除錯產生影響）。

（以上問題，作者在MAC本本上除錯出的問題，你不一定會碰到，不用在意）。

除錯命令：
開啟除錯視窗後，你可以在底部的輸入視窗中輸入相關的除錯命名，當你輸入相關命令敲回車

執行後，除錯資訊視窗顯示的除錯命令前會加上$。下面是相關的除錯命令，根據除錯狀態有

兩個命令集：runnig，paused。注意：[]是可選項，<>是必選項。

Commands while page is running (no breakpoints hit)

break [condition]
Set a break point where the location is <function> or <script:function> or <script:line> or <script:line:pos>
break_info [breakpoint #]
List the current breakpoints [or the details of the breakpoint that is specified]
clear <breakpoint #>
Remove a specified breakpoint
help [command]
Display the help information for the current status [or the specified command]
print <expression>
Output the expression specified which can be string, object, function, variable, etc.
scripts
List all of the scripts attached to the page.

Commands while page is paused in debugging mode (Break point is hit)

args
Summerize the arguments to the current function. Does not display anything if there are no arguments.
break [condition]
See Running Description
break_info [breakpoint #]
See Running Description
backtrace [<from frame #> <to frame #>]
Look at all the current frames [or look at the frames specified in the range.]* Looks like you need to specify both. Changed notation here compared to the help in the debugger *
clear
See Running Description
continue
Continues the execution of the script.
frame [frame #]
Shows the current frame [or shows the specified frame]
help
See Running Description
locals
Summarize the local variables for current frame. Displays the variables and their values.
next
Moves to the next line in the code. Seems to be like step.
print
See Running Description
scripts
See Running Description
source [from line] | [<from line> <num lines>]
Show the current functions source code [or see a specified line or range of lines]
step
Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *
stepout
* Seems to not work! Should step out of the current debugging step. It should work like continue! *

基礎例項：
    例項將向你展示如何通過一些基本步驟新增兩個斷點，檢視引數、變數執行時的情況，很簡單的。

例項程式碼：
    下面是一個簡單的HTML頁面以及外部引用的js檔案，有兩個函式和兩個按鈕，兩個函式分別是兩個按鈕點選時的處理函式。

HTML頁面：

 1 <html>
 2   <head>
 3   <title>TEST</title>
 4   <script type="text/javascript">
 5   function hello1(){
 6     var d = new Date();
 7     var str = "Hello World - One./n/nIt is ";
 8     alert( str + d.toString() );
 9   }
10 </script>
11 <script type="text/javascript" src="hello2.js"></script>
12   </head>
13   <body>
14     <input type="button" onclick="hello1()" value="Hello 1" />
15     <input type="button" onclick="hello2('hey hey')" value="Hello 2" />
16   </body>
17 </html>

 

hello2.js：

function hello2( foo ){
  var d = new Date();
  var str = foo + "/n/nHello World - Two./n/nIt is ";
  alert( str + d.toString() );
//keleyi.com
}

 


一步步來：
1、儲存上面的程式碼和頁面然後在chrome中開啟該頁面。你可以通過兩種方式開啟除錯視窗，一種是Page Icon --> 開發人員 --> 除錯 JavaScript；另一種是通過快捷鍵Ctrl + Shift + L開啟。 除錯視窗開啟後，你將看見一個很大的帶滾動條的資訊顯示窗和可以輸入除錯命令的文字框。

2、如果你輸入help後回車，將在資訊顯示視窗中看見你可以輸入的除錯命令的相關資訊。我們從scripts命令該開始。在命令輸入框中輸入scripts後回車，在資訊視窗中你將看見當前頁面所引用的js檔案，注意，如果你的chrome中有JavaScript console，將會有許多js檔案被引入。

3、我們不能像在VS裡面那樣隨意的設定斷點，但是我們可以通過另一種方式來設定。在例項程式碼中有hello1()和hello2()兩個函式，要驗證函式的存在可以使用print命令。在命名輸入框中輸入print hello1你將在資訊視窗中看見函式對應的程式碼，當我們確實函式確實存在，我們就可以通過break hello1設定該函式的斷點，當函式被呼叫時會在函式入口處停止下來。hello2的設定方式一樣。

4、為了驗證斷點是否已經設定，我們可以使用break_info命令來檢視斷點資訊。如果僅僅是想了解第幾個斷點是什麼，可以使用斷點序列來檢視，命令如下：break_info 1，該命令檢視第二個斷點是什麼。

5、當我們設定好斷點後，你可以通過點選頁面上的按鈕來觸發斷點，如果你單擊第一個按鈕，hello1函式被呼叫的時候會停止下來，你可以通過args命令檢視當前函式引數的情況，但是hello1沒有引數，所以你看不見任何東西，你可以試試點選第二個按鈕來獲取引數來看看args的效果。此時你可以使用next命令使程式繼續往下執行；如果你想檢視當前變數的實際情況，可以再命令輸入框中輸入locals，資訊視窗中就會顯示當前變數的資訊。next使程式執行下一行程式碼，如果想程式直接繼續往下執行直到該停止時停止，輸入continue即可。

6、同樣在除錯過程中，你可以通過print命令輸出變數的情況，用step代替next，用stepall代替continue命令執行相關的除錯，自己動手試試看看效果有什麼不同吧。

7、最後我們希望移除斷點，採用什麼方法呢？在命令框中輸入clear 1，然後再點選第二個按鈕試試有什麼效果，哇，程式直接執行了並沒有在hello2函式出停止下來，hello2的斷點消失了。


上面的內容希望對你入門chrome的除錯有所幫助，有的地方沒有按照E文裡面的方式翻譯，如果有什麼不對的地方，請指正，我們的目標，“共同進步才是真的進步”。

原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html

相關文章