在Chrome 中除錯Javascript
阿新 • • 發佈:2019-01-26
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瀏覽器,請檢視我們之前的兩篇文章:
from: http://www.qeefee.com/js/debug-javascript-in-chrome