开发者工具调试

Console控制台

F12打开控制台

• 选择其他tab面板时，ESC打开Console面板
• enter直接执行Console的代码，shift+Enter输入多行代码

Source面板

1. 左键单机行号设置断点，或在代码中添加debugger;
2. 右键单机行号设置条件断点（条件表达式为true时触发）
3. F5刷新执行代码，执行到断点处暂停

请打开右侧的信息下拉列表（箭头指示出的地方）。这里允许你查看当前的代码状态：

1. 察看（Watch） —— 显示任意表达式的当前值。
   你可以点击加号 + 然后输入一个表达式。调试器将显示它的值，并在执行过程中自动重新计算该表达式。

2. 调用栈（Call Stack） —— 显示嵌套的调用链。
   此时，调试器正在 hello() 的调用链中，被 index.html 中的一个脚本调用（这里没有函数，因此显示 “anonymous”）
   如果你点击了一个堆栈项，调试器将跳到对应的代码处，并且还可以查看其所有变量。

3. 作用域（Scope） —— 显示当前的变量。
   Local 显示当前函数中的变量，你还可以在源代码中看到它们的值高亮显示了出来。
   Global 显示全局变量（不在任何函数中）。
   这里还有一个 this 关键字

跟踪执行