JavaScript - 控制檯物件

視窗控制檯物件

在 JavaScript 中，'console' 物件是 window 物件的一個屬性。它允許開發者訪問瀏覽器的除錯控制檯。

console 物件包含用於不同功能的各種方法。在 Node.js 中，console 物件用於與終端互動。

我們可以使用 window 物件訪問 console 物件，也可以不使用 window 物件 - window.console 或簡寫為 console。

控制檯物件方法

console 物件上有很多可用方法。這些方法用於執行許多工，例如測試、除錯和日誌記錄。

您可以使用以下語法訪問 'console' 物件的方法：

window.console.methodName();
OR
console.methodName();

您可以在控制檯中觀察輸出。要開啟控制檯，請使用 Ctrl + Shift + I 或 Cmd + Shift + I 鍵。

下面，我們將介紹 console 物件的一些方法及其示例。

JavaScript console.log() 方法

您可以使用 console.log() 方法在除錯控制檯中列印訊息。它接受表示式或文字訊息作為引數。

語法

請遵循以下語法使用 console.log() 方法。

console.log(expression);

在上述語法中，表示式可以是變數、數學表示式、字串等，您需要在控制檯中列印這些內容。

示例

在下面的程式碼中，單擊按鈕將呼叫 'printMessage' 函式。該函式在控制檯中列印字串文字和數字值。

<html>
<body>
   <h2> JavaScript console.log() Method </h2>
   <button onclick = "printMessage()"> Print Message in Console </button>
   <p> Please open the console before you click "Print Message in Console" button</p> 
   <script>
      function printMessage() {
         console.log("You have printed message in console!");
         let num = 10;
         console.log(num);
      }
   </script>
</body>
</html>

JavaScript console.error() 方法

console.error() 方法在控制檯中列印錯誤訊息，並以紅色背景突出顯示錯誤。

語法

請遵循以下語法使用 console.error() 方法。

console.error(message);

console.error() 訊息接受訊息作為引數。

示例

在下面的程式碼中，當您單擊按鈕時，printError() 函式會在控制檯中記錄錯誤。您可以看到以紅色背景突出顯示的錯誤。

<html>
<body>
   <h2> JavaScript console.error() Method </h2>
   <button onclick="printError()"> Print Error Message in Console </button>
   <p> Please open the console before you click " Print Error Message in Console" button.</p> 
   <script>
      function printError() {
         console.error("Error occured in the code!");
      }
   </script>
</body>
</html>

JavaScript console.clear() 方法

console.clear() 方法清除控制檯。

語法

請遵循以下語法使用 console.clear() 方法。

console.clear()

示例

在下面的程式碼中，我們向控制檯列印訊息。之後，當您單擊按鈕時，它將執行 clearConsole() 函式並使用 console.clear() 方法清除控制檯。

<html>
<body>
   <h2> JavaScript console.clear() Method </h2>
   <button onclick = "clearConsole()"> Clear Console </button>
   <p> Please open the console before you click "Clear Console" button</p> 
   <script>
      console.log("Hello world!");
      console.log("Click the button to clear the console.");
      function clearConsole() {
         console.clear();
      }
   </script>
</body>
</html>

控制檯物件方法列表

在這裡，我們列出了 console 物件的所有方法。

方法	方法描述
assert()	如果作為引數傳遞的斷言為假，則在控制檯中列印錯誤訊息。
clear()	清除控制檯。
count()	用於計算在特定位置呼叫 count() 方法的次數。
error()	在控制檯中顯示錯誤訊息。
group()	用於在控制檯中建立一組訊息。
groupCollapsed()	用於在控制檯中建立一個新的摺疊的訊息組。
groupEnd()	用於結束組。
info()	它在控制檯中顯示資訊性或重要訊息。
log()	它將訊息列印到輸出。
table()	它以表格格式在控制檯中顯示資料。
time()	它用於在控制檯中啟動計時器。
timeEnd()	它停止由 time() 方法啟動的計時器。
trace()	它在控制檯中顯示堆疊跟蹤。
warn()	它在控制檯中顯示警告訊息。

列印頁面