如何使用 JavaScript 开发者控制台

教學
JavaScript

介紹

現代瀏覽器內建了開發工具，用於處理JavaScript和其他網頁技術。這些工具包括與shell界面類似的Console，以及用於檢查DOM、調試和分析網路活動的工具。

Console可用於記錄資訊，作為JavaScript開發過程的一部分，並允許您通過在頁面上下文中執行JavaScript表達式來與網頁交互。基本上，Console提供了您隨需編寫、管理和監控JavaScript的能力。

本教程將介紹如何在瀏覽器中使用Console和JavaScript，並概述您可能在Web開發過程中使用的其他內建開發工具。

注意：隨著本教程的進行，您可能會注意到您的瀏覽器和Console在圖像示例中的外觀不同。瀏覽器經常更新，通常會包括新工具和可能是新的視覺風格。這些更新不應影響您在瀏覽器中使用Console的能力。

在瀏覽器中使用Console

大多數支援基於標準的HTML和XHTML的現代Web瀏覽器都會提供開發者控制台的訪問權限，您可以在其中使用JavaScript，界面類似於終端機shell。本部分概述了如何在Firefox和Chrome中訪問控制台。

Firefox

要在Firefox中打開Web控制台，請導航至地址欄旁邊右上角的☰選單。

選擇更多工具。選擇後，點擊Web開發者工具項目。

這樣做後，會在瀏覽器窗口底部打開一個托盤：

您還可以使用鍵盤快捷鍵CTRL + SHIFT + K（Linux和Windows），或COMMAND + OPTION + K（macOS）進入Web控制台。

現在您已經進入控制台，可以開始在其中使用JavaScript。

Chrome

要在Chrome中打開JavaScript控制台，您可以導航到瀏覽器窗口右上方的菜單，其由三個垂直點標示。從那裡，您可以選擇更多工具然後選擇開發者工具。

這將打開一個面板，您可以在頂部菜單欄上點擊控制台來打開JavaScript控制台，如果它尚未突出顯示：

您也可以使用鍵盤快捷鍵CTRL + SHIFT + J（在Linux或Windows上）或COMMAND + OPTION + J（在macOS上），這將立即將焦點轉移到控制台。

現在您已經訪問了控制台，您可以開始在其中使用JavaScript。

在控制台中工作

在控制台中，您可以輸入並執行JavaScript代碼。

從顯示字符串Hello，World！的警報開始：

  1. alert("Hello, World!");

在您的JavaScript行後按ENTER鍵後，將在您的瀏覽器中顯示警報彈出窗口：

請注意，當表達式未明確返回值時，控制台還將打印評估表達式的結果，這將讀作undefined。

相較於需要點擊關閉的彈出警告，您可以通過將其記錄到控制台中的 JavaScript 來處理。

要打印Hello, World!字符串，請在控制台中輸入以下內容：

  1. console.log("Hello, World!");

在控制台中，您將收到以下輸出：

Output
Hello, World!

您還可以在控制台中進行數學運算：

  1. console.log(2 + 6);



Output
8

您也可以嘗試一些更複雜的數學運算：

  1. console.log(34348.2342343403285953845 * 4310.23409128534);



Output
148048930.17230788

此外，您可以使用變量在多行上進行操作：

  1. let today = new Date();

  2. console.log("Today's date is " + today);



Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

如果您需要修改通過控制台傳遞的命令，可以在鍵盤上按向上箭頭（↑）鍵檢索上一個命令。這將允許您編輯命令並重新發送它。

JavaScript 控制台為您提供了一個空間，讓您可以在實時中嘗試 JavaScript 代碼，使您可以使用類似終端機外殼界面的環境。

在 HTML 文件中工作

您可以在 HTML 文件或動態渲染的頁面上下文中使用控制台。這為您提供了在現有 HTML、CSS 和 JavaScript 上下文中實驗 JavaScript 代碼的機會。

請注意，一旦您在控制台中修改頁面並重新加載它，它將返回到您修改文檔之前的狀態。請務必將任何想要保留的更改保存到其他地方。

取一個HTML文檔，比如下面的index.html文件，了解如何使用控制台來修改它。在你最喜歡的文本編輯器中，創建一個index.html文件，並添加以下HTML行：

index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

如果你保存上面的HTML文件，並將其加載到你選擇的瀏覽器中，將在瀏覽器中呈現一個標題為今天的日期的空白頁面。

