彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > IE11 全新的F12开发者工具

IE11 全新的F12开发者工具

发布时间:2019-10-29 20:01编辑:新闻动态浏览(119)

    IE开发者工具教程

    2015/01/13 · JavaScript · IE

    原文出处: YouYaInsist的博客   

     

    写在前面

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

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

    Chrome 控制台不完全指南

    Chrome 控制台console的用法

    Chrome控制台如何调试JavaScript

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

    进入正题

    我这篇文章可不是想介绍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 全新的F12开发者工具

    关键词:

上一篇:彩世界平台WebSocket教程

下一篇:没有了