WebKit 英文原文：THE WEBKIT INSPECTOR

当今移动设备这边厢风景已由WebKit独领风骚，所以，为移动设备上Web前端开发提供支持的各种工具以及基础设施都来自WebKit的Inspector。因此，我将着重讲述一下WebKit的Inspector，深入阐述它所具有的全部特性集，并说说应该在什么情况下以及如何使用WebKit的Inspector。

Google以及Chrome团队已经给出了大量关于Inspector的资料。正是由于这方面的发展变化，才使得整个一大类新的比较复杂而炫目的应用程序能够克服自身巨大的复杂性而成为现实。这当然是个好消息，但随着我不断地同越来越多的Web开发人员交谈，我逐渐发现，他们中有很多人在开发过程以及工具使用方面，并没有及时跟进这些变化，或者说，他们并没有充分利用现有的工具。为了弥补该问题，我这篇博文不仅会带领你领略Inspector的所有特性，而且还会重点介绍一些查找bug的技术以及一些我认为不可或缺的特性开发技术。写本博文就是为了要它即可看又可分享。你可以点击本文中的任何一个小标题，将指向特定技巧/技术或特性的URL分享给你的朋友们（译者注：由于翻译排版的问题，这个功能就木有了）。

写在前面

在我们开始深入探讨之前，要声明一点就是我并不认为我在开发过程以及工具使用方面的知识是绝对正确的。如果你发现其中观点有误、信息过时或者用处不大，请给我发封email告诉我你的观点，我将洗耳恭听。

如果你刚结识inspector，或者对它了解并不多，那就劳驾您边读本文边摆弄摆弄它。亲身试验是最好的学习方法！“但是宝贝啊，我可不想为了试验这些东西而不断地建一堆新文件然后载入并编辑它们！我还要喂孩子呢！”。 我听到你这么说了，而且我也赞同你的这个观点，这也正是为什么会有“data：URLScheme”的原因！

请试验一下： 在Chrome中打开一个新标签（tab），把下列内容粘贴到地址栏并敲击回车键：

data:text/html,<b>ZOMG I AM BOLD!?!!?</b>

这是在页面中弄一些HTML并查看其展示情况、试验一些新想法最简便的方法。冒号后面的所有内容都会被浏览器看作是HTML，一旦装载完成后，就可以打开Inspector进行各种试验了。

一个Inspector就够了

WebKit上现在可不止有一个Inspector。实际上任何时候你都可以使用以下所列浏览器里提供的5个Inspector：

1. Safari Stable
2. Chrome Stable
3. WebKit Nightlies
4. Chromium
5. Chrome Canary

我是按照从最旧到最新的顺序对它们进行排列的。Chrome Canary总能得到最新特性方面的更新。在最早尝鲜的人用过一段时间之后，这些新特性会逐渐并入Chromium、WebKit Nightlies以及Chrome，最后并入的是Safari。在任何时候，Safari的Inspector都落后于Chrome Canary大约一年的开发时间。也就是说，请你使用Chrome Canary进行开发吧。

设置好环境

棒极了。你已经下载并打开了Chrome Canary，启动了你的网站之后，你摩拳擦掌并挽起了袖子。 请敲击按键CMD+J打开Inspector，也可以用鼠标右键点击某一个的元素并单击“Inspect Element”菜单。

现在来设置一个舒服的环境。要做的第一件事是先熟悉一下UI。花点时间点击一下你所看到的每一个按钮，还可以在按钮上悬停一下鼠标，查看按钮的提示信息（tooltip），看看到底它们能干些什么事情。

停靠到右侧

你要做的第一件事是，点击界面底端右侧的齿轮图标，调出Inspector的设置界面。先别管设置界面那极其丑陋的平视显式格式（HUD display）, 我强烈推荐选择“Dock to Right”这个选项（译者注：其实可以把Inspector拖到右侧停靠）。选择该选项后，Inspector就会停靠在窗口右侧。你要是将Inspector弹出为独立窗口，再同时打开多个Inspector，情况就会很混乱。如果停靠在底部，那么水平方向的许多空间得不到利用，反而垂直方向上能看到的内容太有限了。停靠到右侧能在双方面达到最好的效果。你所看到的应该是如下图所示的情况：

仿真触屏事件

如果你正在开发的是移动应用，那么这个设置（在设置界面里）就很有必要选择了。

Google啊，如果你在听我说的话：把那个“Dock to Right”作为缺省选项选择上吧！

快捷键

还有一个小技巧可以帮你提高使用Inspector的效率，就是熟练使用键盘快捷键。 切换到Elements面板（有些其它面板会吞掉键盘敲击事件），然后键入“?”。 随后就会出现极其丑陋的平视显式格式的界面，其中列出了一个快捷键列表。最有用的快捷键是切换到Script面板的那个，随后我们再细说这些。

