利用chrome調試JavaScript代碼

時間 2019-11-15

標籤利用 chrome 調試 javascript 代碼欄目 Chrome 简体版

原文原文鏈接

看見網上不少人問怎麼用chrome調試JavaScript代碼，我也對這個問題抱着疑問，可是沒有找到一篇能用的中文文章（可能個人google有問題），也不知道怎麼點出一篇E文的,感受做者寫得不錯，因此儘可能按照原來的風格弄一篇中文的，但願對和我同樣存在疑問的朋友有所幫助。若是高手路過，下面留言指點，或給與相關學習連接，謝謝。javascript

下面我將經過一個例子讓你們對chrome的調試功能有個大概的認識。html

幾個存在的bug：
    我發現調試功能中有個小bug（做者發現的），尤爲是在打開調試窗口時打開控制窗口，個人chrome瀏覽器會像變魔術同樣從屏幕上消失（在下面的調試過程當中沒有遇到這樣的問題，多是做者用的β版的吧，哈哈）。接下來的步驟將再也不由我控制。我僅僅是用了一個很簡單的測試頁面就出了問題，不敢想象更大工做量下的狀況。

    若是你設置了斷點後關閉了調試工具，斷點任然存在（在測試過程當中發現對程序運行沒有影響，可是再次啓動調試工具後原來的斷點會對調試產生影響）。java

（以上問題，做者在MAC本本上調試出的問題，你不必定會碰到，不用在乎）。chrome

調試命令：
打開調試窗口後，你能夠在底部的輸入窗口中輸入相關的調試命名，當你輸入相關命令敲回車express

執行後，調試信息窗口顯示的調試命令前會加上$。下面是相關的調試命令，根據調試狀態有瀏覽器

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

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
}

一步步來：
一、保存上面的代碼和頁面而後在chrome中打開該頁面。你能夠經過兩種方式打開調試窗口，一種是Page Icon --> 開發人員 --> 調試 JavaScript；另外一種是經過快捷鍵Ctrl + Shift + L打開。調試窗口打開後，你將看見一個很大的帶滾動條的信息顯示窗和能夠輸入調試命令的文本框。

二、若是你輸入help後回車，將在信息顯示窗口中看見你能夠輸入的調試命令的相關信息。咱們從scripts命令該開始。在命令輸入框中輸入scripts後回車，在信息窗口中你將看見當前頁面所引用的js文件，注意，若是你的chrome中有JavaScript console，將會有許多js文件被引入。

三、咱們不能像在VS裏面那樣隨意的設置斷點，可是咱們能夠經過另外一種方式來設置。在實例代碼中有hello1()和hello2()兩個函數，要驗證函數的存在可使用print命令。在命名輸入框中輸入print hello1你將在信息窗口中看見函數對應的代碼，當咱們確實函數確實存在，咱們就能夠經過break hello1設置該函數的斷點，當函數被調用時會在函數入口處中止下來。hello2的設置方式同樣。

四、爲了驗證斷點是否已經設置，咱們可使用break_info命令來查看斷點信息。若是僅僅是想了解第幾個斷點是什麼，可使用斷點序列來查看，命令以下：break_info 1，該命令查看第二個斷點是什麼。

五、當咱們設置好斷點後，你能夠經過點擊頁面上的按鈕來觸發斷點，若是你單擊第一個按鈕，hello1函數被調用的時候會中止下來，你能夠經過args命令查看當前函數參數的狀況，可是hello1沒有參數，因此你看不見任何東西，你能夠試試點擊第二個按鈕來獲取參數來看看args的效果。此時你可使用next命令使程序繼續往下執行；若是你想查看當前變量的實際狀況，能夠再命令輸入框中輸入locals，信息窗口中就會顯示當前變量的信息。next使程序執行下一行代碼，若是想程序直接繼續往下執行直到該中止時中止，輸入continue便可。

六、一樣在調試過程當中，你能夠經過print命令輸出變量的狀況，用step代替next，用stepall代替continue命令執行相關的調試，本身動手試試看看效果有什麼不一樣吧。

七、最後咱們但願移除斷點，採用什麼方法呢？在命令框中輸入clear 1，而後再點擊第二個按鈕試試有什麼效果，哇，程序直接執行了並無在hello2函數出中止下來，hello2的斷點消失了。

上面的內容但願對你入門chrome的調試有所幫助，有的地方沒有按照E文裏面的方式翻譯，若是有什麼不對的地方，請指正，咱們的目標，「共同進步纔是真的進步」。

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