IE、Chrome、Firefox使用debugger淺析
阿新 • • 發佈：2018-08-02
插件 dom ctype ava bar debugger 可能 debug 其他 IE debugger
IE Developer Toolbar ，是 IE 上的一個插件，用來探究和理解 Web 頁面的便捷工具，最主要的功能包括： 查看並修改頁面的 DOM 對象；查看選中元素或者標簽的各種屬性，包括 HTML 和 CSS 屬性以及 JavaScript 事件等。
二、在 IE 中啟用腳本調試功能
低版本的IE，需要在 IE 菜單的工具菜單中，取消選中"禁用腳本調試 (Internet Explorer)"和 "禁用腳本調試 ( 其他 )"。如圖：
例如：我們簡單寫點代碼
我總是覺得，有那麽多好用的插件呀、軟件呀應該嘗試著去使用，而不是固步自封。我遇到js問題都是用 alert 語句來進行調試，今天呢，想著一起來學習一下3大主流瀏覽器的debugger，以後嘗試使用改變一下。一、IE上的調試工具
IE 上可選擇的 JavaScript 調試工具不多，主要是 Microsoft 腳本編輯器 (Microsoft Script Editor) 以及 IE Developer Toolbar。
Microsoft 腳本編輯器
Microsoft 腳本編輯器是 Microsoft Office 中的一個小組件，這裏我就不做深入研究了。
IE Developer Toolbar
IE Developer Toolbar ，是 IE 上的一個插件，用來探究和理解 Web 頁面的便捷工具，最主要的功能包括： 查看並修改頁面的 DOM 對象；查看選中元素或者標簽的各種屬性，包括 HTML 和 CSS 屬性以及 JavaScript 事件等。
二、在 IE 中啟用腳本調試功能
低版本的IE，需要在 IE 菜單的工具菜單中，取消選中"禁用腳本調試 (Internet Explorer)"和 "禁用腳本調試 ( 其他 )"。如圖：
開啟之後，當IE 碰到 JavaScript 語法及運行時錯誤，IE 會自動彈出一個"實時調試"窗口（被動的）。
例如：我們簡單寫點代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Debugger Learn</title> </head> <body> <a onclick="ie_debugger()">IE debugger</a> </body> <script type="text/javascript"> function ie_debugger(){ var num = 1; var totalNum = 0; debugger; num += num; total = do_something(num); alert(total) } function do_something(num){ var total = parseInt(num)*36; return total; } </script> </html>
在IE 瀏覽器中，先按F12打開調試工具，然後點擊觸發function，自動進入debugger。如圖
Chrome debugger
此調試方法，與IE差不多。不在贅述。如圖：
Firefox debugger
竟然也和IE類似的操作方法，會了IE基本上也就會其他倆個方式了。可能不同的瀏覽器，呈現的調試內容不盡相同，我又何必一次探究完畢。如圖：
各個瀏覽器，具體的調試方法，在使用的過程中，逐步了解吧。
IE、Chrome、Firefox使用debugger淺析