英文 | https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console
翻譯 | 楊小愛
介紹
現代浏覽器具有内置的開發工具，可與 JavaScript 和其他 Web 技術一起使用。這些工具包括類似于 shell 界面的控制台，以及檢查 DOM、調試和分析網絡活動的工具。
控制台可用于在 JavaScript 開發過程中記錄資訊，并允許我們通過在頁面上下文中執行 JavaScript 表達式來與網頁互動。本質上，控制台為我們提供了按需編寫、管理和監控 JavaScript 的能力。
本教程将介紹如何在浏覽器上下文中使用 JavaScript 中的控制台，并可以在 Web 開發過程中使用的其他内置開發工具。
在浏覽器中使用控制台
大多數支援基于标準的 HTML 和 XHTML 的現代 Web 浏覽器将為開發人員提供控制台的通路權限，我們可以在該控制台中使用類似于終端 shell 的界面使用 JavaScript。我們将介紹如何在 Firefox 和 Chrome 中通路控制台。
FireFox
要在 FireFox 中打開 Web 控制台，我們可以導航到位址欄旁邊右上角的☰菜單。
從那裡，單擊由扳手圖示表示的 Developer 按鈕，這将打開 Web Developer 菜單。打開後，單擊 Web 控制台菜單項。
完成後，将在浏覽器視窗底部打開一個視窗：
我們還可以在 Linux 和 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + K 或在 macOS 上使用 COMMAND + OPTION + K 進入 Web 控制台。
現在我們已經通路了控制台，我們可以開始在 JavaScript 中工作了。
Chrome
要在 Chrome 中打開 JavaScript 控制台，我們可以導航到浏覽器視窗右上角的菜單，該菜單由三個連續的垂直點表示。從那裡，我們可以選擇更多工具，然後選擇開發人員工具。
這将打開一個面闆，我們可以在其中單擊頂部菜單欄上的控制台以調出 JavaScript 控制台（如果它尚未突出顯示）：
你還可以在 Linux 或 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + J 或在 macOS 上使用 COMMAND + OPTION + J 進入 JavaScript 控制台，這将立即将焦點帶到控制台。
現在我們已經通路了控制台，我們可以開始在 JavaScript 中工作了。
在控制台中工作
在控制台中，我們可以鍵入 JavaScript 代碼。
讓我們從一個字元串 Hello, World! 的警報開始，代碼如下：
alert("Hello, World!"); 在您的 JavaScript 行之後按 ENTER 鍵後，您應該會在浏覽器中看到以下警報彈出視窗：
請注意，控制台還将計算表達式的結果，當表達式未顯式傳回某些内容時，該結果将讀取為未定義。
我們可以通過使用 console.log 将 JavaScript 記錄到控制台來使用 JavaScript，而不是讓我們需要繼續單擊退出的彈出警報。
輸出 Hello, World! 字元串，我們可以在控制台中輸入以下内容：
console.log("Hello, World!"); 在控制台中，我們将收到以下輸出：
Hello, World! 我們還可以使用 JavaScript 在控制台中執行數學運算：
console.log(2 + 6); //Output
8 我們還可以嘗試一些更複雜的數學運算：
console.log(34348.2342343403285953845 * 4310.23409128534); //Output
148048930.17230788 此外，我們可以使用變量處理多行：
let d = new Date();
console.log("Today's date is " + d); // Output
Today's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT) 如果我們需要修改通過控制台傳遞的指令，可以鍵入鍵盤上的向上箭頭 ↑ 鍵以檢索上一個指令。這将允許我們編輯指令并再次發送。
JavaScript 控制台通過讓我們使用類似于終端 shell 界面的環境，為我們提供了一個實時試用 JavaScript 代碼的空間。
使用 HTML 檔案
我們還可以在 HTML 檔案或控制台中動态呈現的頁面的上下文中工作。這為我們提供了在現有 HTML、CSS 和 JavaScript 的上下文中試驗 JavaScript 代碼的機會。
請記住，一旦我們在使用控制台修改頁面後重新加載頁面，它将傳回到我們修改文檔之前的狀态，是以請確定儲存想要保留在其他地方的任何更改。
讓我們以一個空白的 HTML 文檔為例，比如下面的 index.html 檔案來了解如何使用 Console 來修改它。在我們喜歡的文本編輯器中，建立一個 index.html 檔案并添加以下 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 中插入标題。
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>" 您将在控制台上收到以下輸出：
// Output
"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>" 此時，您的頁面應類似于以下内容：
我們還可以繼續修改頁面的樣式，比如背景顔色：
document.body.style.backgroundColor = "lightblue"; // Output
"lightblue" 以及頁面上文字的顔色：
document.body.style.color = "white"; // Output
"white" 現在您的頁面将如下所示：
從這裡，我們可以建立一個 <p> 段落元素：
let p = document.createElement("P"); 建立此元素後，我們可以繼續建立一個文本節點，然後我們可以将其添加到段落中：
let t = document.createTextNode("Paragraph text."); 我們将通過将文本節點附加到變量 p 來添加它：
p.appendChild(t); 最後附加 p 及其段落 <p> 元素并将文本節點附加到文檔：
document.body.appendChild(p); 完成這些步驟後，您的 HTML 頁面 index.html 将如下所示：
控制台為我們提供了一個試驗修改 HTML 頁面的空間，但重要的是要記住，當我們在控制台上執行操作時，我們不會更改 HTML 文檔。在這種情況下，一旦我們重新加載頁面，它将傳回到一個空白文檔。
了解其他開發工具
根據您使用的浏覽器開發工具，您将能夠使用其他工具來幫助您的 Web 開發工作流程。讓我們來看看其中的一些工具。
DOM——文檔對象模型
每次加載網頁時，它所在的浏覽器都會建立該頁面的文檔對象模型或 DOM。
DOM 是一棵對象樹，并在分層視圖中顯示 HTML 元素。DOM 樹可以在 Firefox 的 Inspector 面闆或 Chrome 的 Elements 面闆中檢視。
這些工具使您能夠檢查和編輯 DOM 元素，還可以讓您識别與特定頁面的某個方面相關的 HTML。DOM 可以告訴您文本片段或圖像是否具有 ID 屬性，并且可以讓您确定該屬性的值是什麼。
在我們重新加載頁面之前，我們在上面修改的頁面将有一個與此類似的 DOM 視圖：
此外，我們将在側面闆或 DOM 面闆下方看到 CSS 樣式，讓您可以檢視 HTML 文檔中使用的樣式或通過 CSS 樣式表使用的樣式。這是我們上面的示例頁面在 Firefox Inspector 中的正文樣式：
要實時編輯 DOM 節點，請輕按兩下標明元素并進行更改。例如，首先，您可以修改 <h1> 标記并将其設為 <h2> 标記。
與控制台一樣，如果您重新加載頁面，您将傳回 HTML 文檔的已儲存狀态。
網絡
浏覽器内置開發工具的網絡頁籤可以監控和記錄網絡請求。此頁籤向您顯示浏覽器發出的網絡請求，包括加載頁面的時間、每個請求所需的時間，并提供每個請求的詳細資訊。這可用于優化頁面加載性能和調試請求問題。
您可以使用 JavaScript 控制台旁邊的網絡頁籤。也就是說，您可以使用控制台開始調試頁面，然後切換到網絡頁籤以檢視網絡活動，而無需重新加載頁面。
響應式設計
當網站具有響應性時，它們的設計和開發都是為了在一系列不同的裝置上正常顯示和運作：手機、平闆電腦、桌上型電腦和筆記本電腦。螢幕尺寸、像素密度和支援觸控是跨裝置開發時需要考慮的因素。作為 Web 開發人員，牢記響應式設計原則非常重要，這樣您的網站對人們完全可用，無論他們可以通路何種裝置。
Firefox 和 Chrome 都為您提供了確定在建立和開發 Web 站點和應用程式時關注響應式設計原則的模式。這些模式将模拟不同的裝置，您可以在開發過程中對其進行調查和分析。
總結
本教程提供了在現代 Web 浏覽器中使用 JavaScript 控制台的概述，以及有關您可以在工作流程中使用的其他開發工具的一些資訊。
學習更多技能
請點選下方公衆号