[精选]IE开发者人员工具使用说明.pptx
( 4.5 )《[精选]IE开发者人员工具使用说明.pptx》由会员分享，可在线阅读，更多相关《[精选]IE开发者人员工具使用说明.pptx（59页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、开发人员工具就是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找、调试页面的BUG，包括HTML代码、CSS代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。2023/6/11IE IE开开发发者工具使用者工具使用说说明明2023/6/12如何翻开 IE开发者工具？1：在IE浏览器直接按“F12；2：在IE浏览器菜单栏“工具中选择“F12开发人员工具。IE IE开开发发者工具使用者工具使用说说明明现在我们根据菜单的顺序一一来介绍它吧。2023/6/13“文件菜单IE IE开开发发者工具使用者工具使用说说明明
2、全部撤销：撤销所有在开发人员工具中所做的操作，并且会重新刷新DOM树2023/6/14“文件菜单IE IE开开发发者工具使用者工具使用说说明明自定义IE查看源文件：选择查看源文件的方式，可以用默认，记事本，及其它的文本编辑器2023/6/15“查找菜单IE IE开开发发者工具使用者工具使用说说明明单击选择元素：选中后，用鼠标点击页面元素时，即可选中该元素，并且会列出该元素的DOM结果、CSS样式信息2023/6/16IE IE开开发发者工具使用者工具使用说说明明“HTML选项卡左边区域显示了该元素的DOM信息父级、子级、兄弟元素、CSS信息、控制台、脚本、探测器、网络“样式视图显示了该元素的样
3、式信息，标有横线的表示优先级不够高，不再起作用，样式前面的复选框，去除选中时将会删除该元素的此样式，每个样式的属性值都可以直接修改且能立即看到效果2023/6/17IE IE开开发发者工具使用者工具使用说说明明“HTML下“样式视图和“跟踪样式视图作用是一样的，只是显示方式不同2023/6/18IE IE开开发发者工具使用者工具使用说说明明“HTML下“布局视图显示选中元素盒子模型信息“盒子模型可参考 :/baike.baidu./view/2758739.htm2023/6/19IE IE开开发发者工具使用者工具使用说说明明“HTML下“属性视图显示选中元素的属性信息，并且可以增加、编辑、删
4、除操作，且能立即看到效果2023/6/110IE IE开开发发者工具使用者工具使用说说明明“CSS选项卡中列出了该页面引用的所有CSS文件，包括直接写在页面的CSS样式，选择不同的样式文件，下面会列出该CSS文件的完整样式信息2023/6/111IE IE开开发发者工具使用者工具使用说说明明“控制台选项卡中上面列出了该页面的“日志信息包括 JavaScript 错误、警告等信息2023/6/112IE IE开开发发者工具使用者工具使用说说明明“控制台选项卡下面可以输入 JavaScript 进行执行2023/6/113IE IE开开发发者工具使用者工具使用说说明明“脚本选项卡中包含控制台、监视
5、、局部变量、调用堆栈、断点等信息下面介绍如果使用 脚本调试功能2023/6/114IE IE开开发发者工具使用者工具使用说说明明设置断点：在脚本视图可以通过以下方式设置断点：1：单击行号以插入或删除断点2：右击一行代码并选择“插入断点3：将光标放在一行代码上，按下 F9 以插入或删除断点无论调试程序是否启动，都可设置断点。一旦设置断点后，断点图标 将出现在代码行号旁，该行的代码将突出显示。断点会使脚本在断点行前立即暂停执行，调试程序将突出显示要执行的下一行。调试期间，任何运行时错误都会导致调试程序在出错位置中断执行。要防止在错误时中断，请取消设置“错误时中断切换按钮或按下 CTRL+SHIFT
6、+E。当调试程序暂停执行时，浏览器将不响应任何用户输入2023/6/115IE IE开开发发者工具使用者工具使用说说明明管理断点：“断点视图提供了所有断点的列表。在此可找到所有断点的位置、及断点设置处的文件名和行号。要转到源代码中的断点位置，双击此列表中的断点。要在不删除断点的情况下停用断点，请去除断点旁边的复选框。假设要删除断点，请右击该断点，然后从快捷菜单项选择择“删除。即使您通过导航离开当前站点，IE 也会在您关闭开发人员工具之前一直保存断点信息。2023/6/116IE IE开开发发者工具使用者工具使用说说明明启动、停止调试：点击此按钮可以启动、停止调试功能。2023/6/117IE
7、IE开开发发者工具使用者工具使用说说明明功能键说明：继续：继续运行脚本而不暂停，直到遇到另一断点或脚本错误。键盘快捷方式：F5。全部中断：在下一条脚本语句执行之前立即暂停执行。单击按钮或按下 CTRL+SHIFT+B 以激活此命令，然后执行希望调试的操作。错误时中断：在出现错误的位置暂停执行。默认情况下此命令处于活动状态。如果您不希望在这些错误点处暂停执行，请单击此按钮停用此命令；然而，在所有情况下，在控制台中每出现一个错误都将显示一条错误消息。切换命令翻开/关闭状态的键盘快捷方式：CTRL+SHIFT+E。逐语句：执行下一行脚本后暂停，即使下一行位于新方法内。键盘快捷方式：F11。逐过程：继
8、续执行至当前方法中的下一行脚本后暂停。这在逐过程方法调用中极其有用。键盘快捷方式：F10。跳出：继续执行至调用当前方法的方法中的下一行脚本。这在跳出循环和方法调用时极其有用。键盘快捷方式：SHIFT+F11。2023/6/118IE IE开开发发者工具使用者工具使用说说明明监视：在“脚本调试视图可以选择任意变量、代码段右键点击“添加监视，将会在右边的“监视视图显示你添加的监视代码，当脚本运行到监视代码时，右边“监视视图会显示对应代码的详细信息，如：值，类型等。2023/6/119IE IE开开发发者工具使用者工具使用说说明明局部变量：“局部变量视图显示了当前执行范围中可用的所有变量的名称、值和
9、类型2023/6/120IE IE开开发发者工具使用者工具使用说说明明调用堆栈：“调用堆栈视图可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助2023/6/121IE IE开开发发者工具使用者工具使用说说明明“探查器并非国产浏览器中的那些探测网页媒体资源功能，而是用来分析脚本执行效率的工具2023/6/122IE IE开开发发者工具使用者工具使用说说明明“网络可以捕获页面请求及返回的数据，包括代码、图片、脚本、样式等等信息2023/6/123“禁用菜单IE IE开开发发者工具使用者工具使用说说明明脚本：选中后会禁止页面的脚本执行JavaScri
10、pt、VbScript 2023/6/124“禁用菜单IE IE开开发发者工具使用者工具使用说说明明弹出窗口阻止程序：没有使用过，据说是：用来测试哪种“怎么才能让浏览器或者平安软件不过滤掉我的弹出窗口。2023/6/125“禁用菜单IE IE开开发发者工具使用者工具使用说说明明CSS：选中后会禁止页面的 CSS 样式解析2023/6/126“查看菜单IE IE开开发发者工具使用者工具使用说说明明类和ID信息：选中后会同时显示出 Class 名称或者 ID 名称2023/6/127“查看菜单IE IE开开发发者工具使用者工具使用说说明明连接路径：选中后会显示所有超链接地址2023/6/128“查
11、看菜单IE IE开开发发者工具使用者工具使用说说明明连接报告：点击后会生成一份此页面的链接报表，包含链接数量、链接地址、是否新窗口翻开等信息，具体我也没使用过2023/6/129“查看菜单IE IE开开发发者工具使用者工具使用说说明明选项卡索引：选中后会显示所有包含 tabIndex 的元素tabindex属性的设置，可以改变网页元素获得焦点的顺序2023/6/130“查看菜单IE IE开开发发者工具使用者工具使用说说明明访问键：选中后会显示所有包含 accesskey的元素accesskey属性的设置，可以设置元素获得焦点的快捷键2023/6/131“查看菜单IE IE开开发发者工具使用者工
12、具使用说说明明2023/6/132“查看菜单IE IE开开发发者工具使用者工具使用说说明明源文件：带有样式的元素源带有样式的元素源：生成一份包含选中元素样式、HTML代码信息的源文件，必须先选中一个元素，此命令才有效，而且生成的源文件也只与选中元素有关2023/6/133“查看菜单IE IE开开发发者工具使用者工具使用说说明明源文件：DOM元素元素：生成一份只包含选中元素的DOM结构信息，必须先选中一个元素，此命令才有效，而且生成的源文件也只与选中元素有关2023/6/134“查看菜单IE IE开开发发者工具使用者工具使用说说明明源文件：DOM页页：生成一份源文件，此源文件包含整个页面的DOM
13、信息结构，除了格式貌似和源文件功能一样2023/6/135“查看菜单IE IE开开发发者工具使用者工具使用说说明明源文件：原始状态原始状态：貌似就是查看源文件功能2023/6/136“图像菜单IE IE开开发发者工具使用者工具使用说说明明禁用图像：选中后会禁用所有的图片元素，包括背景图像2023/6/137“图像菜单IE IE开开发发者工具使用者工具使用说说明明显示图片尺寸：选中后会显示所有图片的大小，不包含背景图像，单位是像素2023/6/138“图像菜单IE IE开开发发者工具使用者工具使用说说明明显示图像文件大小：选中后会显示所有的图片的大小，单位字节，不包含背景图像2023/6/139
14、“图像菜单IE IE开开发发者工具使用者工具使用说说明明显示图像路径：选中后会显示所有的图片的路径，不包含背景图像2023/6/140“图像菜单IE IE开开发发者工具使用者工具使用说说明明显示图像Alt文本：选中后会显示所有的图片的Alt文本2023/6/141“图像菜单IE IE开开发发者工具使用者工具使用说说明明显示图像报告：点击后会生成一份此页面的图像报表，包含图片连接、尺寸大小、文件大小等信息，具体我也没使用过2023/6/142“缓存菜单IE IE开开发发者工具使用者工具使用说说明明2023/6/143IE IE开开发发者工具使用者工具使用说说明明菜菜单项描述描述始终从效劳器中刷新
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 精选 IE 开发者 人员 工具 使用说明
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内