IE开发利器-IE10中的F12开发者工具

最新推荐文章于 2024-07-23 20:11:17 发布

wlzcool

最新推荐文章于 2024-07-23 20:11:17 发布

阅读量1.1w

点赞数

分类专栏： IE10 文章标签： IE10 ie10

本文链接：https://blog.csdn.net/wlzcool/article/details/8535491

版权

本文详细介绍了IE10中的F12开发者工具的使用方法，包括打开方式、功能菜单，如查看、图像、缓存、验证等菜单的各个选项，以及如何使用这些工具进行网页调试和性能分析。此外，还讨论了浏览器模式和文档模式的区别，以及F12工具中的HTML、CSS、探查器和网络选项卡的功能。

摘要由CSDN通过智能技术生成

在IE中开发网站一直是一个难题，因为IE中一直缺少一个如firebug那样的开发者测试工具，尽管有着IEtester这种可以查看IE各版本下网页显示情况的工具，但是却不能像firebug那样进行有效地查看代码是如何在firefox中呈现的，但是现在我们有了IEF12开发者工具。分析 HTML 代码时，通过 F12 工具看到的视图就是 Internet Explorer 10 文档对象模型 (DOM) 解释页面的实际方式，并不是原始的源代码。我们利用脚本开发网站时，就可以看到IE解释之后实际的代码了。

F12开发者工具的功能

当在IE下开发时必不可少的工具，能够快速调试 JavaScript、HTML 和CSS，还可以跟踪并查明网页或网络的性能问题。

如何打开F12开发者工具

想要用F12开发者工具，就得先知道咋打开它。在 Internet Explorer 10 中任何页面上都可以使用 F12 工具，步骤如下：按下F12 或单击右上角的工具按钮

然后选择“F12开发者工具”选项。F12 工具默认是在一个单独的窗口中打开

，但可以通过单击固定按钮

或按 Ctrl+P 将其固定到使用的页面。请注意，在“脚本”选项卡（已单击“开始调试”）上进行调试时，不能固定该窗口。

固定之后的样子。。。感觉样式还是太难看了。。。

如果不需要完整的工具界面，则可在固定工具后单击最小化按钮或按 Ctrl+M。这些工具将在窗口底部显示为一行，从而提供对“命令菜单”栏的访问，请注意是在固定工具之后，如果F12工具此时在单独的窗口，则Ctrl+M无效，再按一次Ctrl+M则工具还原为完整的工具页面。

如何使用F12工具

要想知道F12开发者工具如何使用，我们就得一步步来介绍面板上的各条菜单栏

"文件"菜单

（1）全部撤销：当你对某个网页做了大量的更改时，，却发现让页面越来越糟糕，这个时候，你可以试试全部撤销，他会重置对 Windows Internet Explorer 的当前实例的所有更改（如属性值）并刷新网页。好吧，我其实想说我总觉得这个和F5没啥区别。。。

（2）自定义 Internet Explorer 查看源文件：说白了。。。就是定义网页的源文件的打开方式。。。有三种第一种是使用IE内置的默认查看器，第二种使用记事本打开，第三种就是你可以浏览并指定计算机上安装的其他编辑器或查看器应用程序来查看源文件。

（3）联机帮助：会跳转到F12开发者工具文档页面

（4）退出：按下F12就可以退出了。。。

"查找"菜单

这个菜单里只有一项就是单击选择元素，快捷键是Ctrl+B，在视图工具栏里一直存在，就是

，当鼠标悬停在页面上方时在网页上突出显示元素。在单击某个突出显示的元素时，HTML 选项卡将打开，并在代码窗格中滚动到所选元素，并且会突出显示该元素。细节窗格（右侧窗格，本来想叫属性窗格来着，但是IE已经把其中一个叫做属性了。。。）会根据你选择的当前细节类型（样式、跟踪样式、布局或属性）显示选定元素的细节。