IEChromeFirefox使用debugger浅析

Posted 2020-12-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IEChromeFirefox使用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 碰到 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。如图
技术分享图片