>

全新的F12开荒者工具,IE开辟者工具无反射的管理

- 编辑:澳门新葡亰平台游戏 -

全新的F12开荒者工具,IE开辟者工具无反射的管理

IE开发者工具教程

2015/01/13 · JavaScript · IE

原文出处: YouYaInsist的博客   

 

今天在做兼容性测试的时候,发现IE11的开发者工具无法使用。后来经过多方尝试,发现是更新补丁没有安装的缘故。
只需要安装相应的更新补丁就可以了。使用的系统版本为WIN7 64位 SP1。
https://download.microsoft.com/download/1/4/E/14E77EE0-61AE-476F-B270-1FE8D0ADA714/IE11-Windows6.1-KB3008923-x64.msu

写在前面

一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本、改变样式、查看HTML、查看资源加载等信息。

在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文(在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦)

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台如何调试JavaScript

我讨厌debug,相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的开发者工具调试是我们解决问题最快捷的方法了。微软在 Windows 8.1 预览版中带来了全新的 IE11 浏览器,不光加入了诸如 WebGL 支持等功能,还将F12开发者工具进行了重新设计,这是IE有史以来开发者工具最大的的更新。

如果出现安装补丁无法安装的问题,需要检查一下系统服务中windows update的服务是否被禁用了。

进入正题

我这篇文章可不是想介绍Chrome控制台,做前端最重要的就是要保持各个浏览器兼容,即使Chrome控制台很强大,但你能保证你的所有用户都能像你一样是Chrome的忠实粉丝吗?况且IE浏览器在中国市场上的占据份额那也是相当大的一部分的。

在此介绍一下IE开发人员工具(在没熟悉使用IE开发人员工具之前,我是打心底里特别讨厌IE的,熟悉使用之后才发现原来IE开发人员工具也是蛮可爱的)

其实从这件事情之后得到一个结论,不要议论任何人或者任何事不好,要怪只能怪你不懂。对万事万物还是怀着一颗宽容博大的心能让自己活得洒脱幸福些。(这是费话,大家跳过不看)

随着网站复杂程度的增加,原有的IE开发者工具已经渐渐不能满足开发者的需求,所以微软这次推出的IE11开发者工具更新主要是以下几点:

简单介绍

像Chrome控制台一样,要打开IE开发人员工具也是按快捷键F12即可。

可以看到,在主工作区中有六个选项卡—-HTML、CSS、控制台、Javascript(脚本)、Profiler(探查器)、网络。这就是开发工作的主要环境。

1、HTML是默认的选项卡,网页的源代码就以DOM树的形式在其中展示。点击最左边的+号,可以展开/收缩该DOM元素。

2、CSS选项卡主要是列出页面的样式,如果当前页面有多个外部样式表的话,则可以从下拉选择框中进行选择来查看相应的样式文件。

3、控制台选项卡主要是方便开发人员进行日志记录或者脚本调试等(现在IE9也支持console.log 不信你在下方的文本框里面输入试试),当然你也可以在里面输入多行脚本然后点击右侧的小绿色按钮(绿色按钮叫运行脚本)

图片 1

4、脚本选项卡就不多说了,主要是方便开发人员进行脚本调试。(在下文中将会介绍如何进行脚本调试)

5、探查器选项卡主要用来进行脚本调优和脚本统计等功能,它列出Javascript脚本中每一个函数、每一个命令运行的次数和所花费的时间,很有助于找出网页代码的性能瓶颈。

6、网络选项卡一般用来查看资源的加载信息

· 更加现代、简洁的界面更新

其它话

大家可能都知道,外部样式会被页面上写的同种样式复写而导致外部样式不生效,在FireBug里面,样式选项卡里面是不会显示出不生效的样式,这一点我认为IE是做的比较好的,它会将所有样式都显示出来但是对于失效的样式会使用删除线的形式,列出被其他CSS命令取代的样式设置,可以很方便地看出样式之间的继承关系。

另外小技巧就是颜色取色器,做前端可能大家都会时不时的想要变换样式,想要改变颜色,在IE开发人员工具里面,点击   工具–>显示颜色取色器   这样就打开了一个颜色取色工具,如下图所示,点击那个取色图标的按钮就可以进行取色了(不过你可不要想着到处取色哦,你能取色的范围只能是在当前IE浏览器里面哦   你可别想着在桌面或者其它浏览器里面进行取色哦  它还没有强大到跳出当前运行环境去……)

