IE8开发者工具调试（三）javascript篇

在脚本面板可以帮助开发人员查看页面上的Javascript源。
面板如下

启动调试

单击启动调试按钮开始调试。再次单击结束调试。在开始调试后，调试控制可用而在调试结束后不可用。
鼠标单击【启动调试】，页面会弹出询问弹框，点击【确定】，页面会重新加载。

文件列表

单击，下拉菜单中查看视图中显示与当前页面相关联的外部脚本文件列表。

断点入门

添加断点

方式一 在要打断点的代码语句上鼠标右键

方式二在面板显示行数的区域单击，会在对应的行上第一个语句打上断点

查看断点是否打成功

方式一断点打成功后会在对应的行数前会有一个小红点，对应的语句背景是红色

方式二在断点的功能模块上查看所有断点列表

删除断点

方式一在打断点的语句上鼠标右键，选择删除断点

方式二在断点的查看列表，对应的断点上鼠标右键，选择删除断点

禁用断点

禁用后的断点调试时不生效，对应行数之前的红色小圆点是空心的，断点列表也会取消勾选。
方式一在启用（打完断点默认是启用状态）的断点（在红色小圆点或者红色语句上）上鼠标右键，选择禁用断点。
方式二在断点列表上取消勾选要禁用的断点

启用断点

启用后的断点调试到该断点会暂停执行，等待开发者调试，对应行数之前的红色小圆点是实心的，断点列表是勾选状态。
方式一在禁用的断点（在红色小圆点或者红色语句上）上鼠标右键，选择启用断点。
方式二在断点列表上勾选要禁用的断点

局部变量

启用后的断点调试到该断点会暂停执行，等待开发者调试。
脚本正上方的功能与谷歌浏览器对应的功能使用方法一致，本文不做赘述。

查看局部变量

当调试正在运行并且执行停在一个断点上时，开发人员可以查看当前函数范围内的局部变量。正在调试的断点，行数前面的小红点会又黄色箭头，断点语句的背景颜色为黄色。

基本类型的变量直接展示值，引用类型的变量默认是折叠起来的，显示{…}，点击签名的小+号可以查看具体的参数

修改局部变量

不仅可以看，也可以改。基本类型的值上，鼠标单击，就会成输入框的模式，这个时候就可以改值了。。

改完以后的值，字体颜色是红色

那么问题来了，我就是想要查看作用域链上的变量怎么办？请看监视小节

监视

监视变量。默认监视变量列表为空，该命令需要在调试开始并且停止在断点上时启用。

添加监视

方法一在监视面板单击”单击以添加“来添加需要监视的变量

方法二 在脚本视图右击变量或对象并选择添加监视。

修改局部变量

与局部变量的修改功能一致。不仅可以看，也可以改。基本类型的值上，鼠标单击，就会成输入框的模式，这个时候就可以改值了。改完以后的值，字体颜色是红色。

删除局部变量

在添加的局部变量上鼠标右键，选择删除即可

调用堆栈

追踪执行代码的函数调用过程。当前函数在栈顶端而调用它的函数其下。开发人员可以双击函数来查看其在源中的定义。该命令需要调试开始并且执行在断点中断。

双击要查看的函数，可以在脚本视图会打开对应的定义文件，并且定位到该函数。监视中添加的局部变量，会根据调用栈的改变而改变。

控制台

控制台接受执行的错误消息。使用控制台API，开发人员的代码可以向控制台发送消息而不需要中断执行过程。控制台命令行可以在执行代码的外部执行单个或多行脚本陈述。陈述将立即执行并且结果会在控制台面板显示。
IE8的控制台，window为当前页面的window.top，如果页面中有嵌套了iframe，是无法像谷歌浏览器一样切换调试的window对象环境。并且控制台输出引用类型，为{…}，无法查看具体的值。
断点的时候，可以访问和修改作用域内和作用域链上的变量。

断点

设置断点可以在脚本运行过程中在指定位置中断运行来检查代码。在脚本视图面板中，开发人员设置断点的方法如下：右击一行代码并选择插入断点、单击行数或在一行设置光标并按下F9。断点可以再任何时候设置。当断点设置好后，该行代码将会高亮显示并且一个红色圆形图标行数边上。
在中断面板中，开发人员可以查看一个包含所有与调试页面相关中断的列表。双击一个断点可以跳到该断点在代码中的位置。
条件：开发人员也可以设置一个带条件的断点使得当条件为真时，执行中断。设置带条件的中断可以在左边或右边的面板中右击断点的红色图标并选择条件。
全部删除：删除全部断点
全部禁用：禁用全部断点
全部启用：启用全部断点
转到源代码：可以跳到该断点在代码中的位置