写在前面

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

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

Chrome 控制台不完全指南   http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)  http://www.cnblogs.com/ctriphire/p/4116207.html

Chrome控制台如何调试JavaScript   http://www.cnblogs.com/ctriphire/p/4117370.html

进入正题

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

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

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

简单介绍

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

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

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

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

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

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

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

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

其它话

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

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

修改网页中的文字

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

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

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

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

修改元素的属性

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

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

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

样式相关操作

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

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

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

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

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

调试JavaScript

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

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

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

探查器面板的使用

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

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

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

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

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

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

IE开发人员工具教程的更多相关文章

  1. Chrome_浏览器开发人员工具

    Google Chrome 浏览器开发人员工具,让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Dev ...

  2. IE的F12开发人员工具不显示问题

    按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的缩略图上,右键-最大化,工具就全屏出现 ...

  3. IE开发人员工具之实用功能讲解

    F12快捷键调出开发人员工具 一.JS的内容格式化 1.内容较乱的js脚本: 2.勾选下面两项即可进行格式化脚本:自动换行与格式化JS 3.调理清楚的脚本 二:清空控制台 1.右键->清空 2. ...

  4. IE的F12开发人员工具不显示

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  5. Chrome - 怎样独立窗口打开开发人员工具

    打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...

  6. 关于IE开发人员工具(F12)找不到的问题

    关于IE开发人员工具(F12)找不到的问题 解决方案:第一步,像往常一样F12或者,工具->开发人员工具,点击后,这个时候你是看不到工具界面(当然,如果你正好遇到了找不到这个问题);第二步,这个 ...

  7. IE8按F12不显示开发人员工具窗口

    转:http://www.cnblogs.com/micromouse/archive/2010/07/11/1775174.html 网上搜来的,记录一下,免得以后忘了 F12将开发人员工具启动后, ...

  8. EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  9. 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

    来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可 ...

随机推荐

  1. 关于安卓手机访问一些网站或者Fiori应用弹出安装证书的提示

    有朋友问遇到在安卓手机上安装Fiori Client,打开的时候提示需要安装证书,如下图所示: 我在自己的Android手机试了试,因为我没有装Fiori Client,所以就用手机浏览器直接访问ht ...

  2. 一种轻量级的C4C业务数据同步到S4HANA的方式:Odata通知

    SAP Cloud for Customer和SAP其他传统产品的同步,除了使用SAP Netweaver Process Integration和SAP HANA Cloud Integration ...

  3. UVA 11983 Weird Advertisement

    题意:求矩形覆盖k次以上的区域总面积. 因为k≤10,可以在线段树上维护覆盖次数为0,...,k, ≥k的长度数量. 然后就是一个离散化以后扫描线的问题了. 离散化用的是半开半闭区间,以方便表示没有被 ...

  4. mm_struct简要解析

    http://blog.chinaunix.net/uid-20729583-id-1884615.html struct mm_struct {    /*        指向线性区对象的链表头   ...

  5. 【转】Xcode真机调试初体验

    1. 开发者证书(Certificates) 分为开发(iOS Development)和发布(iOS Distribution)两种,无论是真机调试,还是上传到App Store都需要该证书,是一个 ...

  6. Spring Java配置

    Java配置 Java配置是Spring 4.x推荐的配置方式,可以完全替代xml配置:Java配置也是Sping Boot 推荐的配置方式.Java配置是通过@Configuration和@Bean ...

  7. 3.2.5 Magic Squares 魔板

    3.2.5 Magic Squares 魔板 成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 我们知道魔板的每一个方 ...

  8. Linux nohup 关闭终端的时候,程序依然能在后台运行( linux重定向及nohup不输出的方法)

    先说一下linux重定向: 0.1和2分别表示标准输入.标准输出和标准错误信息输出,可以用来指定需要重定向的标准输入或输出.在一般使用时,默认的是标准输出,既1.当我们需要特殊用途时,可以使用其他标号 ...

  9. django+xadmin在线教育平台(十三)

    这个6-8对应对应6-11,6-12 拷入forgetpassword页面 书写处理忘记密码的view users/views.py # 用户忘记密码的处理view class ForgetPwdVi ...

  10. Go单元测试与基准测试

    Go单元测试 Go单元测试框架,遵循规则整理如下: 1.文件命名规则: 含有单元测试代码的go文件必须以_test.go结尾,Go语言测试工具只认符合这个规则的文件 单元测试文件名_test.go前面 ...