如何使用 JavaScript 開發(fā)者控制臺
介紹
現(xiàn)代瀏覽器具有內(nèi)置的開發(fā)工具，可與 JavaScript 和其他 Web 技術(shù)一起使用。這些工具包括類似于 shell 界面的控制臺，以及檢查 DOM、調(diào)試和分析網(wǎng)絡(luò)活動的工具。
控制臺可用于在 JavaScript 開發(fā)過程中記錄信息，并允許我們通過在頁面上下文中執(zhí)行 JavaScript 表達(dá)式來與網(wǎng)頁交互。本質(zhì)上，控制臺為我們提供了按需編寫、管理和監(jiān)控 JavaScript 的能力。
本教程將介紹如何在瀏覽器上下文中使用 JavaScript 中的控制臺，并可以在 Web 開發(fā)過程中使用的其他內(nèi)置開發(fā)工具。
在瀏覽器中使用控制臺
大多數(shù)支持基于標(biāo)準(zhǔn)的 HTML 和 XHTML 的現(xiàn)代 Web 瀏覽器將為開發(fā)人員提供控制臺的訪問權(quán)限，我們可以在該控制臺中使用類似于終端 shell 的界面使用 JavaScript。我們將介紹如何在 Firefox 和 Chrome 中訪問控制臺。
FireFox
要在 FireFox 中打開 Web 控制臺，我們可以導(dǎo)航到地址欄旁邊右上角的?菜單。
從那里，單擊由扳手圖標(biāo)表示的 Developer 按鈕，這將打開 Web Developer 菜單。打開后，單擊 Web 控制臺菜單項(xiàng)。
完成后，將在瀏覽器窗口底部打開一個窗口：
我們還可以在 Linux 和 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + K 或在 macOS 上使用 COMMAND + OPTION + K 進(jìn)入 Web 控制臺。
現(xiàn)在我們已經(jīng)訪問了控制臺，我們可以開始在 JavaScript 中工作了。
Chrome
要在 Chrome 中打開 JavaScript 控制臺，我們可以導(dǎo)航到瀏覽器窗口右上角的菜單，該菜單由三個連續(xù)的垂直點(diǎn)表示。從那里，我們可以選擇更多工具，然后選擇開發(fā)人員工具。
這將打開一個面板，我們可以在其中單擊頂部菜單欄上的控制臺以調(diào)出 JavaScript 控制臺（如果它尚未突出顯示）：
你還可以在 Linux 或 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + J 或在 macOS 上使用 COMMAND + OPTION + J 進(jìn)入 JavaScript 控制臺，這將立即將焦點(diǎn)帶到控制臺。
現(xiàn)在我們已經(jīng)訪問了控制臺，我們可以開始在 JavaScript 中工作了。
在控制臺中工作
在控制臺中，我們可以鍵入 JavaScript 代碼。
讓我們從一個字符串 Hello, World! 的警報(bào)開始，代碼如下：
alert("Hello, World!");
在您的 JavaScript 行之后按 ENTER 鍵后，您應(yīng)該會在瀏覽器中看到以下警報(bào)彈出窗口：
請注意，控制臺還將計(jì)算表達(dá)式的結(jié)果，當(dāng)表達(dá)式未顯式返回某些內(nèi)容時，該結(jié)果將讀取為未定義。
我們可以通過使用 console.log 將 JavaScript 記錄到控制臺來使用 JavaScript，而不是讓我們需要繼續(xù)單擊退出的彈出警報(bào)。
輸出 Hello, World! 字符串，我們可以在控制臺中輸入以下內(nèi)容：
console.log("Hello, World!");
在控制臺中，我們將收到以下輸出：
Hello, World!
我們還可以使用 JavaScript 在控制臺中執(zhí)行數(shù)學(xué)運(yùn)算：
console.log(2 + 6);
//Output
8
我們還可以嘗試一些更復(fù)雜的數(shù)學(xué)運(yùn)算：
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)
如果我們需要修改通過控制臺傳遞的命令，可以鍵入鍵盤上的向上箭頭 ↑ 鍵以檢索上一個命令。這將允許我們編輯命令并再次發(fā)送。
JavaScript 控制臺通過讓我們使用類似于終端 shell 界面的環(huán)境，為我們提供了一個實(shí)時試用 JavaScript 代碼的空間。
使用 HTML 文件
我們還可以在 HTML 文件或控制臺中動態(tài)呈現(xiàn)的頁面的上下文中工作。這為我們提供了在現(xiàn)有 HTML、CSS 和 JavaScript 的上下文中試驗(yàn) JavaScript 代碼的機(jī)會。
請記住，一旦我們在使用控制臺修改頁面后重新加載頁面，它將返回到我們修改文檔之前的狀態(tài)，因此請確保保存想要保留在其他地方的任何更改。
讓我們以一個空白的 HTML 文檔為例，比如下面的 index.html 文件來了解如何使用 Console 來修改它。在我們喜歡的文本編輯器中，創(chuàng)建一個 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 文件，并將其加載到您選擇的瀏覽器中，您應(yīng)該會看到一個空白頁面，該頁面的標(biāo)題為今天的日期。
然后，您可以打開控制臺并開始使用 JavaScript 來修改頁面。我們將首先使用 JavaScript 在 HTML 中插入標(biāo)題。
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>"
此時，您的頁面應(yīng)類似于以下內(nèi)容：
我們還可以繼續(xù)修改頁面的樣式，比如背景顏色：
document.body.style.backgroundColor = "lightblue";
// Output
"lightblue"
以及頁面上文字的顏色：
document.body.style.color = "white";
// Output
"white"
現(xiàn)在您的頁面將如下所示：
從這里，我們可以創(chuàng)建一個 <p> 段落元素：
let p = document.createElement("P");
創(chuàng)建此元素后，我們可以繼續(xù)創(chuàng)建一個文本節(jié)點(diǎn)，然后我們可以將其添加到段落中：
let t = document.createTextNode("Paragraph text.");
我們將通過將文本節(jié)點(diǎn)附加到變量 p 來添加它：
p.appendChild(t);
最后附加 p 及其段落 <p> 元素并將文本節(jié)點(diǎn)附加到文檔：
document.body.appendChild(p);
完成這些步驟后，您的 HTML 頁面 index.html 將如下所示：
控制臺為我們提供了一個試驗(yàn)修改 HTML 頁面的空間，但重要的是要記住，當(dāng)我們在控制臺上執(zhí)行操作時，我們不會更改 HTML 文檔。在這種情況下，一旦我們重新加載頁面，它將返回到一個空白文檔。
了解其他開發(fā)工具
根據(jù)您使用的瀏覽器開發(fā)工具，您將能夠使用其他工具來幫助您的 Web 開發(fā)工作流程。讓我們來看看其中的一些工具。
DOM——文檔對象模型
每次加載網(wǎng)頁時，它所在的瀏覽器都會創(chuàng)建該頁面的文檔對象模型或 DOM。
DOM 是一棵對象樹，并在分層視圖中顯示 HTML 元素。DOM 樹可以在 Firefox 的 Inspector 面板或 Chrome 的 Elements 面板中查看。
這些工具使您能夠檢查和編輯 DOM 元素，還可以讓您識別與特定頁面的某個方面相關(guān)的 HTML。DOM 可以告訴您文本片段或圖像是否具有 ID 屬性，并且可以讓您確定該屬性的值是什么。
在我們重新加載頁面之前，我們在上面修改的頁面將有一個與此類似的 DOM 視圖：
此外，我們將在側(cè)面板或 DOM 面板下方看到 CSS 樣式，讓您可以查看 HTML 文檔中使用的樣式或通過 CSS 樣式表使用的樣式。這是我們上面的示例頁面在 Firefox Inspector 中的正文樣式：
要實(shí)時編輯 DOM 節(jié)點(diǎn)，請雙擊選定元素并進(jìn)行更改。例如，首先，您可以修改 <h1> 標(biāo)記并將其設(shè)為 <h2> 標(biāo)記。
與控制臺一樣，如果您重新加載頁面，您將返回 HTML 文檔的已保存狀態(tài)。
網(wǎng)絡(luò)
瀏覽器內(nèi)置開發(fā)工具的網(wǎng)絡(luò)選項(xiàng)卡可以監(jiān)控和記錄網(wǎng)絡(luò)請求。此選項(xiàng)卡向您顯示瀏覽器發(fā)出的網(wǎng)絡(luò)請求，包括加載頁面的時間、每個請求所需的時間，并提供每個請求的詳細(xì)信息。這可用于優(yōu)化頁面加載性能和調(diào)試請求問題。
您可以使用 JavaScript 控制臺旁邊的網(wǎng)絡(luò)選項(xiàng)卡。也就是說，您可以使用控制臺開始調(diào)試頁面，然后切換到網(wǎng)絡(luò)選項(xiàng)卡以查看網(wǎng)絡(luò)活動，而無需重新加載頁面。
響應(yīng)式設(shè)計(jì)
當(dāng)網(wǎng)站具有響應(yīng)性時，它們的設(shè)計(jì)和開發(fā)都是為了在一系列不同的設(shè)備上正常顯示和運(yùn)行：手機(jī)、平板電腦、臺式機(jī)和筆記本電腦。屏幕尺寸、像素密度和支持觸控是跨設(shè)備開發(fā)時需要考慮的因素。作為 Web 開發(fā)人員，牢記響應(yīng)式設(shè)計(jì)原則非常重要，這樣您的網(wǎng)站對人們完全可用，無論他們可以訪問何種設(shè)備。
Firefox 和 Chrome 都為您提供了確保在創(chuàng)建和開發(fā) Web 站點(diǎn)和應(yīng)用程序時關(guān)注響應(yīng)式設(shè)計(jì)原則的模式。這些模式將模擬不同的設(shè)備，您可以在開發(fā)過程中對其進(jìn)行調(diào)查和分析。
總結(jié)
本教程提供了在現(xiàn)代 Web 瀏覽器中使用 JavaScript 控制臺的概述，以及有關(guān)您可以在工作流程中使用的其他開發(fā)工具的一些信息。