图片 2

· 新的UI响应、内存检测和仿真工具

修改网页中的文字

我们如果想要修改网页中的文字之前必须得选择您要修改的文字,可以使用两种方式进行选择

1、开发人员工具HTML选项卡第一个图标 也就是那个鼠标箭头按钮,当然你也可以使用它的快捷键ctrl+b

2、直接在开发人员工具HTML选项卡右侧的搜索框中输入您要选择的文字,单击探索按钮或者按回车键即可

选择好之后,这时它所在的区域会显示蓝色边框,同时在开发人员工具里面选中的部分会以高亮显示,点击之后将会变成可编辑状态,修改成您想要修改的文字,按下回车后,网页就会自动更新。

· 已有工具和功能的加强

修改元素的属性

运用上面的选中您要修改的元素,右击–>添加属性  然后输入您想增加的属性 比如说您想让其布局居中,输入align=center(注意这里面输入的是align=center而不是align=”center”这点跟Chrome控制台还是有差异的)

当然上述方法只能在你选择的元素上面生效。比如说你刚刚修改的元素是td,而你想让当前表格的所有td都运用居中布局的话,应该怎么做呢,选择好td元素后,切换到右面的属性选项卡,添加一个属性,名称为”align”,值为”center”。点击添加按钮。

图片 3

添加完成后,会有一个”将属性应用于”的提示,选择好点击确定即可。

图片 4

 

· 更加简单快速的流程

样式相关操作

如果您要修改元素相关的样式的话,可以选中元素后,在其右侧的样式面板中进行操作。(这个操作跟Chrome控制台一样的)

如果要为网页添加一个新的样式呢,

1、在CSS选项卡中,随便选择一个规则,打开右键菜单,在”之前添加规则”和”之后添加规则”中任选一个点击

2、键入样式名,比如说.price(注意这里仅仅只是输入.price  不需要再输入后面的{}),然后打开右键菜单,选择”添加属性”。

3、添加规则,比如说border:1px solid red;如果要重复添加规则的话,还是同样 右键菜单,选择”添加属性”……

现在 Windows 8.1正式版发布,修复了预览版中的错误后,新的开发者工具更加实用和高效了,下面就让我们一起来认识下这次的主要更新:

调试JavaScript

打开脚本选项卡,”启动调试“按钮旁边有一个下拉列表框,里面加载了你当前页面所需要用到的样式,在此切换到你需要调试的脚本上。

在需要调试的脚本行上设置断点(设置断点事实上就是点击一下行首),

点击”启动调试“按钮,当你点击页面上的元素触发了你设置断点的脚本时,这时会自动跳到断点处,然后,你还可以在右面”控制台”底部的输入脚本,比如说你设置脚本的函数参数中有一个参数名为color,如果你在右面”控制台”底部的输入”color=”#bee7ed””,再点击”运行脚本”,这时候函数参数color的值就为你刚刚输入的”#bee7ed”  (私下觉得这个功能真好)

 

重新构建的UI

探查器面板的使用

1、选择”探查器”选项卡,点击”开始采样”。

2、在页面上点击你想要采样的元素

3、点击”停止采样”,这时就会显示出所有的代码运行信息。一共有两种查看方式,一种是”函数”,另一种是”调用树”。

在”函数”查看方式中,可以看到所有被调用的函数信息,包括调用数量、函数执行所需时长、函数被调用的url、甚至包括具体的文件行号

在”调用树”查看方式中,可以看到函数被调用的顺序。

和现在其他浏览器的开发者工具一样,IE11之前的开发者工具采用的也是基于下拉菜单和标签页的布局,不过横向的菜单占据了宝贵了网页空间,尤其是在debug的时候,我们希望改完一个参数就可以看到整体的变化。而IE11 的开发者工具将菜单导航放到了左侧,并且采用了简洁易用的图标,对于开发者们来说花点时间认识新的图标比不停的上下拖动菜单轻松多了。

本博文的参考文献为阮大师的  IE8开发人员工具教程   ,这些天看他的博文真心受益不少,才发现人与人之前的差距不是一般的小。对自己说加油。

