IE开发者工具教程

简单介绍

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

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

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

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

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

美洲杯在哪买球 1

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

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

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

美洲杯在哪买球 2明天周六啦,再次提前祝各位猿猿们节日快乐

其它话

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

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

美洲杯在哪买球 3

美洲杯在哪买球 4提前祝各位程序员节日快乐

修改网页中的文字

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

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

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

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

我们借助 Chrome 开发者工具的支持,可以提高网页应用程序开发与调试的效率。想了解更多,请参考资料Chrome Developer Tools 官方文档

探查器面板的使用

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

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

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

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

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

回归正题,本文主要是介绍一下Chrome developer tool的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的听到类似这样的话:“别用IE,IE太low了,用Chrome吧”。如今,我用过Chrome后才切身体会到,Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁、大量的应用插件,良好的代码规范支持、强大的V8解释器,javascript执行速度和内存占有率表现非常优秀之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。

IE开发者工具教程

2015/01/13 · JavaScript · IE

原文出处: YouYaInsist的博客   

<h6><4>使用控制台打印变量值或方法的返回结果</h6>当断点被触发进入到调试模式时,我们可以将当前任意存在的变量或方法输入到控制台中,按下回车后,控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。</br>需要注意的是,当在控制台中输入的方法名字不带括号时,控制台输出的是该方法所包含的代码信息,而并不是运行结果。

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

赞 收藏 评论

美洲杯在哪买球 5

<h6><2>Element 标签页对 CSS 的控制</h6>在网页开发过程中,经常需要在脚本中控制不同条件下页面的样式展示,例如页面中的标签颜色,位置,大小等等,在 Chrome 开发者工具的 Element 标签页中,其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能,并且在修改之后能够立即从页面中看到变化。如图

写在前面

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

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

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台如何调试JavaScript

Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。Source 标签页:用于查看和调试当前页面所加载的脚本的源文件,可以打断点进行调试。Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件,图片等。Audits 标签页:用于优化前端页面,加速网页加载速度等。

样式相关操作

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

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

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

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

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

再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈_

本文由美洲杯在哪买球发布于计算机教程,转载请注明出处:IE开发者工具教程

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。