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

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

2、自自己的工具具，并且每每一个都有有自己的优优势和劣势势。如今很很难想像没没有这些方方便的工具具，如何来来构建一个个网站。激活开发工工具通常是是按下“FF12”键键(Macc系统为 Cmd + Opptionn + II )，或或通过右键键点击页面面，选择弹弹出菜单中中的“审查查元素”。浏览器开发工具集集类型文档ChrommeDevelloperr Toools集成 HYPERLINK /chrome/devtools/docs/overview.html DocummentaationnFireffoxFirebbug HYPERLINK / 扩展 HYPERLINK /wiki/index.

3、php/Main_Page DocummentaationnInterrnet ExpllorerrDevelloperr Tooolbarr集成 HYPERLINK /en-us/library/gg589507(v=VS.85).aspx DocummentaationnOperaaDraggonflly集成 HYPERLINK /dragonfly/documentation/ DocummentaationnSafarriDevelloperr Toools集成 ( HYPERLINK /library/safari/#documentation/appleapplications/C

4、onceptual/Safari_Developer_Guide/2SafariDeveloperTools/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/s

5、afari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html l documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html Overvview你充分发挥挥了这些工工具的潜力力吗?开发发工具最大大的特点就就是很容易易使用，但但结果就是是开发者们们常常错

6、过过了它们所所提供的大大部分功能能。受到 HYPERLINK /2011/a-re-introduction-to-the-chrome-developer-tools/ PPaul Irissh 和 Paveel Feeldmaan 视频频谈话的启启发，我列列出了一个个有关开发发控制台“秘密”的的列表。我我不指望它它们中的每每一个都对对你来说是是未知的，只只希望它们们中的某一一些能够有有助你成为为一个更好好的Webb开发者。如果你有更更多的“秘秘密”，请请自在地在在文章末尾尾留言一旦我确确认了，我我会及时更更新这篇文文章。我也也很想知道道你哪个开开发控制台台是你首要要的开发工工具，也可可以直

7、接在在下面留言言。控制台选项项卡引用当前元元素Chromme, FFireffox, Operra, SSafarri 如果在“元素”选选项卡中，你你有一个元元素正被选选中的话，你你可以通过过引用“$0”来你你的代码中中调用它。比如，为为了看到你你选中元素素的内容，你你可以输入入 “$00.innnerHTTML”。在Chrrome和和Safaari中，你你可以通过过按下“EEsc”键键，立即从从其他选项项卡切换到到控制台(开发工具具打开了的的情况下)。在Fiirebuug中，控控制台通过过点击选项项卡左侧的的图标，或或按下Cttrl + Shiift + L 来来切换(MMac 下下是 Cm

8、md + Shifft + L )。在Operra中，你你可以用“$1”往往前引用元元素。在CChromme和Saafarii中，你可可以用“$1$44”往前引引用元素。使用connsolee.logg同时输出出多个值和和对象所有浏览器器我们都都知道，cconsoole.llog()方法用来来输出调试试信息到控控制台时非非常有用，尤尤其是与aalertt相比。但但是当你想想要输出一一个字符串串紧跟着一一个对象时时，它输出出的形式会会让人生烦烦。比如使使用connsolee.logg(meessagge: + $(#meessagge)将仅仅告告诉你消息息是一个对对象(*译译注：可能能输出结果果

9、是“meessagge:oobjecct Obbjectt”)，并并且如果这这个过程在在一个循环环体中的话话，对象的的表示让人人困惑。consoole.llog()实际上可可以接收多多个参数，所所以你可以以同时输出出字符串和和对象：cconsoole.llog(messsage:,$(#meessagge);或者其其他你能想想到的JaavaSccriptt类型组合合。你可以用cconsoole.wwarn()输出警警告消息;用connsolee.errror()输出错误误消息;用用o()输出出信息消息息。你也可可以使用cconsoole.aasserrt()来来检测表达达式为trrue或ffa

10、lsee。(感谢Maaskliinn提供供了此项信信息)重用JavvaScrript命命令所有浏览器器如果你你输入过一一条命令到到JavaaScriipt控制制台，并且且你又想重重新运行它它，只要简简单地按下下方向键“”来回回滚你调用用过的命令令就可以了了。保持Chromme，FiirefooxFiirebuug 控制制台上方有有一个很明明显的“保保持”(PPersiist)按按钮，但CChromme中被稍稍微隐藏掉掉了需需要右键点点击控制台台，在弹出出的右键菜菜单中选择择“Preeservve Loog uppon NNaviggatioon”选项项。*译注：保保持的作用用是让控制制台在刷新

11、新页面后仍仍然保留已已输出的控控制台信息息。查看对象源源FireffoxFFireffox支持持toSoourcee()方法法，这意味味着在Fiirebuug中可以以直接调用用这个方法法来打印一一个对象的的字符串表表示。改变fraameFireffox从从控制台直直接运行JJavaSScrippt命令是是很有用的的，但是如如果你页面面用了ifframee内容的话话，就变得得麻烦了。幸运的是是，用下面面的“cdd”命令能能够进入到到指定的iiframme环境，得得以重新运运行你的命命令：cd(wiindoww.fraamesfraameNaame);*译注：比比如cd(winddow.ffram

12、ees0)，它会会进入第一一个ifrrame的的执行环境境，并显示示一条innfo消息息：CCurreent wwindoow:, Winndow sampple.ccom;同时，返返回上层可可以使用：cd(pparennt)ChrommeChhromee允许你用用一个不同同的方式来来改变frrame，点点击控制台台底部的下下拉菜单进进行切换：OperaaOpeera中，控控制台和文文档选项卡卡都存在一一个用来切切换fraame的下下拉菜单控制台台中的那个个下拉菜单单仅在有fframee可供选择择时才显示示：(感谢Paaul IIrishh和Danniel提提供此项信信息)直接复制你你的代码到

13、到剪贴板Chromme，Fiirefoox，Saafarii在控制制台中使用用copyy()命令令，以内容容作参数，将将直接复制制内容到剪剪贴板。让浏览器做做计算所有浏览器器这个技技巧很有意意义，但令令人惊讶的的是会有多多少人不这这么去用它它。当你想想快速知道道一个数学学计算的答答案(比如如，一个4456像素素宽度的容容器分三栏栏，每栏有有多宽?)，你不需需要打开一一个计算器器，直接在在控制台输输入就能立立即返回答答案。顺便便说一下，答答案是1552。*译注：这这又不是BBot，OO_O作者者应该是指指直接在控控制台输入入表达式：456/3脚本选项卡卡页面所有运运行脚本安安身的地方方，这个选选

14、项卡包含含了一个下下拉菜单，让让你可以选选择你想要要调试的脚脚本。处理压缩过过的脚本Chromme，Innternnet EExploorer, Saffari放置一个个断点在代代码中会让让调试更简简单。如果果脚本是已已经投入生生产环境了了的话，它它就很可能能已经被压压缩过了。这时怎么么你怎么调调试压缩过过的代码呢呢?幸好，部部分浏览器器有个选项项可以解压压你的JaavaSccriptt代码。Chromme和Saafarii中，简单单地选择脚脚本选项卡卡，通过下下拉菜单选选择相关的的脚本，然然后点击底底部面板的的”(preetty prinnt)图标标：在IE9中中，点击选选中脚本旁旁边的工具

15、具图标来格格式化JaavaSccriptt代码：监视变量所有浏览器器.NEET开发中中的一个常常用工具，“监视”允允许通过脚脚本选项卡卡右上栏的的方便的区区域来观察察一组变量量。要观察察一个变量量很简单，只只要输入它它的名字，“监视”将将保持它最最新的值。实时编辑和和执行JaavaSccriptt代码Chromme在CChromme中，你你可以直接接在页面中中进行编辑辑，并不需需要使用单单独的编辑辑器或者重重新加载页页面。简单单地双击你你想要改变变代码，然然后输入新新的代码!按Ctrrl + S (MMac，CCmd+SS)保存。当错误发生生时创建一一个断点所有浏览器器当第一一个脚本错错误发生

16、时时，简单地地点击脚本本选项卡中中的暂停图图标，出错错行将会高高亮以便查查看。当DOM改改变时创建建一个断点点Chromme，Fiirefoox如果果你知道当当某个特定定部分的DDOM改变变时页面崩崩溃了，或或者你仅仅仅想找出是是哪段脚本本改变了某某个元素的的属性，CChromme和Fiirefoox都提供供了有效设设置断点的的方式来找找出这个元元凶。简单单地选中你你要监视的的元素，右右键点击它它，选择中中断条件：元素选项卡卡Fireffox中叫叫做“HTTML”选选项卡，OOperaa中叫做“文档”(Docuumentts)选项项卡。元素素(Eleementts)选项项卡显示的的是当前状状态

17、的DOOM。在IIE中，你你需要点击击“刷新”按钮才能能查看当前前的DOMM。获取一个容容器尺寸的的简易办法法Chromme，Saafarii我是个个在包含浮浮动元素的的容器上使使用oveerfloow:auuto样式式的大粉丝丝旧版版本的IEE这样做会会引起麻烦烦，除非你你给元素指指定了实际际宽度(aauto和和100%都不够)。虽然元元素的实际际尺寸可以以在元素选选项卡右上上角的“CCompuuted Stylle”栏看看到，但仍仍然需要点点击好几次次。在Chhromee或Saffari中中更好办法法是，鼠标标悬停到元元素选项卡卡里HTMML源代码码的特定元元素上，或或者点击底底部工具栏栏

18、上的放大大镜后再悬悬停到页面面特定元素素上：Firebbug, Inteernett Expploreer, OOperaa 你你需要选择择开发工具具右手侧面面板中的“布局”(Layoout)选选项卡，或或在右侧边边栏中的“计算样式式”(coomputted sstylees)中查查看。展开所有元元素视图Fireffox，OOperaa 在FFirebbug的HHTML选选项卡中，按按下小键盘盘上的星号号(*)键键就可以展展开选定的的所有元素素。默认不不会展开脚脚本标记和和样式标记记，除非你你同时按下下Shifft + * 键。Operaa OOperaa“文档”(Doccumennts)选选

19、项卡下边边直接有个个按钮可以以做这件事事：增加边距、间距、高高度、宽度度、边框甚至是是颜色所有浏览器器如果你你想改变某某元素的边边距、间距距、高度或或者，你可可以用光标标键(即方方向键)来来增加/减减小大小： 按上()或下下()键键将增加或或减小单位位1。 在Chhromee，Firrebugg和Saffari中中，按住SShiftt键的同时时，再按上上或下键将将增加或减减小单位110。(*译注：PUp和PDownn键有同样样的效果) 在Chhromee和Saffari中中，按住AAlt键的的同时，再再按上或下下键将增加加或减小单单位0. 1。 在Chhromee和Saffari中中，按住SS

20、hiftt键的同时时，再按PUp或PDownn键将增加加或减小单单位1000。这些快捷键键在你不确确定用哪种种使用的尺尺寸做样式式时特别有有用。另外外，Chrrome，FFirebbug和OOperaa中，你同同时可以用用这些快捷捷键来修改改颜色值。*译注：需需要双击元元素选项卡卡右侧的具具体样式，使使其进入编编辑状态。为:acttive, :hoover, :foocus, :viisiteed状态设设置样式Chromme，Fiirefoox，Oppera 在控制制台操作样样式真的很很棒，但测测试悬停样样式就麻烦烦了。庆幸幸的是，有有个解决办办法。Chromme有个内内置按钮用用来做这件件事

21、。在元元素选项卡卡右侧有个个带虚线框框和光标的的图标，它它就是用来来编辑状态态样式的：Firebbug中，点点击右侧的的Stylle选项卡卡旁边的带带箭头菜单单，然后选选择你想要要编辑的状状态。在Operra中，样样式选项卡卡下面有个个看起来像像列表的图图标。轮换颜色定定义类型Chromme，Saafarii Weeb页面中中的颜色能能用多个方方式定义通过名名称、166进制数字字(3位或或6位)、rgb或或hsl(都有带aalphaa透明的版版本)。在在Chroome 或或 Saffari中中，你可以以通过点击击颜色值旁旁边的方形形图标来在在这几个类类型定义之之间切换。*译注：增增加了这个个截

22、图，以以前我仅仅仅以为那个个方块是用用来展示颜颜色的，囧囧，根本不不知道它还还能点击又多了了一个能省省略掉计算算器的功能能。颜色拾取器器Operaa 在在 Opeera中，和和上面一样样，点击颜颜色值右边边的方块图图标可以弹弹出一个方方便的拾取取器：*译注：这这里又有了了个HSVV颜色自动动转换RGGB颜色的的工具。资源选项卡卡资源(reesourrces)选项卡列列表你的页页面使用的的所有样式式表、JaavaSccriptt文件和图图片。不幸幸的是，IIE和Fiirebuug中不存存在这个选选项卡，尽尽管在它们们的其他选选项卡中集集成了这项项功能的一一些特征。保存你的更更改Chromme，I

23、nnternnet EExploorer, Saffari在工具具中即时编编辑样式或或JavaaScriipt很爽爽。但当你你高高兴兴兴地做了修修改，然后后又要在源源代码中重重新实现一一遍就不那那么爽了。在IE中，每每个选项卡卡提供了一一个“保存存”图标，它它的功能就就是保存修修改到一个个文件当中中。同时，Chhromee和Saffari的的资源选项项卡中提供供了一项贴贴心的功能能：它保存存了你每次次修改的版版本(按CCtrl + S之之后)，还还允许你往往前或往后后查看每个个版本的变变化。你修修改过的文文件名旁边边会出现一一个箭头图图标，表示示它可以展展开/收起起以查看修修改过的版版本列表。

24、在Chrrome中中，右键点点击文件名名可以选择择保存这个个文件。不不过在Saafarii中你只能能悲剧地复复制和粘贴贴了。Cookiie和存储储Chromme，Oppera, Saffari资源选项项卡下半部部分的资源源列表表示示了各种不不同的数据据存储选项项。Opeera有一一个单独的的存储选项项卡。网络选项卡卡网络(Neetworrk)选项项卡显示你你页面加载载的所有文文件资源。大多数情情况，你打打开它之后后，要刷新新一下页面面才能显示示出你想看看的信息。在Firrebugg中，选项项卡的名称称是“Neet”。对对于IE，直直到版本99以后才有有它。禁用浏览器器缓存所有浏览器器每个浏浏览器都可可以禁用缓缓存，但禁禁用的方式式不一致。在Chroome中，点点击开发工工具右下角角的齿轮图图标进行设设置。在FFirebbug中，设设置位于网网络选项卡卡旁边的箭箭头下拉菜菜单中。在在IE中，设设置位于菜菜单栏的存存菜单项。在Operra中，要要清除缓存存的话，点点击网络选选项卡，选选择网络选选项中的第第二个选项项卡，选择择其中的第第一个选项项。在Saafarii中，在菜菜单栏中的的“开发”菜单中禁禁用缓存。Windoows中，在在浏览器中中可以按下下Ctrll + SShiftt + DDelette键调用用消除缓存存对话