调试方案-知识专区-汉码未来

当前位置：前端开发 > 调试方案

admin · 更新于 2021-08-06

1. 开发者工具

Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。

开发者工具内置在 Chrome 浏览器中。

如果还未安装 Chrome 浏览器，可以点击这里获取。

以下方式可以打开开发者工具：

在 Chrome 菜单中选择：更多工具 > 开发者工具
在页面中任意位置上右键点击，在菜单中选择 “检查”
Windows 下使用快捷键 Ctrl+Shift+I，Mac下使用快捷键 Option + Command + I

控制台界面

章节中主要会使用到 Console面板 (上图中第二个高亮的选项)来查看输出的日志等，结合日志来进行分析调试。

2. console 对象

console对象 连接了用户与开发者工具中的 Console面板，使用 console对象 可以输出内容至 Console面板，主要用于输出日志，便于调试。

console对象 通常要结合 Console面板 来使用，通常也会称呼其为 控制台，为了防止 Console对象 与 Console 面板在称呼上的混乱，之后都会称其为 控制台。

例如想在控制台中输出 JavaScript ，输入以下内容到控制台的光标处并回车即可。

console.log('JavaScript');代码块
1

可以尝试着修改单引号内的内容，会有不同的结果。

以上就是最简单的一句 JavaScript 代码，意思就是调用 Console 对象下的 log 方法，并传递字符串 JavaScript 给 log 方法。

代码末尾还可以见到一个分号，在 JavaScript 中分号用来表示一行代码的结束。但是也可以不加分号，大多数情况下用换行符也可以作为一行代码结束的标志。

这里不需要理解是什么意思，只需要知道这样可以往控制台输出内容。

3. 将 JavaScript 写在 HTML 中

学习过 HTML 的读者知道，浏览器可以直接打开 HTML 文件。

我们可以使用 <script></script> 标签包裹 JavaScript 代码，然后使用浏览器打开，就可以让 JavaScript 代码通过 HTML 运行在浏览器中。

同样的，想在控制台输出一段内容，就可以先新建一个，或者在已有的一个 HTML 文件中加入 script 标签，然后在标签中书写 JavaScript 代码。

实例演示

<!DOCTYPE html><html><head>
  <meta charset="UTF-8"></head><body>
  <p>我是一个段落</p>

  <script>
    console.log('JavaScript');
  </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13

运行案例点击 "运行案例" 可查看在线运行效果

使用浏览器打开 HTML 文件就可以观察到控制台有输出的内容，被 script 标签包裹的代码会被浏览器自动执行。

注意：章节中的内容如果没有使用到 HTML，默认就是将 JavaScript 代码书写在 script 标签中，防止不必要的代码增加篇幅

4. 通过操作 DOM 进行调试

DOM 可以先简单地理解成浏览器将 HTML 解析后构建的一颗树，树上的每一个节点就是一个 DOM 节点。

注意：有的时候可以听到HTML上的一个标签就是一个DOM节点这样的概念，其实这是错误的，HTML 只是一段有格式的文本，浏览器解析后才会变成一颗 DOM 树。

通过操作 DOM，也可以达到调试的效果。

例如想要做个简单的抽奖程序，就可以使用以下代码：

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>包中抽奖</title>
  <style>
    .start {
      border: 1px solid #4caf50;
      background: transparent;
      font-size: 18px;
      padding: 8px 22px;
      color: #4caf50;
      outline: none;
      border-radius: 2px;
      cursor: pointer;
    }

    .start:active {
      background: #4caf50;
      color: white;
    }

    .lottery {
      font-size: 22px;
      color: red;
    }

    .prize {
      color: red;
      font-size: 22px;
    }
  </style></head><body>
  <div>
    <button class="start">戳我抽奖!</button>
  </div>
  <div class="result">
  </div>
  <script>
    var prizeList = ['5年高考3年模拟', '加班一天', '快乐水一罐'];

    var startBtn = document.querySelector('.start');
    var resultEle = document.querySelector('.result');

    startBtn.addEventListener('click', function() {
      var prize = Math.floor(Math.random() * 3 + 1);

      var text = [
      '恭喜！抽到了 ',
      '<span class="lottery">',
      prize,
      '</span>',
      ' 等奖！奖品是 ',
      '<span class="prize">',
      prizeList[prize - 1],
      '</span>',
      '！',
      ].join('');

      resultEle.innerHTML = text;
    });
  </script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66