Google啊，如果你在听我说的话：把快捷键列表放到设置面板中吧。多数人都不知道要按那个神秘的问号键。既然说到这了，那就再问问，为什么这个列表界面的颜色同其它的UI如此不同？为什么边框圆角的半径那么大？为什么标题栏里的那个“X”按键没有垂直对中？为什么其中有些快捷键小到根本无法看清？

检视iFrame

一直以来，iFrames的调试都是摆在Web开发人员面前的一个难题。现在再也不是了！你现在可以指定想让Inspector检视哪个iFrame，指定的方法是通过下图所示的inspector底端中间部分的弹出式选择框进行。这个选择框有些稀奇，只有你对控制台进行扩展（在Elements面板下按Esc键）之后才能显示出来。

Google啊，如果你在听我说的话：把iFrame下拉选择框放到触手可及的地方吧。

控制台

甜心大宝贝，你环境都弄好了， 音乐也响起了，此时心必向往之。现在你需要真的做些事情了：运行命令，检查某个函数的输出结果，看看某个方法是否存在，或者看看有什么日志/错误/警告。这些都是控制台可以帮助你干的事情。 控制台可是个到处惹是生非的坏家伙，实际上它不仅仅有自己的面板，而且在任何面板中都可以通过点击界面底部左侧的“>=”图标或者按Esc键把它调出来使用。

它正好也是比较直观的功能之一： 键入一些表达式并敲回车键，然后就能看到相应的输出结果。日志按发生时间顺序显示，点击右侧的文件名就可以到达Scripts面板。但你可能还不知道，在控制台面板中使用“shift + enter”，你可以键入多行表达式。这对编写包含匿名函数或复杂语句的比较长的命令十分有帮助。你还可以在日志多得看不过来的情况下，键入“ctrl + L”清除控制台中显示的内容。

从DOM调试的角度看，控制台里比较酷的一个功能是它可同Elements面板（这个我们在下一节中进行讨论）进行集成。在Elements面板选中的元素可以便捷地通过使用 “$0”进行访问。它代表对选中元素的引用，你可以对该元素进行一些交互操作。另一方面，只要你在控制台中看到有打印出来的DOM节点，你都可以右击该节点并点击“Reveal in Elements Panel”菜单就可以在DOM中快速找到该节点了。

Google啊，如果你在听我说的话：给控制台的命令加上语法高亮吧，这对排除简单的错误会很有帮助作用的。要是能自动插入大小括号以及引号的话，倒也伤害不了谁。

Elements面板

你设置好了环境并准备好开始创建你的应用程序了。第一步是要让你的HTML和CSS表现正常（或者还有JavaScript，这取决于你的工作流程）。此时就是该Elements面板上场大显身手的时候了。

DOM操作

Elements面板在你需要修改/调试CSS或者DOM时就该派上用场了。Elements面板的主要区域里实时地显示着你的DOM的层次结构。随着你用JavaScript对它们进行修改，你就能在Elements面板中实时的看到修改的结果。箭头键可以用来在层次结构中上下游走，而且你还可以双击任意属性对其名或其值进行编辑。你还可以在DOM中点击后拖拽任意节点重新排列节点顺序并改变它们的位置。

因为Elements面板反映的是实时信息，所以我发现我自己经常会在这个面板进行大量的试验。将这个节点拖拽到这里，看看是不是修复了z坐标方向的显示顺序问题（z-index ordering issue）? 那个DIV没有显示出来，看看它是不是被另外一层给遮挡住了？

在inspector的底部，你能看到有个放大镜。你点击它之后，就可以将其悬停在你的应用之上，放大镜就会高亮显示你选择的节点。这一招在你需要快速选择一个嵌套层次非常深的元素时会非常方便。

你在Elements面板里这试试那试试时，用鼠标右键点击任何一个节点，看看会弹出些什么菜单。其中有一个菜单是“Break on Subtree Modifications（子树发生修改时暂停执行）”。 你选上它后，对鼠标下那个节点下的所有DOM节点进行修改时，浏览器会自动暂停，给你个调试的机会。

CSS的编辑

接下往右看，会看到CSS编辑器，它可是Inspector最有用的特性之一。粗浅说来，用它可以对你的CSS进行实时编辑。但是，它大大减少了试验所需克服的障碍，我发现我经常在该编辑器中挪东挪西，对各种想法进行试验。要不是它提供这么便利的试验条件，我那些想法可能早就因为被认为愚蠢到家而被直接抛弃了；正如Bret Victor 所说，这可是一件大好事。

