Change language
Python.Engineering Wiki Javascript 控制台

Javascript 控制台

__del__ | __main__ Python module | ast Python module | cmd Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | logging Python module | Lua PHP module | os Python module | PS PHP module | Python Development | Python functions | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | tty Python module | UI PHP module | uu Python module | warnings Python module
Michael Zippo Michael Zippo

編碼雖然很有趣，但也會變得很無聊。

當你開始編碼的時候，你會意識到有些地方不對勁，你會感到非常沮喪。當你的代碼運行時更煩人，但你不知道為什麼它不能正常工作；當您的代碼中存在需要修復的問題時。

這就是 JavaScript 控制台可以派上用場的地方。控制台允許您跟踪代碼中發生的事情。這使您可以輕鬆了解您的代碼出了什麼問題。

在本指南中，我們將了解如何使用 JavaScript 控制台。我們還將提供一個使用控制台的示例應用程序，以便您快速掌握 JavaScript 控制台。

JavaScript 控制台

開發者，見識一下控制台。在您作為開發人員期間，您將在控制台上花費大量時間，因此您需要熟悉這些內容。

控制台是您可以查看消息的地方當您的應用程序正在運行時，您可以在哪裡操作網頁的內容。

您可以告訴您的代碼將消息記錄到控制台，當指向它們時它們會顯示出來。您還可以使用控制台修改變量、值，並檢查存儲在變量中的值。

要顯示您的控制台，您需要打開開發人員工具。在 Chrome 中，您可以在 Windows 上使用 Ctrl + Shift + I 或在 Mac 上使用 Cmd + Alt + I 來執行此操作。在 Firefox 中，您可以使用 Command + Option + K 打開開發者工具。

控制台介紹

我們將首先在控制台中顯示一條消息。我們甚至無需打開網頁即可執行此操作。只需打開瀏覽器控制台並編寫您要運行的 JavaScript 指令即可。

您將在控制台中使用三種主要方法：

  • console.log()：向控制台顯示消息。
  • console.warn()：在控制台顯示警告。
  • console.error ()：在控制台中顯示錯誤。

在繼續之前，您不應在不知道代碼用途的情況下將任何內容粘貼到控制台中。許多現代網站都會警告您因為有些騙局使用控制台獲取敏感用戶信息的訪問權限。< br>

話雖如此， 我們走吧 ！要在控制台上顯示消息，可以使用以下代碼：

只要你運行這個命令，就會返回以下內容。

你也可以在控制台查看錯誤和警告錯誤和警告的區別和傳統的 log() 語句是錯誤和警告分別顯示為橙色和紅色：

我們的代碼返回：意大利

這段代碼顯示了我們網頁上的四個元素: 標題、遊戲描述、一杯茶的圖片和一條消息，通知用戶他們點擊了這杯茶的次數。

我們還添加了一些樣式到我們的代碼中以使其更有吸引力。創建一個名為“styles.css”的文件並粘貼它代碼：

這些樣式為我們的茶點遊戲創建了一個盒子，設置點擊將顏色設置為黃色，並為我們的圖像創建圓角。這就是我們的網頁現在的樣子：

當你點擊那杯茶時，什麼也沒有發生。這是因為我們還沒有添加我們的 JavaScript 代碼。讓我們為我們的應用程序編寫 JavaScript 代碼。

使用 JavaScript 添加功能

當用戶點擊茶杯時，計數器應該增加一。在我們增加計數器之前，我們需要選擇我們要使用的 DOM 元素：圖像和計數器。 DOM 元素或文檔對像模型是我們網頁 Web 上的標籤。

我們還將定義一個變量來跟踪茶杯的點擊次數：

我們的下一步是創建一個函數，該函數在我們的按鈕被點擊時進行註冊，並將我們的計數器加一。我們可以使用以下代碼來做到這一點：

第一行會將控制台消息“The button was clicked”打印到控制台。接下來，讓我們將“點擊”計數器加 1。然後，我們更改 標記中的文本內容，以反映使用 innerText 方法更新的點擊次數。

我們看看我們的網頁，點擊茶杯圖片：

這就是，當你對我們的增量茶杯點擊- 一。此外，我們在代碼中指定的消息會打印在控制台上。這有助於我們了解用戶何時點擊了茶杯。

雖然這是 console.log () 的基本實現，但在更大的應用程序中您可以看到離子記錄被廣泛使用。大多數情況下，日誌只保存在應用程序的開發版本中。這是因為用戶不需要看到幕後發生的事情。也就是說，對於開發人員來說，日誌記錄仍然是一個非常有價值的工具。

結論

控制台是一個工具，您可以使用它來了解您的代碼是如何工作的。您可以使用它在代碼運行時顯示調試消息或跟踪警告和錯誤。

只有在開發自己的應用程序或想要創建自定義錯誤消息時才應使用註冊說明用於調試的代碼。您不應在在線可用的 Web 應用程序中保留太多日誌。