在前面的兩篇文章中我們講了如何在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

from:?http://www.qeefee.com/js/debug-javascript-in-chrome

總結

以上是生活随笔為你收集整理的在Chrome 中调试Javascript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。