打開控制台，並開始使用JavaScript來修改頁面。首先使用JavaScript將一個標題插入HTML中。

  1. let today = new Date();

  2. document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

你將在控制台中收到以下輸出：

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

你的頁面應該與以下內容類似：

你可以修改頁面的樣式，比如背景顏色：

  1. document.body.style.backgroundColor = "lightblue";



Output
"lightblue"

以及頁面上文字的顏色：

  1. document.body.style.color = "white";



Output
"white"

現在你的頁面應該顯示類似於這樣：

從這裡，你可以創建一個<p>段落元素：

  1. let p = document.createElement("P");

有了這個元素，你可以繼續創建一個可以添加到段落中的文本節點：

  1. let t = document.createTextNode("Paragraph text.");

通過將文本節點附加到變量p來添加文本節點：

  1. p.appendChild(t);

最後將p與其段落<p>元素和附加的文本節點一起附加到文檔中：

  1. document.body.appendChild(p);

完成這些步驟後，你的HTML頁面index.html將包含以下元素：

控制台為您提供了一個空間，讓您可以嘗試修改 HTML 頁面，但重要的是要記住，當您在控制台上進行操作時，您並未更改 HTML 文檔本身。一旦重新加載頁面，它將返回為空文檔。

理解其他開發工具

根據您使用的瀏覽器開發工具的不同，您將能夠使用其他工具來幫助您的 Web 開發工作流程。

DOM — 文檔對象模型

每次加載 Web 頁面時，它所在的瀏覽器都會創建一個頁面的文檔對象模型（DOM）。

DOM 是一個對象樹，顯示了 HTML 元素的層次結構。DOM 樹可以在 Firefox 的 檢查 面板或 Chrome 的 元素 面板中查看。

這些工具使您能夠檢查和編輯 DOM 元素，並且讓您識別與特定頁面的某個方面相關的 HTML。DOM 可以告訴您文字片段或圖像是否具有 ID 屬性，並幫助您確定該屬性的值是什麼。

您修改的頁面在重新加載頁面之前將具有與此類似的 DOM 視圖：

此外，您還將在 DOM 面板的側邊或下方看到 CSS 樣式，使您能夠查看 HTML 文檔中使用的樣式或通過 CSS 樣式表使用的樣式。例如，注意您的示例頁面在 Firefox Inspector 中的 body 樣式包含了什麼：

要對 DOM 节點進行實時編輯，請雙擊所選元素並進行更改。例如，您可以修改 <h1> 標記，將其改為 <h2> 標記。

與控制台一樣，如果重新加載頁面，將返回 HTML 文檔的原始保存狀態。

網絡

瀏覽器內置開發工具的 網絡 標籤可以監視和記錄網絡請求。此標籤顯示瀏覽器發出的網絡請求，包括加載頁面時，每個請求花費的時間以及每個請求的詳細信息。這可用於優化頁面加載性能並調試請求問題。

你可以在 JavaScript 控制台旁边使用「网络」选项卡。换句话说，您可以通过控制台开始调试页面，然后切换到「网络」选项卡以查看网络活动，而无需重新加载页面。

要了解如何使用「网络」选项卡的更多信息，您可以阅读有关「使用 Firefox 的网络监视器」的内容，或者「使用 Chrome 的开发者工具开始分析网络性能」的指南。

响应式设计

当网站具有响应式设计时，它们被设计和开发为在各种不同设备上正常显示和运行：手机、平板电脑、台式机和笔记本电脑。屏幕尺寸、像素密度和支持触摸都是在跨设备开发时需要考虑的因素。作为网页开发人员，重要的是要牢记响应式设计原则，以便您的网站可以在人们使用的任何设备上完全可用。

Firefox 和 Chrome 都为您提供了模式，以确保在为网络创建和开发站点和应用程序时关注响应式设计原则。这些模式将模拟不同的设备，您可以在开发过程中进行调查和分析。

閱讀有關 Firefox 的 響應式設計模式 或 Chrome 的 裝置模式 的更多信息，以了解如何利用這些工具來確保更公平地訪問 Web 技術。

結論

本教程概述了在現代 Web 瀏覽器中使用 JavaScript 控制台的工作方式，以及您可以在工作流程中使用的其他開發工具的一些信息。

要了解更多關於 JavaScript 的信息，您可以閱讀有關 數據類型、jQuery 或 D3 庫的資料。

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console