调试方案

程序调试是将编制的程序投入实际运行前，用手工或编译程序等进行测试，修正语法和逻辑的过程。

调试就是验证程序的正确性或自我猜想的过程，掌握一定的调试技巧，可以观察程序执行中的情况、定位 BUG 等。

前端开发者最常用、有效的调试方式就是使用浏览器内置的开发者工具。

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

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

如果还未安装 Chrome 浏览器，可以。

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

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

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

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

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

console.log('JavaScript');

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

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

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

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

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

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

同样的，想在控制台一段，就可以先新建，或者在已有的 HTML 中加入 script ，然后在中书写 JavaScript 。

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

  <script>
    console.log('JavaScript');
  </script>
</body>
</html>

使用浏览器打开 HTML 就可以观察到控制台有的，被 script 包裹的会被浏览器执行。

注意：章节中的如果没有使用到 HTML，认就是将 JavaScript 书写在 script 中，防止不必要的篇幅

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

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

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

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

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

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

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

    .prize {
      color: red;
      font-size: px;
    }
  </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() *  + );

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

      resultEle.innerHTML = text;
    });
  </script>
</body>
</html>

使用浏览器打开，点击按钮后就会展示对应的结果。

可以先不关心上述具体的细节，只需要先了解这种方式可以将到浏览器中，也可以进行调试。

结合开发者工具进行调试是必备技能，调试的技巧也非常多样化，除了上述的几种，常用的还有 断点调试，部分特殊情况下还会利用 alert（一种会阻塞浏览器进程的对话框）进行调试。

不同的人使用的调试技巧也不同，有了一定的编码经验后就会找到适合自己的调试技巧，对语言本身有足够的调节，才能让自己的调试技巧更加完善。

简单的过一遍 Chrome 官方的，了解开发者工具提供了哪些。

←学习环境准备

JavaScript 变量→

调试方案

您的鼓励是对我最大的支持