赞 收藏 评论

图片 5

图片 6

图片 7

 

新的菜单和 Windows 8 简洁现代的风格更加贴近。欸有多余的图标和阴影效果,新的开发者工具把更大的可用空间留给了代码,和前代相比,显而易见,界面上的变化是显而易见的。

图片 8

除了布局和图标的变化外,选中后页面高亮显示的功能让我们的查看对应元素也变得非常方便。

图片 9

对于没有的功能,这次更新都给加上了,而对于已经有的功能的改进主要是界面和流程上的简化。以网络资源检测为例,虽然说功能上没有任何硬伤,但是UI设计和现代的Windows 8 界面很不搭调。

图片 10

再看更新后的界面, 和Windows 8一样的扁平风格设计,去掉了多余的样式和设计,并且将上方的导航菜单统一起来,对于我来说,在这样的界面下就算看到花10秒才能加载完的文件也要比用之前的开发者工具来的舒服啊,当然啦,这样的文件还是不要看到的好。

界面的改变一目了然,但是有些需要更加实用的功能性改进是需要我们使用后才能发现的,而我在用了 IE11的开发者工具才几天之后就已经完全喜欢上了。尤其是希望网站可以在IE 下表现更好的时候。下面我们就看看最常用的一些功能改进。

DOM Explorer

IE10和之前的开发者工具也有DOM Explorer,但是大家都不想用它。对很多人来说缺乏实时的DOM更新是不想用它的主要原因,我们没法用它来查看CSS样式更新和附加的DOM元素。终于,在IE11的开发者工具上实时更新的功能终于加上了。

另外对于前端开发,处理 Javascript的问题是必不可少的。找到附加事件需要不少浏览器端的debug代码以及反复的尝试,最终才能确定需要的响应事件或者方法组合。下面的截图就是我在点击登录后就可以直接在DOM Explorer下的事件窗口下找到对应的jQuery函数,包括具体的路径和函数位置。对于前端开发者来说这真的是可以省下不少时间而在之前的IE浏览器中这些都是无法实现的。

图片 11

定位Javascript事件是从无到有的变化,而样式审查则是更加实用性的升级。之前IE的开发者工具在审查元素的时候它将所有的样式样式一一列出,我们想要修改一些常用样式还需要往下滚动找到它们。

而IE11的开发者工具对样式审查功能进行了一次内在的更新,它会首先显示那些更加重用的元素类型,从开发的角度来说这是非常合理和人性的改动。

图片 12

另外现在也可以直接在页面上右键审查元素了,又是一处提高实用效率的改进,提高效果的改进还不仅如此:

· 在DOM Explorer内拖拽移动元素位置

· 下方的元素面包屑导航让查找元素和代码更加便捷

· 智能感知功能,可以更快更轻松的定位样式规则

右键审查元素的加入让IE11的开发者工具和其他浏览器的开发者工具拥有一样好的第一印象,要知道之前我们想要查看某一个div或者图片的代码,我们需要先F12打开开发者工具,接着再使用选择箭头选中要看到的对象。而现在只需要在你要查看的对象上右键审查元素就可以直接打开发者工具了。

图片 13

新的面包屑导航会直观的显示出当前查看元素的位置和层级关系,我们能够轻松的点击当前元素的上级,直接修改。

图片 14

说到修改,IE11开发者工具拥有自动补全功能,在输入首字母之后就能够看到响应规则的代码,你可以使用鼠标或者上下箭头来选择,回车或者Tab来确定。更好用的是,即使你只是选择了某个规则之后,页面会立刻使用你选择的规则。所以如果你不想输入那一个个规则名来调试的话,IE11可以让你省下不少时间。

DOM Explorer 的更新,让IE11的开发者工具变得更加友好和先进。而这只是这次 IE11开发者工具更新中的一项。和前辈们的F12开发者工具相比,IE11的开发者工具翻天覆地的界面改动一下子很难说清楚,但是这些改变又都是非常自然的,所以使用的时候完全不会觉得别扭和难以适应。所以现在就升级到IE11,感受微软的诚意之作,自己亲自体会其中的点滴变化吧。

 

本文由前端php发布,转载请注明来源:全新的F12开荒者工具,IE开辟者工具无反射的管理