亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

然冬 · 更新于 2025-02-08

調試方案

程序調試是將編制的程序投入實際運行前，用手工或編譯程序等方法進行測試，修正語法錯誤和邏輯錯誤的過程。

調試就是驗證程序的正確性或自我猜想的過程，掌握一定的調試技巧，可以觀察程序執行中的情況、快速定位 BUG 等。

前端開發者最常用、有效的調試方式就是使用瀏覽器內置的開發者工具。

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');

圖片描述

可以嘗試著修改單引號內的內容，會有不同的結果。

以上就是最簡單的一句 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>
運行案例 點擊 "運行案例" 可查看在線運行效果

使用瀏覽器打開 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>
運行案例 點擊 "運行案例" 可查看在線運行效果

使用瀏覽器打開，點擊按鈕后就會展示對應的結果。

圖片描述

可以先不關心上述代碼具體的細節，只需要先了解這種方式可以將內容輸出到瀏覽器中，也可以進行調試。

5. 小結

結合開發者工具進行調試是必備技能，調試的技巧也非常多樣化，除了上述的幾種，常用的還有 斷點調試，部分特殊情況下還會利用 alert（一種會阻塞瀏覽器進程的對話框）進行調試。

不同的人使用的調試技巧也不同，有了一定的編碼經驗后就會找到適合自己的調試技巧，對語言本身有足夠的調節，才能讓自己的調試技巧更加完善。

6. 擴展

簡單的過一遍 Chrome 官方的開發者工具文檔，了解開發者工具提供了哪些功能。