IE开发者人员工具使用说明

2020/8/1
18
IE开发者工具使用说明
局部变量：
“局部变量”视图显示了当前执行范围中可用的所有变量的名称、值和类型
2020/8/1
19
IE开发者工具使用说明
调用堆栈：
“调用堆栈”视图可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行 顺序和嵌套很有帮助
2020/8/1
2020/8/1
8
IE开发者工具使用说明
“HTML”下“属性”视图显示选中元素的属性信息，并且可以增加、编辑、删除操作，且能立即看到效果
2020/8/1
9
IE开发者工具使用说明
“CSS”选项卡中列出了该页面引用的所有CSS文件，包括直接写在页面的CSS样式，选择不同的样式文件， 下面会列出该CSS文件的完整样式信息
2020/8/1HTML”下“样式”视图和“跟踪样式”视图作用是一样的，只是显示方式不同
2020/8/1
7
IE开发者工具使用说明
“HTML”下“布局”视图显示选中元素盒子模型信息 “盒子模型”可参考 /view/2758739.htm
逐过程：继续执行至当前方法中的下一行脚本后暂停。 这在逐过程方法调用中极其有用。 键盘快捷方式： F10。
跳出：继续执行至调用当前方法的方法中的下一行脚本。 这在跳出循环和方法调用时极其有用。 键盘快捷方 式： SHIFT+F11。
2020/8/1
17
IE开发者工具使用说明
监视：
在“脚本调试”视图可以选择任意变量、代码段右键点击“添加监视”，将会在右边的“监视”视图显示你添 加的监视代码，当脚本运行到监视代码时，右边“监视”视图会显示对应代码的详细信息，如：值，类型等。
20
IE开发者工具使用说明
“探查器”并非国产浏览器中的那些探测网页媒体资源功能，而是用来分析脚本执行效率的工具
2020/8/1
21
IE开发者工具使用说明
“网络”可以捕获页面请求及返回的数据，包括代码、图片、脚本、样式等等信息
2020/8/1
22
IE开发者工具使用说明
“禁用”菜单
脚本：
选中后会禁止页面的脚本执行（JavaScript、VbScript …）
IE开发者人员工具使用说明
IE开发者工具使用说明
如何打开 IE开发者工具？
1：在IE浏览器直接按 “F12”； 2：在IE浏览器菜单栏“工具”中选择“F12开发人员工具”。 现在我们根据菜单的顺序一一来介绍它吧。
2020/8/1
2
IE开发者工具使用说明
“文件”菜单
全部撤销：
撤销所有在开发人员工具中所做的操作，并且会重新刷新DOM树
5
IE开发者工具使用说明
“HTML”选项卡左边区域显示了该元素的DOM信息（父级、子级、兄弟元素）、CSS信息、控制台、脚本、 探测器、网络
“样式”视图显示了该元素的样式信息，标有横线的表示优先级不够高，不再起作用，样式前面的复选框， 去除选中时将会删除该元素的此样式，每个样式的属性值都可以直接修改且能立即看到效果
错误时中断：在出现错误的位置暂停执行。 默认情况下此命令处于活动状态。 如果您不希望在这些错误点处 暂停执行，请单击此按钮停用此命令；然而，在所有情况下，在控制台中每出现一个错误都将显示一条错误消 息。 切换命令打开/关闭状态的键盘快捷方式： CTRL+SHIFT+E。
逐语句：执行下一行脚本后暂停，即使下一行位于新方法内。 键盘快捷方式： F11。
2020/8/1
10
IE开发者工具使用说明
“控制台”选项卡中上面列出了该页面的“日志信息”包括 JavaScript 错误、警告等信息
2020/8/1
11
IE开发者工具使用说明
“控制台”选项卡下面可以输入 JavaScript 进行执行
2020/8/1
12
IE开发者工具使用说明
“脚本”选项卡中包含控制台、监视、局部变量、调用堆栈、断点等信息 下面介绍如果使用 脚本调试功能
2020/8/1
3
IE开发者工具使用说明
“文件”菜单
自定义IE查看源文件：
选择查看源文件的方式，可以用默认，记事本，及其它的文本编辑器
2020/8/1
4
IE开发者工具使用说明
“查找”菜单
单击选择元素：
选中后，用鼠标点击页面元素时，即可选中该元素，并且会列出该元素的DOM结果、CSS样式信息
2020/8/1
2020/8/1
15
IE开发者工具使用说明
启动、停止调试：
点击此按钮可以启动、停止调试功能。
2020/8/1
16
IE开发者工具使用说明
功能键说明：
继续：继续运行脚本而不暂停，直到遇到另一断点或脚本错误。 键盘快捷方式： F5。
全部中断：在下一条脚本语句执行之前立即暂停执行。 单击按钮或按下 CTRL+SHIFT+B 以激活此命令，然后执 行希望调试的操作。
2020/8/1
23
IE开发者工具使用说明
“禁用”菜单
弹出窗口阻止程序：
没有使用过，据说是：用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。”
2020/8/1
24
2020/8/1
14
IE开发者工具使用说明
管理断点：
“断点”视图提供了所有断点的列表。 在此可找到所有断点的位置、及断点设置处的文件名 和行号。 要转到源代码中的断点位置，双击此列表中的断点。 要在不删除断点的情况下停用 断点，请清除断点旁边的复选框。 若要删除断点，请右击该断点，然后从快捷菜单选择“删 除”。 即使您通过导航离开当前站点，IE 也会在您关闭开发人员工具之前一直保留断点信息。
2020/8/1
13
IE开发者工具使用说明
设置断点：
在脚本视图可以通过以下方式设置断点： 1：单击行号以插入或删除断点 2：右击一行代码并选择“插入断点” 3：将光标放在一行代码上，按下 F9 以插入或删除断点
无论调试程序是否启动，都可设置断点。 一旦设置断点后，断点图标 将出现在代码行号旁， 该行的代码将突出显示。 断点会使脚本在断点行前立即暂停执行，调试程序将突出显示要执 行的下一行。 调试期间，任何运行时错误都会导致调试程序在出错位置中断执行。 要防止在 错误时中断，请取消设置“错误时中断”切换按钮或按下 CTRL+SHIFT+E。 当调试程序暂停执 行时，浏览器将不响应任何用户输入