软件工程师-25个浏览器开发工具的小秘密

1、你充分发挥了这些工具的潜力吗?开发工具最大的特点就是很容易使用，但结果就是开发者们常常错过了它们所提供的大部分功能。本文列出了一个有关浏览器开发控制台“秘密”的列表。AD： 开发过去几年来，浏浏览器开发工工具一直是WWeb开发者者最得力的工工具。它能够够与Web浏浏览器和谐相相处，允许我我们在当前窗窗口中实时地地操作DOMM元素、CSSS样式和JJavaSccript，以以及获取一些些其他的有用用信息。以前开发者使用用Fireffox的一个个名叫Firrebug的的扩展，来开开发和调试他他们的网站。但但是最近，各各个浏览器都都开发了一套套它们自己的的工具，并且且每一个都有有自己的优势势和劣势。

2、如如今很难想像像没有这些方方便的工具，如如何来构建一一个网站。激活开发工具通通常是按下“FF12”键(Mac系统统为 Cmdd + Opption + I )，或通过右右键点击页面面，选择弹出出菜单中的“审审查元素”。浏览器开发工具集类型文档ChromeDevelopper Toools集成 HYPERLINK /chrome/devtools/docs/overview.html DocumenntatioonFirefoxxFirebugg HYPERLINK / 扩展 HYPERLINK /wiki/index.php/Main_Page DocumenntatioonInterneet

