调试 Web：了解如何使用 Chrome Dev Tools 调试 JavaScript

IAmJoshChang

4.14/5 (4投票s)

2019年2月28日

CPOL

8分钟阅读

9606

在本文中，我们将学习：Chrome 开发者工具是什么，它提供的一些工具，如何设置断点并浏览 JavaScript，以及如何在调试器中使用控制台来帮助导航和理解代码为何按预期运行。

作为一名新的 Web 开发人员，你需要学习很多工具。虽然我们无法涵盖所有工具，但我们可以了解一下任何 Web 开发人员工具箱中可能最重要的工具：Chrome 开发者工具。

如果你不熟悉它，Chrome 开发者工具是内置在 Chrome 浏览器中的一套 Web 开发工具。每个主流浏览器都有类似的开发工具，但我将专门讨论 Chrome 开发者工具。你仍然可以在其他浏览器上跟随学习，但这不会完全匹配。

你在浏览网页时可能已经不小心打开了开发者工具，但为了完整起见，你可以通过按 F12 键或右键单击网页并选择“检查”菜单按钮来启动开发者工具。

当你打开 Chrome 开发者工具时，首先看到的是网页使用的 HTML 和 CSS。大多数人只会看到这里，但你知道 Chrome 开发者工具还能显示更多吗？

使用 Chrome 开发者工具，你可以

在“元素”选项卡中检查 HTML 和 CSS
在“控制台”选项卡中运行和执行 JavaScript
在“源代码”选项卡中检查 Web 应用使用的文件
在“网络”选项卡中查看你的网站发出的网络请求
还有更多！

要调试你的代码库，没有什么比逐步执行代码来查看发生了什么更有效的方法了。我将向你展示如何使用 Chrome 开发者工具对 JavaScript 进行此操作，就像你在任何其他编程语言中使用 IDE 一样。

为了开始学习如何使用 Chrome 开发者工具进行调试，我们将创建一个简单的待办事项列表应用。

步骤 1：创建一个简单的待办事项列表应用

在调试之前，我们需要调试的目标，所以我们将创建一个简单的待办事项列表应用。在创建任务时，我们将获取三条信息：

任务的标题（必填）
任务的截止日期（选填）
任务的描述（选填）

除了将新任务添加到我们的列表中，我们不会实现任何额外的功能。

这是我们的 HTML 页面的样子。我将其命名为 _index.html_。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>To do List</title>
  </head>
  <body>
    <div>
      <div>
        Title: <br>
        <input type="text" id="title" />
      </div>
      <div>
        Date: <br>
        <input type="date" id="date" />
      </div>
      <div>
        Description: <br>
        <textarea id="description"></textarea>
      </div>
      <button id="addButton" onclick="addTodoElement()">Submit</button>
    </div>
    <span><h1>TODO List:</h1></span>
    <div id="content"></div>
    
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

这是 HTML 在浏览器中的样子。

这个页面没有什么复杂的地方。我们拥有的五个关键 HTML 元素是：

一个文本框，供用户输入任务标题。
日期输入框，供用户输入任务的截止日期。
一个文本区域，供用户输入任务的描述。
一个提交按钮，用于添加用户任务。我们添加了一个 onclick 事件处理程序，它将调用我们的 JavaScript 函数 addTodoElement()，你可以在下面看到它。
一个内容容器 div，用于存储我们添加到应用中的所有任务。

我还创建了另一个名为 _index.js_ 的文件，其中包含当用户单击提交按钮时执行的 JavaScript。它看起来是这样的：

function addTodoElement(){
  // Get the user's inputted values
  var todoContainer = document.getElementById("content");
  var title = document.getElementById("title").value;
  var date = document.getElementById("date");
  var desc = document.getElementById("description").value;

  // If the user didn't give a title, stop the click event
  // as it's pointless to have a task without a title
  if(title == "") {
    alert("Title is required!");
    return;
  }

  // Create a new div to contain our task information
  // with basic styles
  var todoItem = document.createElement("div");
  todoItem.style.border = "solid 1px black";
  todoItem.style.marginBottom = "5px";

  // Create the HTML for the title
  var titleParagraph = document.createElement("p");
  titleParagraph.textContent = title;
  todoItem.append(titleParagraph);

  // Create the HTML for the date
  var dateParagraph = document.createElement("p");
  dateParagraph.textContent = date;
  todoItem.append(dateParagraph);
  
  // Create the HTML for the description
  var descParagraph = document.createElement("p");
  descParagraph.textContent = desc;
  todoItem.append(descParagraph);

  // Add our new task to our container
  todoContainer.append(todoItem);
}

如你所见，_index.js_ 包含一个函数。此函数读取用户的输入，创建一个任务，并将其添加到我们的网页中。

让我们尝试使用我们的应用来创建一个任务。你会得到这样的结果：