断点 单击代码区左侧的侧边栏中的行号（line number）会插入一个断点。如果你的应用执行到了这一行代码，就会暂停执行后弹出脚本面板，并高亮显示本行代码。随后，你便可以查看调用栈，能够访问到的变量，还可以查看/修改对象。这个就是调试JavaScript代码问题的主要工作流程。 你偶尔可能会想调试热点代码(hot code，执行次数非常之多的代码)中出现的问题。这时插入断点就会非常麻烦，因为在执行过程中你不得不经常点击“Continue（继续执行）”按钮。通常在这种情况下，我会用类似“window.foo = true”和“window.foo = false”这样的条件来过滤想要调试的函数执行情况。鼠标右键点击断点，单击 “Edit Breakpoint（编辑断点）”菜单，就可以在文本输入框中输入“window.foo”。这是告诉Inspector，只有在window.foo取值为true的情况下才暂停执行。  现在，你加好了断点，刷新了页面，脚本执行暂停了下来。接下来的事就会非常有意思了。 第一个要注意的是侧边栏的“Watched Expressions（受监视的表达式）”。如果你非常关系某些表达式的值 (比如“MyApp.someController.property === ‘some value’”)，那就应该把它加入到“Watched Expressions”中，这样你就不用为了看它取的什么值而在控制台中一遍又一遍地输入这个表达式了。 接下来的“Scope Variables（可访问到的变量）”列出的是局部变量和全局变量。如果使用变量时用的是闭包，变量就会按照闭包进行分组显示。“Global”组列出的是“window”对象所具有的变量（这个列表可长了去了）。随着你不断的切换当前函数，这个变量列表也会随之自动更新。 既然你已经查看完了断点处你的应用的所有状态，接下来你可能想再看看别处的情况。“Continue（继续执行）”, “Step Over（单步跳过）”, “Step Into（单步进入）”以及“Step Out（单步跳出）”是你可以利用的几个好按钮。实际上，你使用它们的频率会非常之高，所以最好还是再次打开快捷键列表窗口，记住这几个按钮的快捷键。在这些列表中来来回回找东西用键盘可比用鼠标效率高多了。如果你以前就用过调试器，这些概念对你来说就不会陌生。但对于Web开发人员来讲，这些概念他们还是第一次接触。
在单步执行代码过程中定位bug或者找出代码的执行路线时。这几个都是必不可少的工具。 还有一个非常顺手的工具是在“XHR Breakpoints”部分。正如其名所示，它用来设置同XMLHttpReques对象相关的断点。这是通过在你想查看的URL中加入一个子字符串来指定断点的方法。非常好用！ 还有，在“Scope Variables”部分，你可以右击一个函数然后选择“Jump to Definition”立即跳到定义该函数的文件中定义该函数的那段代码。 时间线面板（Timeline Panel） 下一个要讲的是时间线面板。你可以已经观察到了， 每个面板都是用来调试某一类的问题的。：元素（ Elements）面板用于调试DOM和CSS方面的问题的，资源（Resources）面板用于本地存储和资源文件，网络（Network）面板用于HTTP请求，脚本（Scripts）面板用于Javascript。时间线（Timeline）面板用于调试浏览器性能方面的问题。 我所说的“浏览器性能”是什么意思？它所指的是一般都是不受你控制的东西，但它会影响你的应用的性能。对幕后发生的一切有所了解对开发日益复杂的应用来说，非常有必要。 首先要引起注意的是时间线部分。要激活时间线，就要单击“Record（记录）”按钮（在时间线面板的底端左边部分的黑色圆圈）。等它变成红色之后，就可以在你的应用中执行一个你想仔细观察的任务。如果你想弄明白为什么你的应用中滚动条滚动起来非常慢，你就可以慢慢滚动一下。如果你想弄清楚为什么你应用中的模态面板（modal panel）装载非常慢，那你就装载一次。不要担心你的动作涉及面太大后会导致时间线面板中显示的东西过多，这有几个工具能够帮你解决这个问题。  现在你得到了你所关心的任务所产生的时间线，但你关心的其实是这些数据中的一小部分。想要“Zoom in（放大）”的话，你可以在时间线上部的图形上单击鼠标后进行拖拽。然后你就能看到两个调节线，通过拖拽调节线你可以调整下部可见内容的时间范围。然后看下面的瀑布图形，你会注意到有一些橘色的横条壮胶囊图形左边有一个小箭头。点击小箭头可以展开其中的内容，包含的是触发浏览器完成任务的函数调用。如下例所示，我们可以看到发生了一个滚动条scroll时间，调用了该时间的处理程序，从而产生了一个“Recalculate Style（重新计算显示样式）”事件。如果你把鼠标悬停到侧边栏中的某项内容后，你就能看到更多的细节。  此时你可能会想知道，“那些占用了时间的紫色事件是什么意思？是重绘（Repaint）、重新计算显示样式（Recalculate Style）还是重新布局（layout）？”。这些都是浏览器对可视内容发生改变做出回应时发生的浏览器事件。例如，如果你改变了可视区域的大小尺寸或者滚动了一下滚动条，浏览器就需要做大量的工作，才能保证让所有一切看上去和你期待的情况相一致。你也可以在代码中自行调用这些事件，所以，花点时间对Inspector所显示的这些东西有所了解还是值得的，不要对DOM发生的变化想当然。 |
