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

來源:互聯網
上載者:User
文章目錄
  • Commands while page is running (no breakpoints hit)
  • Commands while page is paused in debugging mode (Break point is hit)

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

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

下面我將通過一個例子讓大家對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頁面: <html>   <head>   <title>TEST</title>   <script type="text/javascript">   function hello1(){     var d = new Date();     var str = "Hello World - One./n/nIt is ";     alert( str + d.toString() );   } </script> <script type="text/javascript" src="hello2.js"></script>   </head>   <body>     <input type="button" onclick="hello1()" value="Hello 1" />     <input type="button" onclick="hello2('hey hey')" value="Hello 2" />   </body> </html>

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 --> 開發人員 --> 調試 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文裡面的方式翻譯,如果有什麼不對的地方,請指正,我們的目標,“共同進步才是真的進步”。

原文地址

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.