利用chrome的調試功能調試JavaScript代碼

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

下面我将通過一個例子讓大家對chrome的調試功能有個大概的認識。

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

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

調試指令： 打開調試視窗後，你可以在底部的輸入視窗中輸入相關的調試命名，當你輸入相關指令敲回車

執行後，調試資訊視窗顯示的調試指令前會加上$。下面是相關的調試指令，根據調試狀态有

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

<dl></dl>

<dt>break [condition]</dt>

<dd>Set a break point where the location is &lt;function&gt; or &lt;script:function&gt; or &lt;script:line&gt; or &lt;script:line:pos&gt;</dd>

<dt>break_info [breakpoint #]</dt>

<dd>List the current breakpoints [or the details of the breakpoint that is specified]</dd>

<dt>clear &lt;breakpoint #&gt;</dt>

<dd>Remove a specified breakpoint</dd>

<dt>help [command]</dt>

<dd>Display the help information for the current status [or the specified command]</dd>

<dt>print &lt;expression&gt;</dt>

<dd>Output the expression specified which can be string, object, function, variable, etc.</dd>

<dt>scripts</dt>

<dd>List all of the scripts attached to the page.</dd>

<dt>args</dt>

<dd>Summerize the arguments to the current function. Does not display anything if there are no arguments.</dd>

<dd>See Running Description</dd>

<dt>backtrace [&lt;from frame #&gt; &lt;to frame #&gt;]</dt>

<dd>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 *</dd>

<dt>clear</dt>

<dt>continue</dt>

<dd>Continues the execution of the script.</dd>

<dt>frame [frame #]</dt>

<dd>Shows the current frame [or shows the specified frame]</dd>

<dt>help</dt>

<dt>locals</dt>

<dd>Summarize the local variables for current frame. Displays the variables and their values.</dd>

<dt>next</dt>

<dd>Moves to the next line in the code. Seems to be like step.</dd>

<dt>print</dt>

<dt>source [from line] | [&lt;from line&gt; &lt;num lines&gt;]</dt>

<dd>Show the current functions source code [or see a specified line or range of lines]</dd>

<dt>step</dt>

<dd>Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *</dd>

<dt>stepout</dt>

<dd>* Seems to not work! Should step out of the current debugging step. It should work like continue! *</dd>

基礎執行個體：     執行個體将向你展示如何通過一些基本步驟添加兩個斷點，檢視參數、變量運作時的情況，很簡單的。

執行個體代碼：     下面是一個簡單的HTML頁面以及外部引用的js檔案，有兩個函數和兩個按鈕，兩個函數分别是兩個按鈕點選時的處理函數。

HTML頁面： &lt;html&gt;   &lt;head&gt;   &lt;title&gt;TEST&lt;/title&gt;   &lt;script type="text/javascript"&gt;   function hello1(){     var d = new Date();     var str = "Hello World - One./n/nIt is ";     alert( str + d.toString() );   } &lt;/script&gt; &lt;script type="text/javascript" src="hello2.js"&gt;&lt;/script&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;input type="button" onclick="hello1()" value="Hello 1" /&gt;     &lt;input type="button" onclick="hello2('hey hey')" value="Hello 2" /&gt;   &lt;/body&gt; &lt;/html&gt;

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

一步步來： 1、儲存上面的代碼和頁面然後在chrome中打開該頁面。你可以通過兩種方式打開調試視窗，一種是Page Icon --&gt; 開發人員 --&gt; 調試 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文裡面的方式翻譯，如果有什麼不對的地方，請指正，我們的目标，“共同進步才是真的進步”。

<a href="http://blog.csdn.net/panda6174/article/details/4158952">原文位址</a>

本文轉自Work Hard Work Smart部落格園部落格，原文連結：http://www.cnblogs.com/linlf03/archive/2012/01/05/2313436.html，如需轉載請自行聯系原作者