全新的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

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/

写在后面

平素非常谷歌的控制台,因为我是做前端的,谷歌(谷歌)浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用谙习了谷歌(谷歌)浏览器之后就更加欣赏用谷歌(Google)的控制台调试脚本、改变样式、查看HTML、查看资源加载等讯息。

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

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台如何调试JavaScript

全新的F12开发者工具,IE浏览器开发者工具的使用。本身讨厌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开发人士工具以前,我是打心底里越发讨厌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(探查器)、互联网。这就是开发工作的机要条件。

1、HTML是默许的选项卡,网页的源代码就以DOM树的样式在里面突显。点击最右侧的+号,可以开展/缩短该DOM元素。

2、CSS选项卡首如果列出页面的体制,假若当前页面有多少个外表样式表的话,则足以从下拉选拔框中开展抉择来查六柱预测应的样式文件。

3、控制台选项卡首如若方便开发人士举办日志记录或者脚本调试等(现在IE9也支撑console.log
不信你在下方的文本框里面输入试试),当然你也足以在里边输入多行脚本然后点击左侧的小粉色按钮(黄色按钮叫运行脚本)

图片 1

4、脚本选项卡就不多说了,重假诺福利开发人员举行脚本调试。(在下文少校会介绍怎么着举行脚本调试)

5、探查器选项卡主要用以举行脚本调优和本子总括等效果,它列出Javascript脚本中每一个函数、每一个命令运行的次数和所成本的时日,很有助于找出网页代码的特性瓶颈。

6、互联网选项卡一般用来查看资源的加载音讯

· 越发现代、简洁的界面更新

What’s New in Windows Internet Explorer

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

其它话

大家莫不都知晓,外部体制会被页面上写的同种样式复写而致使表面体制不奏效,在FireBug里面,样式选项卡里面是不会浮现出不见效的体制,这点自己以为IE是做的可比好的,它会将有所样式都来得出来不过对于失效的体制会使用删除线的情势,列出被其余CSS命令取代的样式设置,可以很便利地来看样式之间的延续关系。

其它小技巧就是颜色取色器,做前端可能我们都会平时的想要变换样式,想要改变颜色,在IE开发人士工具里面,点击
  工具–>突显颜色取色器  
那样就打开了一个颜色取色工具,如下图所示,点击那么些取色图标的按钮就足以拓展取色了(可是你可不用想着随地取色哦,你能取色的限定只好是在时下IE浏览器里面哦
  你可别想着在桌面或者别的浏览器里面举行取色哦
 它还没有强硬到跳出当前运作条件去……)

图片 2

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

Compatibility

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

修改网页中的文字

俺们借使想要修改网页中的文字此前务必得选用你要修改的文字,可以应用三种艺术进行抉择

1、开发人士工具HTML选项卡第二个图标
也就是不行鼠标箭头按钮,当然你也足以选择它的快捷键ctrl+b

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

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

· 已有工具和作用的增强

modern.IE

  • 一组有助于援救分裂版本 Internet Explorer
    的新工具
  • 下载虚拟机
  • 创设现代站点且同时协助旧版 IE 的 20
    个提示

(原文刊载于: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控制台一样的)

假使要为网页添加一个新的体裁呢,

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
的开发者工具将菜单导航放到了右边,并且动用了简单易用的图标,对于开发者们来说花点时间认识新的图标比不停的上下拖动菜单轻松多了。

相关文章