3、 ExpplorerrDevelopper Tooolbarr集成 HYPERLINK /en-us/library/gg589507(v=VS.85).aspx DocumenntatioonOperaDragonnfly集成 HYPERLINK /dragonfly/documentation/ DocumenntatioonSafariDevelopper Toools集成 ( HYPERLINK /library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDevelo

4、perTools/SafariDeveloperTools.html#/apple_ref/doc/uid/TP40007874-CH3-SW7 l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html#/apple_ref/doc/uid/TP40007874-CH3-SW7 默认关关闭) HYPERLINK /library/safari/#documentation/appleapplications/Concept

5、ual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html Overvieew你充分发挥了这这些工具的潜潜力吗?开发发工具最大的的特点就是很很容易使用，但但结果就是开开发者们常常常错过了它们们所提供的大大部分功能。受受到 HYPERLINK /2011/a-re-introdu

6、ction-to-the-chrome-developer-tools/ Paull Irissh 和 PPavel Feldmman 视频频谈话的启发发，我列出了了一个有关开开发控制台“秘秘密”的列表表。我不指望望它们中的每每一个都对你你来说是未知知的，只希望望它们中的某某一些能够有有助你成为一一个更好的WWeb开发者者。如果你有更多的的“秘密”，请请自在地在文文章末尾留言言一旦我我确认了，我我会及时更新新这篇文章。我我也很想知道道你哪个开发发控制台是你你首要的开发发工具，也可可以直接在下下面留言。控制台选项卡引用当前元素Chrome, Fireefox, Operaa, Saffari 如

7、果在“元元素”选项卡卡中，你有一一个元素正被被选中的话，你你可以通过引引用“$0”来来你的代码中中调用它。比比如，为了看看到你选中元元素的内容，你你可以输入 “$0.iinnerHHTML”。在在Chromme和Saffari中，你你可以通过按按下“Escc”键，立即即从其他选项项卡切换到控控制台(开发发工具打开了了的情况下)。在Firrebug中中，控制台通通过点击选项项卡左侧的图图标，或按下下Ctrl + Shiift + L 来切换换(Mac 下是 Cmmd + SShift + L )。在Opera中中，你可以用用“$1”往往前引用元素素。在Chrrome和SSafarii中，你可以以

8、用“$1$4”往前前引用元素。使用consoole.loog同时输出出多个值和对对象所有浏览器我我们都知道，cconsolle.logg()方法用用来输出调试试信息到控制制台时非常有有用，尤其是是与alerrt相比。但但是当你想要要输出一个字字符串紧跟着着一个对象时时，它输出的的形式会让人人生烦。比如如使用connsole.log(messaage: + $(#messsage)将仅仅告告诉你消息是是一个对象(*译注：可可能输出结果果是“messsage:objeect Obbject”)，并且且如果这个过过程在一个循循环体中的话话，对象的表表示让人困惑惑。consolee.log()实际上可

9、可以接收多个个参数，所以以你可以同时时输出字符串串和对象：cconsolle.logg(messsage:,$(#messsage);或者其其他你能想到到的JavaaScrippt类型组合合。你可以用connsole.warn()输出警告告消息;用cconsolle.errror()输输出错误消息息;用()输出信息息消息。你也也可以使用cconsolle.asssert()来检测表达达式为truue或fallse。(感谢Maskklinn提提供了此项信信息)重用JavaSScriptt命令所有浏览器如如果你输入过过一条命令到到JavaSScriptt控制台，并并且你又想重重新运行它，只只要简单

10、地按按下方向键“”来回滚你你调用过的命命令就可以了了。保持Chrome，FFirefooxFirrebug 控制台上方方有一个很明明显的“保持持”(Perrsist)按钮，但CChromee中被稍微隐隐藏掉了需要右键点点击控制台，在在弹出的右键键菜单中选择择“Presserve Log uupon NNavigaation”选选项。*译注：保持的的作用是让控控制台在刷新新页面后仍然然保留已输出出的控制台信信息。查看对象源FirefoxxFireefox支持持toSouurce()方法，这意意味着在Fiirebugg中可以直接接调用这个方方法来打印一一个对象的字字符串表示。改变frameeFir

11、efoxx从控制台台直接运行JJavaSccript命命令是很有用用的，但是如如果你页面用用了ifraame内容的的话，就变得得麻烦了。幸幸运的是，用用下面的“ccd”命令能能够进入到指指定的ifrrame环境境，得以重新新运行你的命命令：cd(winddow.frramesframmeNamee);*译注：比如ccd(winndow.fframess0)，它会进入第一个iframe的执行环境，并显示一条info消息：Current window:, Window ;同时，返回上层可以使用：cd(parent)ChromeChromme允许你用用一个不同的的方式来改变变framee，点击控制制

12、台底部的下下拉菜单进行行切换：OperaOOpera中中，控制台和和文档选项卡卡都存在一个个用来切换fframe的的下拉菜单控制台中中的那个下拉拉菜单仅在有有framee可供选择时时才显示：(感谢Paull Irissh和Danniel提供供此项信息)直接复制你的代代码到剪贴板板Chrome，FFirefoox，Saffari在在控制台中使使用copyy()命令，以以内容作参数数，将直接复复制内容到剪剪贴板。让浏览器做计算算所有浏览器这这个技巧很有有意义，但令令人惊讶的是是会有多少人人不这么去用用它。当你想想快速知道一一个数学计算算的答案(比比如，一个4456像素宽宽度的容器分分三栏，每栏栏有

13、多宽?)，你不需要要打开一个计计算器，直接接在控制台输输入就能立即即返回答案。顺顺便说一下，答答案是1522。*译注：这又不不是Bot，OO_O作者应应该是指直接接在控制台输输入表达式：456/33脚本选项卡页面所有运行脚脚本安身的地地方，这个选选项卡包含了了一个下拉菜菜单，让你可可以选择你想想要调试的脚脚本。处理压缩过的脚脚本Chrome，IInternnet Exxploreer, Saafari放置一个断断点在代码中中会让调试更更简单。如果果脚本是已经经投入生产环环境了的话，它它就很可能已已经被压缩过过了。这时怎怎么你怎么调调试压缩过的的代码呢?幸幸好，部分浏浏览器有个选选项可以解压压你

14、的JavvaScriipt代码。Chrome和和Safarri中，简单单地选择脚本本选项卡，通通过下拉菜单单选择相关的的脚本，然后后点击底部面面板的”(preetty pprint)图标：在IE9中，点点击选中脚本本旁边的工具具图标来格式式化JavaaScrippt代码：监视变量所有浏览器.NET开发发中的一个常常用工具，“监监视”允许通通过脚本选项项卡右上栏的的方便的区域域来观察一组组变量。要观观察一个变量量很简单，只只要输入它的的名字，“监监视”将保持持它最新的值值。实时编辑和执行行JavaSScriptt代码Chrome在Chroome中，你你可以直接在在页面中进行行编辑，并不不需要使用

15、单单独的编辑器器或者重新加加载页面。简简单地双击你你想要改变代代码，然后输输入新的代码码!按Ctrrl + SS (Macc，Cmd+S)保存。当错误发生时创创建一个断点点所有浏览器当当第一个脚本本错误发生时时，简单地点点击脚本选项项卡中的暂停停图标，出错错行将会高亮亮以便查看。当DOM改变时时创建一个断断点Chrome，FFirefoox如果你你知道当某个个特定部分的的DOM改变变时页面崩溃溃了，或者你你仅仅想找出出是哪段脚本本改变了某个个元素的属性性，Chroome和Fiirefoxx都提供了有有效设置断点点的方式来找找出这个元凶凶。简单地选选中你要监视视的元素，右右键点击它，选选择中断条

16、件件：元素选项卡Firefoxx中叫做“HHTML”选选项卡，Oppera中叫叫做“文档”(Documments)选项卡。元元素(Eleementss)选项卡显显示的是当前前状态的DOOM。在IEE中，你需要要点击“刷新新”按钮才能能查看当前的的DOM。获取一个容器尺尺寸的简易办办法Chrome，SSafarii我是个在在包含浮动元元素的容器上上使用oveerfloww:autoo样式的大粉粉丝旧版版本的IE这这样做会引起起麻烦，除非非你给元素指指定了实际宽宽度(autto和1000%都不够)。虽然元素素的实际尺寸寸可以在元素素选项卡右上上角的“Coomputeed Styyle”栏看看到，但

17、仍然然需要点击好好几次。在CChromee或Safaari中更好好办法是，鼠鼠标悬停到元元素选项卡里里HTML源源代码的特定定元素上，或或者点击底部部工具栏上的的放大镜后再再悬停到页面面特定元素上上：Firebugg, Intternett Expllorer, Operra 你你需要选择开开发工具右手手侧面板中的的“布局”(Layouut)选项卡卡，或在右侧侧边栏中的“计计算样式”(compuuted sstyless)中查看。展开所有元素视视图Firefoxx，Operra 在FFirebuug的HTMML选项卡中中，按下小键键盘上的星号号(*)键就就可以展开选选定的所有元元素。默认不不会

18、展开脚本本标记和样式式标记，除非非你同时按下下Shiftt + * 键。Opera Operra“文档”(Documments)选项卡下边边直接有个按按钮可以做这这件事：增加边距、间距距、高度、宽宽度、边框甚至是颜颜色所有浏览器如如果你想改变变某元素的边边距、间距、高高度或者，你你可以用光标标键(即方向向键)来增加加/减小大小小： 按上()或下()键将增加或或减小单位11。 在Chroome，Fiirebugg和Safaari中，按按住Shifft键的同时时，再按上或或下键将增加加或减小单位位10。(*译注：Paage-Upp和Pagee-Downn键有同样的的效果) 在Chroome和Saa

19、fari中中，按住Allt键的同时时，再按上或或下键将增加加或减小单位位0. 1。 在Chroome和Saafari中中，按住Shhift键的的同时，再按按Up或Paage-Doown键将增增加或减小单单位100。这些快捷键在你你不确定用哪哪种使用的尺尺寸做样式时时特别有用。另另外，Chrrome，FFirebuug和Opeera中，你你同时可以用用这些快捷键键来修改颜色色值。*译注：需要双双击元素选项项卡右侧的具具体样式，使使其进入编辑辑状态。为:activve, :hhover, :foccus, :visitted状态设设置样式Chrome，FFirefoox，Opeera 在在控制台操

20、作作样式真的很很棒，但测试试悬停样式就就麻烦了。庆庆幸的是，有有个解决办法法。Chrome有有个内置按钮钮用来做这件件事。在元素素选项卡右侧侧有个带虚线线框和光标的的图标，它就就是用来编辑辑状态样式的的：Firebugg中，点击右右侧的Styyle选项卡卡旁边的带箭箭头菜单，然然后选择你想想要编辑的状状态。在Opera中中，样式选项项卡下面有个个看起来像列列表的图标。轮换颜色定义类类型Chrome，SSafarii Webb页面中的颜颜色能用多个个方式定义通过名称称、16进制制数字(3位位或6位)、rrgb或hssl(都有带带alphaa透明的版本本)。在Chhrome 或 Saffari中，

21、你你可以通过点点击颜色值旁旁边的方形图图标来在这几几个类型定义义之间切换。*译注：增加了了这个截图，以以前我仅仅以以为那个方块块是用来展示示颜色的，囧囧，根本不知知道它还能点点击又多多了一个能省省略掉计算器器的功能。颜色拾取器Opera 在 Oppera中，和和上面一样，点点击颜色值右右边的方块图图标可以弹出出一个方便的的拾取器：*译注：这里又又有了个HSSV颜色自动动转换RGBB颜色的工具具。资源选项卡资源(resoourcess)选项卡列列表你的页面面使用的所有有样式表、JJavaSccript文文件和图片。不不幸的是，IIE和Firrebug中中不存在这个个选项卡，尽尽管在它们的的其他选

22、项卡卡中集成了这这项功能的一一些特征。保存你的更改Chrome，IInternnet Exxploreer, Saafari在工具中中即时编辑样样式或JavvaScriipt很爽。但但当你高高兴兴兴地做了修修改，然后又又要在源代码码中重新实现现一遍就不那那么爽了。在IE中，每个个选项卡提供供了一个“保保存”图标，它它的功能就是是保存修改到到一个文件当当中。同时，Chroome和Saafari的的资源选项卡卡中提供了一一项贴心的功功能：它保存存了你每次修修改的版本(按Ctrll + S之之后)，还允允许你往前或或往后查看每每个版本的变变化。你修改改过的文件名名旁边会出现现一个箭头图图标，表示它它

23、可以展开/收起以查看看修改过的版版本列表。在在Chromme中，右键键点击文件名名可以选择保保存这个文件件。不过在SSafarii中你只能悲悲剧地复制和和粘贴了。Cookie和和存储Chrome，OOpera, Safaari资源源选项卡下半半部分的资源源列表表示了了各种不同的的数据存储选选项。Opeera有一个个单独的存储储选项卡。网络选项卡网络(Netwwork)选选项卡显示你你页面加载的的所有文件资资源。大多数数情况，你打打开它之后，要要刷新一下页页面才能显示示出你想看的的信息。在FFirebuug中，选项项卡的名称是是“Net”。对对于IE，直直到版本9以以后才有它。禁用浏览器缓存存所有浏览器每每个浏览器都都可以禁用缓缓存，但禁用用的方式不一一致。在Chromee中，点击开开发工具右下下角的齿轮图图标进行设置置。在Firrebug中中，设置位于于网络选项卡卡旁边的箭头头下拉菜单中中。在IE中中，设置位于于菜单栏的存存菜单项。在Opera中中，要清除缓缓存的话，点点击网络选项项卡，选择网网络选项中的的第二个选项项卡，选择其其中的第一个个选项。在SSafarii中，在菜单单栏中的“开开发”菜单中中禁用缓存。Windowss中，在浏览览器中可以按按下Ctrll + Shhift + Deleete键调用用消除缓