ie11 debug javascript

作为前端开发人员，调试JavaScript是日常工作中不可或缺的环节。Internet Explorer 11（以下简称IE11）作为市场份额仍然不可小视的浏览器，其调试器也应当掌握。在本文中，我们将从开启调试器入手，介绍IE11的调试器使用方法，包括断点调试、监视变量、调用堆栈等。

首先，我们需要在IE11浏览器中开启调试模式。在“工具”菜单中选中“开发人员工具”或按下F12键即可进入调试器模式。IE11的调试器较为简洁，主要功能都在悬浮栏中，包括“调试器选项”、“断点”、“监视”、“调用堆栈”等，下面我们就逐一介绍。

断点调试是调试器的核心功能之一，下面我们通过一个简单的例子来说明如何使用。假设我们有如下的HTML代码：

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>IE11 Debugging</title>
</head>
<body>
<h1>Debugging</h1>
<script>
    function hello(){
        var name = "World";
        alert("Hello " + name);
    }

    hello();
</script>
</body>
</html>

我们想要在hello函数执行时设置一个断点，可以在调试器的悬浮栏中的“断点”选项中选择“函数断点”，然后在弹出的对话框中输入要设置断点的函数名（这里是hello）。现在刷新页面，触发hello函数，在运行到该函数时代码会自动停止，此时可以查看当前作用域内的变量、调用堆栈等信息。若想要继续执行代码，单击悬浮栏上的“继续执行”按钮即可。

除了断点调试，我们还可以在IE11调试器中监视变量的值，方便程序调试。例如，在hello函数内添加一个变量age，并在函数结束后弹出该变量的值：

function hello(){
    var name = "World";
    var age = 18;
    alert("Hello " + name + " Age: " + age);
}

为了监视age的值，我们可以在调试器的悬浮栏中的“监视”选项中添加一个表达式age，此时执行到alert语句时，age变量的值会在调试器中显示。

调用堆栈是一个较为高级的调试技巧，其可以帮助我们在程序出错时追踪函数调用栈和参数，找到错误位置。下面我们看一下如何查看调用堆栈。依旧是通过hello函数为例，我们在函数内再次添加一个调用另一个函数goodbye，生成如下代码：

function goodbye(){
    var msg = "Goodbye";
    alert(msg);
}

function hello(){
    var name = "World";
    var age = 18;
    alert("Hello " + name + " Age: " + age);
    goodbye();
}

hello();

现在在调用goodbye函数的地方设置一个断点，运行程序，在程序执行到这个断点时可以点击悬浮栏上的“调用堆栈”按钮，查看当前执行的函数调用栈，以及每个函数的参数和返回值。这个功能十分强大，能够帮助我们更好地理解整个程序的执行过程。

总体来说，IE11的调试器功能简洁实用，我们需要掌握其基本功能，配合实际开发工作，提高自己的调试能力。以上仅是介绍了几个较为基础的调试技巧，对于高级用法的讲解可以参考IE11官方文档。

相关推荐