快捷键还有一个小技巧可以帮你提高使用Inspector的效率，就是熟练使用键盘快捷键。 切换到Elements面板（有些其它面板会吞掉键盘敲击事件），然后键入“?”。 随后就会出现极其丑陋的平视显式格式的界面，其中列出了一个快捷键列表。最有用的快捷键是切换到Script面板的那个，随后我们再细说这些。 
检视iFrame一直以来，iFrames的调试都是摆在Web开发人员面前的一个难题。现在再也不是了！你现在可以指定想让Inspector检视哪个iFrame，指定的方法是通过下图所示的inspector底端中间部分的弹出式选择框进行。这个选择框有些稀奇，只有你对控制台进行扩展（在Elements面板下按Esc键）之后才能显示出来。 
控制台 甜心大宝贝，你环境都弄好了， 音乐也响起了，此时心必向往之。现在你需要真的做些事情了：运行命令，检查某个函数的输出结果，看看某个方法是否存在，或者看看有什么日志/错误/警告。这些都是控制台可以帮助你干的事情。 控制台可是个到处惹是生非的坏家伙，实际上它不仅仅有自己的面板，而且在任何面板中都可以通过点击界面底部左侧的“>=”图标或者按Esc键把它调出来使用。 它正好也是比较直观的功能之一： 键入一些表达式并敲回车键，然后就能看到相应的输出结果。日志按发生时间顺序显示，点击右侧的文件名就可以到达Scripts面板。但你可能还不知道，在控制台面板中使用“shift + enter”，你可以键入多行表达式。这对编写包含匿名函数或复杂语句的比较长的命令十分有帮助。你还可以在日志多得看不过来的情况下，键入“ctrl + L”清除控制台中显示的内容。 从DOM调试的角度看，控制台里比较酷的一个功能是它可同Elements面板（这个我们在下一节中进行讨论）进行集成。在Elements面板选中的元素可以便捷地通过使用 “$0”进行访问。它代表对选中元素的引用，你可以对该元素进行一些交互操作。另一方面，只要你在控制台中看到有打印出来的DOM节点，你都可以右击该节点并点击“Reveal in Elements Panel”菜单就可以在DOM中快速找到该节点了。 
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）。这真是太方便了！  |