右侧列表中你首先看到的是“Computed Style×（计算所得样式）”部分。选中“Show inherited（显示继承项）”检查框，你就能看到由左侧选中的节点所适用的所有样式属性极其取值组成的一个列表。 及时你没有显式地设置某个属性，它也会显示出它所继承的缺省值。 这样不仅仅可以帮你理解一个节点的样式到底是由哪些属性组成的，而且还可以帮你找出修改该节点样式所需设置的属性。请你看看那些属性中有没有你还不知道的属性，然后修改一下它看看它到底有什么作用。

列表中的下一项是“Styles（样式）”部分。在这部分将左侧选中的节点所适用的属性按照选择器进行分组显示。 第一个子部分标题是“element.style”，它显示的是在HTML中通过style=""设置的所有属性。接下来的子部分标题为“Matched CSS Rules（相匹配的CSS规则）”，显示的是同所选节点向匹配的选择器以及其中的属性和值，并且右侧还显示了选择器所在的文件名以及行号（line number）。

要添加新的选择器，可以点击“Styles”标题栏右侧的“+”按钮, 这里你可以定义选择器，适用tab键，书写属性及其值。你会发现，Chrome提供了自动补全建议（这是调查你能设置哪些属性的另一个很好的方法）。撰写本文时所用的最新版的Canary要求敲击右箭头键来完成自动补全动作，接下来可以按tab键并设置属性的值。再次敲击tab键就可以进行下一个属性设置了。如果你想在已有的选择器中设置一个新属性，点击一次结尾的括号然后点击“+”新选择器右边的按钮就能让你指定一个伪选择器了（a pseudo selector）。这真是太方便了！

颜色的表现稍有不同。单击一个颜色值，会让颜色值在不同的表示方式(16进制, rgb, rgba等等)之间来回切换显示, 单击带颜色的小方块会打开颜色选择器。

所有这些都很好，但让我们假设一下，你已经花了10分钟对CSS进行了各种编辑，然后呢？你怎样保存这些修改呢？要保存修改，就要点击选择器的文件名（或者你自己到资源面板中找到相应的文件），接下来鼠标右击该文件（该文件将更新以反映那些修改操作），然后就可以点击“Save As”菜单覆盖你已有的文件了。个人经验，我发现选择文本并将其粘贴到我的编辑器中速度更快而且还不容易出错。

最后在CSS编辑方面要注意的一点是：如果你添加了新的选择器（通过敲击“＋”键），那么该选择器不会被保存到文件中，因为Inspector不知道要将这个新选择器保存到哪个CSS文件中。 

Google啊，如果你在听我说的话：要是我创建了一个新的选择器的话，完全可以问我想把这个新选择器保存到哪个文件中。还有，用“tab”键完成所选的自动补全操作吧。最后还有，找找看有没有更好的把CSS中的修改保存到我的代码中的方法。最后这个要求属于比较高级的要求，我并不知道它是否可行，更不知道这个好方法应该是个什么样子，我就是想让整个工作过程更加的流畅一些:P。

Metrics（尺寸大小）

啧啧，一下子说了这么多内容！花点时间摆弄摆弄这些东西吧。摆弄的差不多了，我们就来看下一项内容：Metrics。如果你还不熟悉CSS的盒子模型（Box Model），那就先去看看这篇非常棒的指南。

Metrics部分显示的是浏览器是如何按照内容的尺寸、填充空间（padding）、边框（border）和边距（margin）来渲染（render）节点的。这个工具用来调试位置/尺寸问题。

Metrics面板有一个非常好用的小技巧，覆盖在所选节点之上的那个半透明的蓝色盒子可以用来显示出填充空间和边距，从而帮助你看明白盒子是如何影响流（flow）的。

蓝色部分表示的是内容，绿色部分是填充空间，橘色部分是边距。

事件侦听器（Event Listener）

我们暂时先跳过属性和DOM断点这两个部分。我还没发现属性部分有什么用处，DOM断点显示的是鼠标右击节点后选定的各种“Break on …”动作。我们在Elements面板中最后要讨论的就是事件侦听器部分。

如果你为选中的节点添加了任何事件侦听器的话（用JavaSctip或者HTML的属性都可以添加），你就能在这里看到所有你所添加的侦听器。这个部分便于你想调试一个侦听器是否正确的添加到了某个节点上，还能帮你了解当侦听器得到调用后会发生什么。

单击小标题右侧的漏斗图标，可以在查看所选节点的侦听器和整个文档的侦听器之间进行切换。如果你的侦听器添加到了无法在主列表中进行选择的东西（比如window和document）上时，会非常有用。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务