console.log 不是调试器。它很适合用于找出你的 JavaScript 应用程序在做什么，但它仅限于输出最少的信息量。如果你的代码很复杂，你需要一个合适的调试器。这就是为什么我们在 Firefox DevTools Playground 添加了一个新部分，专门针对 调试。我们构建了四个基础课程，这些课程使用 Firefox 调试器来检查和修复一个简单的 JavaScript 待办事项应用程序。

介绍调试器 Playground

这些课程完全免费，待办事项应用程序代码可以 从 GitHub 下载。

这些课程是我们的一种新格式，我们很高兴能把它们带给你们。我们一直在寻找新的方法来帮助开发者学习东西并改进日常工作流程。如果你有任何想法，请告诉我们。我们将在未来几个月扩展 Playground，我们很乐意听到来自像你这样的开发者的意见。

如果你不熟悉 Firefox 调试器，请查看 MDN 上的 调试器文档，并观看这个简短的介绍视频

现在让我们来看看新调试器 Playground 中的一个课程。你是否曾经使用 console.log 来查找变量的值？使用调试器有一个更简单、更准确的方法。

使用调试器查找变量的值

使用 Firefox 调试器查找变量比使用 console.log 更容易。以下是它的工作原理

让我们来看看一个简单的待办事项应用程序。在新标签页中打开待办事项应用程序。

这个应用程序有一个名为 addTodo 的函数，它将获取输入表单的值，创建一个对象，然后将该对象推送到任务数组中。让我们通过添加一个新任务来测试它。你希望看到这个新任务被添加到列表中，但相反，你看到了“[object HTMLInputElement]”。

有些地方出了问题，我们需要调试代码。你可能会想要在整个函数中添加 console.log，以找出问题所在。这种方法可能看起来像这样

const addTodo = e => {
 e.preventDefault();
 const title = document.querySelector(".todo__input");
 console.log('title is: ', title);
 const todo = { title };
 console.log('todo is: ', todo');

items.push(todo);
 saveList();
 console.log(‘The updated to-do list is: ‘, items);
 document.querySelector(".todo__add").reset();
 };

这可以奏效，但它很繁琐且笨拙。我们还必须记住在修复代码后删除这些行。使用调试器有一个更好的方法，使用被称为断点的方法…

在调试器 Playground 上了解更多

调试器 Playground 涵盖了使用 Firefox 调试器的基础知识，包括检查调用栈、设置条件断点等等。我们知道使用调试器（以及调试 JavaScript）有一个陡峭的学习曲线，所以我们精心制作了一个简单的待办事项应用程序，易于理解和解码。它也适合在你的浏览器中运行，以便在你的工作日中保持进度。这个应用程序可以从 GitHub 上 这里下载。获取它，然后转到 Playground 浏览那里的课程。

让我们知道你接下来想看到什么。我们正在制作关于最新 Web 技术的新课程，我们很乐意听到你的意见。请在下面的评论中发表。