WEB前端教程：使用开发者工具调试你的代码
学会使用开发者工具调试 JavaScript 代码，并且掌握如何使用断点辅助调试，获得独立分析错误，学会处理错误技能
课程目标
学会使用开发者工具调试 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 开发者工具调试指南
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-29 15:17
- 阅读 ( 423 )
- 分类：WEB前端开发
