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浅析