主控台總覽

本頁說明 Chrome 開發人員工具控制台如何協助您輕鬆開發網頁。控制台 有 2 種主要用途:查看記錄的訊息執行 JavaScript

查看記錄的訊息

網頁程式開發人員經常會將訊息記錄到「控制台」,以確保其 JavaScript 可以正常運作 。如要記錄訊息,請在您的console.log('Hello, Console!') JavaScript。當瀏覽器執行 JavaScript 並查看類似運算式時, 並應將訊息記錄到控制台。舉例來說,假設您在 編寫網頁 HTML 和 JavaScript 的程序:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

圖 1 顯示載入頁面並等待 3 秒後,控制台的外觀。請嘗試 找出造成瀏覽器記錄訊息的程式碼。

控制檯面板。

圖 1. 控制檯面板。

網頁程式開發人員記錄訊息的常見原因有 2 種:

  • 確認程式碼以正確順序執行。
  • 檢查特定時間點的變數值。

請參閱開始使用 Logging 訊息,實際體驗記錄功能。請參閱管理中心 API 參考資料,瀏覽 console 方法的完整清單。 方法就是顯示您記錄的資料的方式。

執行 JavaScript

控制台也是 REPL。您可以在控制台中執行 JavaScript 與網頁互動 找到你正在檢查的元件例如,圖 2 顯示開發人員工具首頁旁邊的主控台。 和圖 3 顯示,使用控制台變更頁面標題後,擁有相同頁面的網頁。

開發人員工具首頁旁邊的控制檯面板。

圖 2. 開發人員工具首頁旁邊的控制檯面板。

使用控制台變更頁面標題。

圖 3. 使用控制台變更頁面標題。

您可以在控制台修改頁面,因為「控制台」具有該頁面的完整存取權 window。開發人員工具提供幾項便利功能,可讓您更輕鬆地檢查網頁。適用對象 例如,假設您的 JavaScript 包含名為 hideModal 的函式。執行中 debug(hideModal) 會在下次呼叫 hideModal 時,暫停程式碼的第一行。 如要查看公用程式函式的完整清單,請參閱 Console Utilities API 參考資料

執行 JavaScript 時,您不必與網頁互動。您可以使用 Cloud 控制台 與網頁無關的新程式碼舉例來說,假設您剛學到 JavaScript 陣列方法 map(),而您想要實驗看看。控制台是一個好事 試用這項功能

請參閱開始執行 JavaScript,親自體驗在 。