使用开发者工具调试你的代码

课程目标

学会使用开发者工具调试 JavaScript 代码，并且掌握如何使用断点辅助调试，获得独立分析错误，学会处理错误技能

开发者工具

• 如何在浏览器中打开开发者工具 (opens new window) 此文档介绍如何打开开发者工具
• Chrome DevTools 文档 (opens new window) 在这里可以学习开发者工具的用法，此文档内容和涵盖了您将在 95% 的时间内使用开发人员工具的教程，您可以不需要全部学习一次，可以随意跳过您已经熟悉的元素，熟悉文档，如果在以后开发过程中遇到问题，以便您快速回来查阅。

调试技术

使用控制台 (console.log()) 可以使程序员进行快速调试,console.log() 非常适合获得即时反馈，而无需逐步执行您的功能。

• 控制台实用 API (opens new window) 控制台还有其他有用的方法，例如 console.table()，console.trace()。。。您可以在这篇文章中找到更多实用方法

调试器非常适合用于更复杂的故障排除，并且是开发人员的关键工具。您可以设置断点、在应用程序执行的任何点查看任何给定变量的值、逐行单步执行代码等等！它是一个非常有价值的工具，每个程序员都应该知道如何使用它。

• Debug JavaScript (opens new window) 本教程深入探讨 Chrome 调试器,
• 用断点暂停你的代码 (opens new window) 这里介绍了不同打断点的策略
• 查找并解决 JavaScript 代码的错误 (opens new window) MDN 一个调试实战教程，让您通过实际操作更深入掌握调试技能
• 在浏览器中调试 (opens new window) 本章节的内容足够让你上手代码调试了，但是之后，尤其是你做了大量关于浏览器的东西后

任务

现在，请你下载debuggingTask.zip (opens new window)，保存到本地，请你按照如下要求，完成页面的调试任务。

定位错误，修复错误

• 在浏览器中打开 debuggingTask.html ，并且打开 chrome 开发者工具，点击删除按钮，控制台会显示 TypeError 错误。
• 请你分析问题原因，解决此处的问题。实现页面没有方块时，点击删除按钮，控制台也不会报错。
• 根据错误提示信息定位到错误代码行，并且给问题代码行打上断点，查看 scope（作用域） 各变量的值是否符合要求,从而分析导致错误的原因。

添加 DOM 级断点

• 现在系统需要新增一个需求：点击添加方块，需要给每个方块添加一个序号文本。比如:新增第一个方块，文本显示 NO.1，添加第二个方块，文本显示 NO.2.
• 请你给添加 DOM 变化级断点 ,在新增或删除 DOM 节点时触发，从而定位到添加方块的代码行，然后修改添加方块函数实现添加序号文本功能，完成新增的需求。

测试程序运行时间

• 现在您想知道添加一个方块，和删除一个方块程序使用了多少时间来完成这两个功能。
• 请你在控制台打印出来，结果如图所示 (opens new window)

相关参考

• 在 Wes Bos 的这个JavaScript 30 视频 (opens new window)中学习 14 个技巧和窍门
• 在 Wes Bos 的此视频 (opens new window)中了解新的 Firefox 开发工具
• Chrome DevTools 开发者工具调试指南 (opens new window)