ie开发者工具

今天把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模拟(官方文档)。

参考资料:

  1. http://blog.csdn.net/binyao02123202/article/details/41944931#t65
  2. https://msdn.microsoft.com/zh-cn/library/dn255008%28v=vs.85%29.aspx
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值