IE开发者工具教程

2015/01/13 · JavaScript
· IE

原稿出处:
YouYaInsist的博客   

 

明天在做包容性测试的时候,发现IE11的开发者工具不可以利用。后来透过多方面尝试,发现是革新补丁没有设置的案由。
只需求设置相应的换代补丁就足以了。使用的系统版本为WIN7 6四个人 SP1。
https://download.microsoft.com/download/1/4/E/14E77EE0-61AE-476F-B270-1FE8D0ADA714/IE11-Windows6.1-KB3008923-x64.msu

Firefox: Firebug

  • https://getfirebug.com/wiki/index.php/Command\_Line\_API
  • https://getfirebug.com/wiki/index.php/Keyboard\_and\_Mouse\_Shortcuts
  • https://getfirebug.com/wiki/index.php/Firebug\_Extensions
  • https://getfirebug.com/wiki/index.php/Firebug\_Links
  • https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/
  • http://www.softwareishard.com/blog/firebug-tips/

写在头里

直接分外谷歌(谷歌(Google))的控制台,因为自个儿是做前端的,谷歌(Google)浏览器在小编看来是解析JS最快的浏览器,所谓的熟能生巧,用纯熟了Google浏览器之后就特意喜爱用谷歌(谷歌(Google))的控制台调试脚本、改变样式、查看HTML、查看财富加载等消息。

在那时推荐两篇关于谷歌控制台怎么利用的三篇博文(在作者看来那三篇博文是自家看过介绍谷歌控制台最佳最全的利用手册啦)

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台怎样调试JavaScript

自己讨厌debug,相信也没多少开发者会喜欢。可是当代码出错之后自然是要找出难题出在何地的。不过网页开发的时候遭受BUG
是一件再不荒谬不过的工作了,大家不能确保本身的代码万无一失,于是采取浏览器的开发者工具调试是大家消除难点最便捷的艺术了。微软在
Windows 8.1 预览版中推动了崭新的 IE11 浏览器,不光参加了例如 WebGL
帮助等功能,还将F12开发者工具举行了再也设计,那是IE有史以来开发者工具最大的的立异。

设若出现安装补丁不能安装的题材,要求检查一下系统服务中windows
update的服务是不是被剥夺了。

Chrome: Developer Tools

  • https://developers.google.com/chrome-developer-tools/?hl=zh-CN

  • https://developers.google.com/chrome-developer-tools/docs/commandline-api?hl=zh-CN

  • https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks

  • Analyze and optimize your website with PageSpeed tools to implement
    the web performance best
    practices

进去正题

自家那篇作品可不是想介绍Chrome控制台,做前端最要紧的就是要维持各类浏览器兼容,尽管Chrome控制台很有力,但您能担保你的拥有用户都能像你同样是Chrome的忠贞观者吧?况且IE浏览器在中华市面上的挤占份额那也是一点都不小的一局部的。

在此介绍一下IE开发人士工具(在没纯熟使用IE开发人士工具在此之前,笔者是打心里Ritter别讨厌IE的,熟练使用之后才意识原先IE开发人员工具也是蛮可爱的)

实质上从那件工作随后拿到二个结论,不要谈论任哪个人恐怕其余事不好,要怪只好怪你不懂。对万事万物仍旧怀着一颗宽容博大的心能让本人活得潇洒幸福些。(那是费话,大家跳过不看)

IE浏览器开发者工具的使用,IE开发者工具教程。乘胜网站复杂程度的增多,原有的IE开发者工具已经日渐无法满意开发者的需要,所以微软这一次推出的IE11开发者工具更新首假使以下几点:

IE: F12 Developer Tools

  • F12 Developer
    Tools.aspx)
  • Developer Tools User Interface
    Reference.aspx)
  • Navigating the F12 Developer Tools
    Interface.aspx)
  • 摸底 Internet Explorer
    开发人员工具.aspx)

概括介绍

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

能够看来,在主工作区中有三个挑选卡—-HTML、CSS、控制台、Javascript(脚本)、Profiler(探查器)、互联网。这就是付出工作的重点条件。

① 、HTML是专断认同的选项卡,网页的源代码就以DOM树的款型在里面呈现。点击最左边的+号,可以展开/减少该DOM成分。

贰 、CSS选项卡重假诺列出页面的样式,如果当前页面有七个外表样式表的话,则可以从下拉拔取框中举行抉择来查阅相应的样式文件。

叁 、控制台选项卡首若是造福开发人士举行日志记录或许脚本调试等(以往IE9也支撑console.log
不信你在人间的文本框里面输入试试),当然你也得以在里头输入多行脚本然后点击左侧的小浅海洋蓝按钮(栗色按钮叫运营脚本)

图片 1

肆 、脚本选项卡就不多说了,重假若有益开发人士举办脚本调试。(在下文中将会介绍怎样进展脚本调试)

五 、探查器选项卡首要用以进行脚本调优和本子总计等职能,它列出Javascript脚本中每多少个函数、每二个指令运转的次数和所消费的光阴,很有助于找出网页代码的品质瓶颈。

⑥ 、互连网选项卡一般用来查看能源的加载音讯

· 尤其现代、简洁的界面更新

What’s New in Windows Internet Explorer

  • IE9.aspx)
  • IE10.aspx)
  • IE11.aspx)

其它话

