在Chrome 中调试Javascript
在前面的兩篇文章中我們講了如何在IE中調試Javascript和在Visual Studio中調試Javascript,在本篇內容中,我們講一下如何在谷歌 Chrome中調試Javascript。
Chrome 是Google 提供的一款非常優秀的瀏覽器,內置了開發者工具,可以方便我們對JS代碼進行調試。有了使用IE來調試Javascript的經驗,在使用Chrome進行調試的時候會變得很方便。
使用Chrome打開我們要調試的頁面,然后使用快捷鍵F12打開開發者工具,當然,你也可以在工具菜單中找到。Chrome開發者工具如圖:
Elements選項卡是對界面上的元素進行選擇的,我們要進行調試的代碼在Sources 選項卡中。
打開Sources選項卡,點擊左側的小箭頭打開所有資源,選擇我們的頁面:
我們要調試這個頁面的代碼,所以就打開這個頁面,然后點擊行號可以添加斷點:
點擊界面中的按鈕,我們能夠捕獲到剛添加的斷點:
添加監視的方法和在IE中的方法是一樣的:選中變量,在變量上面單擊,選擇“Add to watch”,如下圖:
右側的監視窗口中已經添加了對變量 a 的監視:
執行完成這句話以后,a的值將會發生變化:
Google Chrome 調試Javascript的快捷鍵:
F10:逐過程,即跳過該語句中的方法、表達式等
F11:逐語句調試,即單步調試,會跳入方法、表達式,進行逐語句的跟蹤調試
除了沒有F9之外,這兩個功能鍵的操作都是一樣的。
如果要在Google Chrome中臨時執行代碼,需要在打開代碼的控制臺,在里面編輯和執行臨時代碼:
我們輸入alert(a),然后回車,界面上就會彈出一個提示框,如下圖:
如果要停止調試,直接將開發者工具關閉即可。
本篇內容主要介紹了如何在Chrome中調試Javascript代碼,如果你使用IE瀏覽器,請查看我們之前的兩篇文章:
- 在IE中調試Javascript
- 在Visual Studio中調試Javascript
- 在Google Chrome中調試Javascript
總結
以上是生活随笔為你收集整理的在Chrome 中调试Javascript的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Chrome 中的 JavaScript
- 下一篇: Java中String类的方法及说明