- F12：打开开发者工具，F12是最常见的快捷键。
- F10：刷新页面。
- F11：查看元素。
- F13：查看文档结构。
- F14：查看网络请求。
- F15：查看性能分析。
2. 使用断点调试：
- 在开发者工具中，点击“调试”选项卡，然后点击“断点”按钮，将光标放在你想要设置断点的代码行上。
- 点击“开始调试”，程序将在该行停止执行，你可以在此处检查变量的值、调用堆栈等。
3. 使用console.log进行调试：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.log(...)`，例如`console.log("Hello, World!")`，可以在控制台中输出调试信息。
4. 使用console.assert进行断言：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.assert(...)`，例如`console.assert(1 + 1 === 2, "Error: 1 + 1 should be 2")`，如果条件不成立，控制台会显示错误信息。
5. 使用console.error进行错误输出：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.error(...)`，例如`console.error("An error occurred")`，可以输出错误信息。
6. 使用console.group和console.groupEnd进行分组输出：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.group(...)`，例如`console.group('Group 1')`，可以创建一个名为"Group 1"的分组。
- 在分组内，可以使用`console.groupEnd()`来结束分组。
7. 使用console.table进行表格输出：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.table(...)`，例如`console.table([['Name', 'John'], ['Age', '25']])`，可以输出一个表格。
8. 使用console.timeStart和console.timeEnd进行时间测量：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.timeStart(...)`，例如`console.timeStart(function() { ... })`，可以开始计时。
- 在需要计时的地方，输入`console.timeEnd(...)`，例如`console.timeEnd(function() { ... })`，可以结束计时。
9. 使用console.trace进行跟踪：
- 在开发者工具中，点击“控制台”选项卡，然后输入`console.trace(...)`，例如`console.trace(function() { ... })`，可以开始跟踪函数的执行过程。
- 在需要跟踪的地方，输入`console.trace(...)`，例如`console.trace(function() { ... })`，可以结束跟踪。