我们或许都清楚,外部体制会被页面上写的同种样式复写而招致表面体制不见效,在FireBug里面,样式选项卡里面是不会浮现出不奏效的体裁,那点本人认为IE是做的可比好的,它会将拥有样式都来得出来不过对于失效的样式会动用删除线的款式,列出被其余CSS命令取代的体制设置,能够很方便地来看样式之间的接轨关系。

除此以外小技巧就是颜色取色器,做前端大概我们都会时常的想要变换样式,想要改变颜色,在IE开发人员工具里面,点击
  工具–>突显颜色取色器  
那样就打开了2个颜色取色工具,如下图所示,点击这一个取色图标的按钮就足以开展取色了(不过你可不用想着随处取色哦,你能取色的范围只可以是在如今IE浏览器里面哦
  你可别想着在桌面或许其余浏览器里面举办取色哦
 它还从未有力到跳出当前运作环境去……)

图片 2

· 新的UI响应、内存检测和虚假工具

Compatibility

  • About conditional
    comments.aspx)
  • 在 Apache 上实现 META
    切换
  • 在 IIS 上实现 META
    切换
  • Understanding user-agent
    strings.aspx)
  • Windows Internet Explorer
    会将何以内容告知为用户代理字符串?

修改网页中的文字

我们只要想要修改网页中的文字在此以前务必得拔取你要修改的文字,可以拔取三种方式展开分选

壹 、开发人士工具HTML选项卡第三个图标
也等于不行鼠标箭头按钮,当然你也足以应用它的疾速键ctrl+b

2、直接在开发人士工具HTML选项卡右边的寻找框中输入您要挑选的文字,单击探索按钮只怕按回车键即可

分选好之后,那时它所在的区域会突显石绿边框,同时在开发人士工具里面选中的部分会以高亮突显,点击之后将会成为可编制状态,修改成您想要修改的文字,按下回车后,网页就会自动更新。

· 已有工具和功效的拉长

modern.IE

  • 一组有助于支持差别版本 Internet Explorer
    的新工具
  • 下载虚拟机
  • 营造现代站点且同时资助旧版 IE 的 十几个提示

(原文刊载于:http://www.wangdandong.com/2014/03/24/browser-developer-tools.html

修改成分的性质

拔取地点的选中你要修改的要素,右击–>添加属性  然后输入您想伸张的习性
比如说您想让其布局居中,输入align=center(注意那中间输入的是align=center而不是align=”center”这一点跟Chrome控制台依然有距离的)

本来上述措施只可以在您选拔的因素上边生效。比如说你刚好修改的元素是td,而你想让眼下表格的具备td都应用居中布局的话,应该咋做吗,拔取好td成分后,切换来右手的习性选项卡,添加二个属性,名称为”align”,值为”center”。点击添加按钮。

图片 3

加上落成后,会有三个”将质量应用于”的升迁,选取好点击分明即可。

图片 4

 

· 尤其简明神速的流程

体制相关操作

比方你要修改成分相关的样式的话,可以选中成分后,在其右手的体制面板中举办操作。(这么些操作跟Chrome控制台一样的)

假若要为网页添加一个新的样式呢,

① 、在CSS选项卡中,随便采纳七个条条框框,打开右键菜单,在”之前增加规则”和”之后添加规则”中任选2个点击

贰 、键入样式名,比如说.price(注意那里仅仅只是输入.price
 不必要再输入前面的{}),然后打开右键菜单,拔取”添加属性”。

③ 、添加规则,比如说border:1px solid
red;若是要再一次添加规则的话,依然一样 右键菜单,选拔”添加属性”……

当今 Windows
8.1正式版公布,修复了预览版中的错误后,新的开发者工具越来越实用和飞速了,上边就让我们一齐来认识下这一次的根本更新:

调试JavaScript

开辟脚本选项卡,”运转调试“按钮旁边有一个下拉列表框,里面加载了你日前页面所急需运用的体裁,在此切换来你须要调剂的台本上。

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

点击”运行调试“按钮,当您点击页面上的因素触发了你设置断点的剧本时,那时会自行跳到断点处,然后,你还能在左侧”控制台”底部的输入脚本,比如说你设置脚本的函数参数中有二个参数名为color,如若您在右侧”控制台”底部的输入”color=”#bee7ed””,再点击”运营脚本”,那时候函数参数color的值就为您碰巧输入的”#bee7ed”
 (私自觉得这一个作用真好)

 

再度打造的UI

探查器面板的应用

壹 、选用”探查器”选项卡,点击”开首采样”。

二 、在页面上点击你想要采样的成分

叁 、点击”甘休采样”,那时就会来得出富有的代码运维音信。一共有二种查看情势,一种是”函数”,另一种是”调用树”。

在”函数”查看形式中,能够看来有着被调用的函数音信,包括调用数量、函数执行所需时长、函数被调用的url、甚至席卷具体的文件行号

在”调用树”查看方式中,可以看来函数被调用的逐条。

和当今别的浏览器的开发者工具一样,IE11事先的开发者工具接纳的也是根据下拉菜单和标签页的布局,不过横向的食谱占据了不菲了网页空间,尤其是在debug的时候,大家目的在于改完多个参数就可以见到完好的变化。而IE11
的开发者工具将菜单导航放到了左手,并且选拔了简要易用的图标,对于开发者们的话花点时间认识新的图标比不停的光景拖动菜单轻松多了。

网站地图xml地图