如何掌握超实用的JavaScript调试技巧？

本文共计3243个文字，预计阅读时间需要13分钟。

本章节为家长带来关于JavaScript的相关知识，主要介绍了JavaScript的调试技巧，包括Sources面板、设置断点等相关问题，希望对家长有所帮助。

相关推荐：- JavaScript视频教程- 作为JavaScript调试技巧的延伸学习

本篇文章给大家带来了关于javascript中的相关知识，其中主要介绍了JavaScript的调试技巧，包括了Sources面板、设置断点等相关问题，希望对大家有帮助。

相关推荐：javascript视频教程

作为前端开发，我们会经常使用 console.log() 来调试程序中的问题。虽然这种方式也能解决一部分问题，但是它的效率不如能执行逐步调试的工具。本文就来学习一下如何使用 Google Chrome developer tools 轻松调试 JavaScript 代码。

多数浏览器都提供了DevTools 供我们调试 JavaScript 应用程序，并且它们的使用方式类似，只要我们学会了如何在一个浏览器上使用调试工具，就很容易在其他浏览器上使用它。

以下就以 Greet Me 程序为例，这个程序非常简单，只需输入名字和愿望，最后会输出一句话：

当输入两个表单值之后，“愿望”部分没有正确打印，而是打印出了NaN。代码在线调试：greet-me-debugging.vercel.app/。接下来，就看看 Chrome DevTools 有什么功能可以调试定位代码的问题。

一、了解 Sources 面板

DevTools 提供了许多不同的工具供我们进行调试，包括 DOM 检查、分析和网络调用检查等。这里要说的是 Sources 面板，它可以帮助我们调试 JavaScript。