admin管理员组文章数量:1644437
今天把ie浏览器从9升级到了11,却发现f12后开发者工具出错不能使用
在网上查找了下原因,需要下载一个补丁IE11-Windows6.1-KB3008923-x64.msu(我的是64位)
问题解决,熟悉下ie11的开发者工具带来的全新体验
1、DOM资源管理器
“DOM 资源管理器”工具将向你显示网页的集成结构,并允许你无需编辑页面的源文件,即可更改样式、移动 HTML 元素,以及更改元素属性。
左上角的两个小图标是选中元素、突出选中元素,用来快速获取到元素代码,选中元素被标示出来
选中元素后我们可以在底部的导航中看到选中元素的上级目录,可以清楚的了解到元素的层级,当鼠标放在导航上时显示出相应的element、class以及id。当我们拖拽选中元素时,可以将其放置到其他位置重新排列
DOM管理器右侧显示的是选中元素的样式、布局、事件等。我们单击某个空白处时可以添加或修改样式
和其他浏览器不同的是IE11提高了跟踪样式,而且按照对应CSS属性的常用程度排序,不管是怎么复杂的对象,在跟踪样式这一栏下都可以找到规律的排序,修改起来得心应手。(官方文档)
2、控制台
“控制台”工具主要用来查看错误、警告和其他信息、发送调试输出、检查JavaScript对象和 XML 节点,以及在所选窗口或框架的上下文中运行 JavaScript。
“控制台”工具新增加了计时器(console.time())、计数器(console.count())、跟踪和分析(console.trace())等新的控制台调试API方法(控制台官方文档)
3、调试程序
“调试程序”工具检查代码的作用、代码执行时间及其执行方式,在执行过程中暂停代码,逐行操作代码,然后查看每个步骤中变量和对象的状态。
在“调试程序”中可以修改代码、控制会话流
设置和管理断点
检查对象和变量
管理多个脚本的选项卡式文档界面
调试和 In Private 浏览、能谱使压缩或精简的代码更易于读取(官方文档)
4、网络
“网络”工具呈现加载和网页操作的任何网络请求的详细信息(url、协议、请求时间等),查看浏览器和服务器之间的通信、检查请求和回复标头、查看响应代码,以及调试 AJAX(官方文档)。
5、UI响应
“UI 响应能力”工具用来分析网页帧率和不同类型的 CPU 使用率,以帮助分析 UI 性能问题。主要呈现内容为:页面用来呈现对 DOM 做出的更改的时间(“绘制时间”)、每秒呈现的帧数(“帧率”)、使用了多少内存(“内存”),以及它向处理器提出多少需求(“CPU”)。
这个功能是ie11新增加的功能,在这里能够更加清晰的了解导致UI缓慢的原因、洞察网页的帧率,寻求网页加速的解决方案(官方文档)。
6、探查器
“探查器”工具主要是用来获取网页中JavaScript的详细性能度量,显示网页在分析会话期间运行的 JavaScript 函数,它包括关于它们的运行次数、每个函数运行的时长、父函数与子函数之间的关系等方面的详细信息(官方文档)。
7、内存
“内存”工具在 Internet Explorer 11 中是 F12 开发人员工具的新增工具。
“内存”工具用来诊断可影响网页速度和稳定性的内存问题。
如果你的网页在开始加载时运行良好,但逐渐变缓并有时出现崩溃,则页面的内存使用可能出现问题,在这里可以查看网页使用了多少内存(官方文档)。
8、仿真
”仿真“工具用来测试网页与其他不同文档模式、用户代理、屏幕大小和分辨率以及 GPS 位置坐标兼容的方式,这是ie11新增加的工具,在这里可以模拟不同版本的ie、屏幕大小、分辨率以及GPS模拟(官方文档)。
参考资料:
- http://blog.csdn/binyao02123202/article/details/41944931#t65
- https://msdn.microsoft/zh-cn/library/dn255008%28v=vs.85%29.aspx
版权声明:本文标题:ie开发者工具 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729384036a1199304.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论