如何知道瀏覽器當前執行的JS代碼的位置？

01-14

什麼都不用下載，自帶的IE就可以了

以火狐瀏覽器為例，只用firebug插件，就能查看當前頁面中所有js執行情況。

以當前頁面為例：如何知道瀏覽器當前執行的JS代碼的位置？

1、點擊蟲子的圖標（前提是你已安裝該插件，插件在火狐應用商店裡面，第一個就是它），點擊之後就會出來一個單獨的控制台。

如下圖：

2、選擇js列表，該列表是當前頁面所有引入的js。選擇需要斷點的js。（如果不知道具體是運行哪個js，那就只能去分析頁面。）

3、選擇js後，如果代碼太亂，點擊「{}」按鈕，就能讓代碼格式化。

如下圖，格式化後代碼是不是看起來整齊多了。

4、單擊左邊的空白處，設置斷點。然後刷新網頁，控制台自動運行至斷點處。1為你設置的斷點處，2為當前js代碼運行所在行數。3為步進（快捷方式為F11，意思是你按一下F11，js代碼就會往下執行一行，三角按鈕是運行完所有的js代碼）

5、滑鼠放在所執行的js代碼處，就能查看獲取的屬性值。例如步進至"f = window"代碼出，滑鼠放在「window「處，就會提示"window"獲取的值為」21073282「，如下圖：

以上就是簡單的介紹。firebug插件很強大，這只是簡單的js調試功能。其他的瀏覽器大同小異，只是展現方式不同罷了。

chrome 中可以方便設置斷點,監聽器, 但實際上不如用console.log或alert好用

chrome F12 打開調試界面後, 點擊 Sources 頁面. 右邊就可以設置斷點,單步調試. 例如可以選擇右邊Event Listener Breakpoints 選項,選中 mouse 裡面的 click 或其他事件. 這樣你點擊頁面上的按鈕就會觸發斷點,js會停在你點擊的事件位置上.

chrome ctrl+shift+j, add breakpoint