IE、Chrome、Firefox使用debugger淺析

IE debugger

  我總是覺得，有那么多好用的插件呀、軟件呀應該嘗試著去使用，而不是固步自封。我遇到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、Chrome、Firefox使用debugger淺析

成都創新互聯專注于企業營銷型網站、網站重做改版、沙市網站定制設計、自適應品牌網站建設、HTML5建站、商城建設、集團公司官網建設、外貿營銷網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為沙市等各大城市提供網站開發制作服務。

開啟之后，當IE 碰到 JavaScript 語法及運行時錯誤，IE 會自動彈出一個"實時調試"窗口（被動的）。
我們可以在所要調試的某條語句或者函數中，加入 debugger 語句，這樣當 IE 執行到這個 debugger; 語句時，就會彈出實時調試窗口，讓我們進行調試（主動的）。
例如：我們簡單寫點代碼

<!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。如圖
IE、Chrome、Firefox使用debugger淺析