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

开启之后,当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浅析

Chrome debugger


此调试方法,与IE差不多。不在赘述。如图:
IE、Chrome、Firefox使用debugger浅析

Firefox debugger


竟然也和IE类似的操作方法,会了IE基本上也就会其他俩个方式了。可能不同的浏览器,呈现的调试内容不尽相同,我又何必一次探究完毕。如图:

IE、Chrome、Firefox使用debugger浅析

各个浏览器,具体的调试方法,在使用的过程中,逐步了解吧。

猜你喜欢

转载自blog.51cto.com/13479739/2153369