介紹

現(xiàn)代瀏覽器具有內(nèi)置的開發(fā)工具，可與 JavaScript 和其他 Web 技術(shù)一起使用。這些工具包括類似于 shell 界面的控制臺(tái)，以及檢查 DOM、調(diào)試和分析網(wǎng)絡(luò)活動(dòng)的工具。

創(chuàng)新互聯(lián)專注于泗洪企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。泗洪網(wǎng)站建設(shè)公司,為泗洪等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

控制臺(tái)可用于在 JavaScript 開發(fā)過程中記錄信息，并允許我們通過在頁(yè)面上下文中執(zhí)行 JavaScript 表達(dá)式來(lái)與網(wǎng)頁(yè)交互。本質(zhì)上，控制臺(tái)為我們提供了按需編寫、管理和監(jiān)控 JavaScript 的能力。

本教程將介紹如何在瀏覽器上下文中使用 JavaScript 中的控制臺(tái)，并可以在 Web 開發(fā)過程中使用的其他內(nèi)置開發(fā)工具。

在瀏覽器中使用控制臺(tái)

大多數(shù)支持基于標(biāo)準(zhǔn)的 HTML 和 XHTML 的現(xiàn)代 Web 瀏覽器將為開發(fā)人員提供控制臺(tái)的訪問權(quán)限，我們可以在該控制臺(tái)中使用類似于終端 shell 的界面使用 JavaScript。我們將介紹如何在 Firefox 和 Chrome 中訪問控制臺(tái)。

FireFox

要在 FireFox 中打開 Web 控制臺(tái)，我們可以導(dǎo)航到地址欄旁邊右上角的菜單。

從那里，單擊由扳手圖標(biāo)表示的 Developer 按鈕，這將打開 Web Developer 菜單。打開后，單擊 Web 控制臺(tái)菜單項(xiàng)。

完成后，將在瀏覽器窗口底部打開一個(gè)窗口：

我們還可以在 Linux 和 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + K 或在 macOS 上使用 COMMAND + OPTION + K 進(jìn)入 Web 控制臺(tái)。

現(xiàn)在我們已經(jīng)訪問了控制臺(tái)，我們可以開始在 JavaScript 中工作了。

Chrome

要在 Chrome 中打開 JavaScript 控制臺(tái)，我們可以導(dǎo)航到瀏覽器窗口右上角的菜單，該菜單由三個(gè)連續(xù)的垂直點(diǎn)表示。從那里，我們可以選擇更多工具，然后選擇開發(fā)人員工具。

這將打開一個(gè)面板，我們可以在其中單擊頂部菜單欄上的控制臺(tái)以調(diào)出 JavaScript 控制臺(tái)（如果它尚未突出顯示）：

你還可以在 Linux 或 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + J 或在 macOS 上使用 COMMAND + OPTION + J 進(jìn)入 JavaScript 控制臺(tái)，這將立即將焦點(diǎn)帶到控制臺(tái)。

現(xiàn)在我們已經(jīng)訪問了控制臺(tái)，我們可以開始在 JavaScript 中工作了。

在控制臺(tái)中工作

在控制臺(tái)中，我們可以鍵入 JavaScript 代碼。

讓我們從一個(gè)字符串 Hello, World! 的警報(bào)開始，代碼如下：

alert("Hello, World!");

在您的 JavaScript 行之后按 ENTER 鍵后，您應(yīng)該會(huì)在瀏覽器中看到以下警報(bào)彈出窗口：

請(qǐng)注意，控制臺(tái)還將計(jì)算表達(dá)式的結(jié)果，當(dāng)表達(dá)式未顯式返回某些內(nèi)容時(shí)，該結(jié)果將讀取為未定義。

我們可以通過使用 console.log 將 JavaScript 記錄到控制臺(tái)來(lái)使用 JavaScript，而不是讓我們需要繼續(xù)單擊退出的彈出警報(bào)。

輸出 Hello, World! 字符串，我們可以在控制臺(tái)中輸入以下內(nèi)容：

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

在控制臺(tái)中，我們將收到以下輸出：

Hello, World!

我們還可以使用 JavaScript 在控制臺(tái)中執(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)

如果我們需要修改通過控制臺(tái)傳遞的命令，可以鍵入鍵盤上的向上箭頭 ↑ 鍵以檢索上一個(gè)命令。這將允許我們編輯命令并再次發(fā)送。

JavaScript 控制臺(tái)通過讓我們使用類似于終端 shell 界面的環(huán)境，為我們提供了一個(gè)實(shí)時(shí)試用 JavaScript 代碼的空間。

使用 HTML 文件

我們還可以在 HTML 文件或控制臺(tái)中動(dòng)態(tài)呈現(xiàn)的頁(yè)面的上下文中工作。這為我們提供了在現(xiàn)有 HTML、CSS 和 JavaScript 的上下文中試驗(yàn) JavaScript 代碼的機(jī)會(huì)。

請(qǐng)記住，一旦我們?cè)谑褂每刂婆_(tái)修改頁(yè)面后重新加載頁(yè)面，它將返回到我們修改文檔之前的狀態(tài)，因此請(qǐng)確保保存想要保留在其他地方的任何更改。

讓我們以一個(gè)空白的 HTML 文檔為例，比如下面的 index.html 文件來(lái)了解如何使用 Console 來(lái)修改它。在我們喜歡的文本編輯器中，創(chuàng)建一個(gè) index.html 文件并添加以下 HTML 行：

如果我們保存上述 HTML 文件，并將其加載到您選擇的瀏覽器中，您應(yīng)該會(huì)看到一個(gè)空白頁(yè)面，該頁(yè)面的標(biāo)題為今天的日期。

然后，您可以打開控制臺(tái)并開始使用 JavaScript 來(lái)修改頁(yè)面。我們將首先使用 JavaScript 在 HTML 中插入標(biāo)題。

let d = new Date();
document.body.innerHTML = "
Today's date is " + d + "
"

您將在控制臺(tái)上收到以下輸出：

// Output
"
Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)
"

此時(shí)，您的頁(yè)面應(yīng)類似于以下內(nèi)容：

我們還可以繼續(xù)修改頁(yè)面的樣式，比如背景顏色：

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

// Output
"lightblue"

以及頁(yè)面上文字的顏色：

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

// Output
"white"

現(xiàn)在您的頁(yè)面將如下所示：

從這里，我們可以創(chuàng)建一個(gè)

段落元素：

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

創(chuàng)建此元素后，我們可以繼續(xù)創(chuàng)建一個(gè)文本節(jié)點(diǎn)，然后我們可以將其添加到段落中：

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

我們將通過將文本節(jié)點(diǎn)附加到變量 p 來(lái)添加它：

p.appendChild(t);

最后附加 p 及其段落

元素并將文本節(jié)點(diǎn)附加到文檔：

document.body.appendChild(p);

完成這些步驟后，您的 HTML 頁(yè)面 index.html 將如下所示：

控制臺(tái)為我們提供了一個(gè)試驗(yàn)修改 HTML 頁(yè)面的空間，但重要的是要記住，當(dāng)我們?cè)诳刂婆_(tái)上執(zhí)行操作時(shí)，我們不會(huì)更改 HTML 文檔。在這種情況下，一旦我們重新加載頁(yè)面，它將返回到一個(gè)空白文檔。

了解其他開發(fā)工具

根據(jù)您使用的瀏覽器開發(fā)工具，您將能夠使用其他工具來(lái)幫助您的 Web 開發(fā)工作流程。讓我們來(lái)看看其中的一些工具。

DOM——文檔對(duì)象模型

每次加載網(wǎng)頁(yè)時(shí)，它所在的瀏覽器都會(huì)創(chuàng)建該頁(yè)面的文檔對(duì)象模型或 DOM。

DOM 是一棵對(duì)象樹，并在分層視圖中顯示 HTML 元素。DOM 樹可以在 Firefox 的 Inspector 面板或 Chrome 的 Elements 面板中查看。

這些工具使您能夠檢查和編輯 DOM 元素，還可以讓您識(shí)別與特定頁(yè)面的某個(gè)方面相關(guān)的 HTML。DOM 可以告訴您文本片段或圖像是否具有 ID 屬性，并且可以讓您確定該屬性的值是什么。

在我們重新加載頁(yè)面之前，我們?cè)谏厦嫘薷牡捻?yè)面將有一個(gè)與此類似的 DOM 視圖：

此外，我們將在側(cè)面板或 DOM 面板下方看到 CSS 樣式，讓您可以查看 HTML 文檔中使用的樣式或通過 CSS 樣式表使用的樣式。這是我們上面的示例頁(yè)面在 Firefox Inspector 中的正文樣式：

要實(shí)時(shí)編輯 DOM 節(jié)點(diǎn)，請(qǐng)雙擊選定元素并進(jìn)行更改。例如，首先，您可以修改

標(biāo)記并將其設(shè)為

標(biāo)記。

與控制臺(tái)一樣，如果您重新加載頁(yè)面，您將返回 HTML 文檔的已保存狀態(tài)。

網(wǎng)絡(luò)

瀏覽器內(nèi)置開發(fā)工具的網(wǎng)絡(luò)選項(xiàng)卡可以監(jiān)控和記錄網(wǎng)絡(luò)請(qǐng)求。此選項(xiàng)卡向您顯示瀏覽器發(fā)出的網(wǎng)絡(luò)請(qǐng)求，包括加載頁(yè)面的時(shí)間、每個(gè)請(qǐng)求所需的時(shí)間，并提供每個(gè)請(qǐng)求的詳細(xì)信息。這可用于優(yōu)化頁(yè)面加載性能和調(diào)試請(qǐng)求問題。

您可以使用 JavaScript 控制臺(tái)旁邊的網(wǎng)絡(luò)選項(xiàng)卡。也就是說(shuō)，您可以使用控制臺(tái)開始調(diào)試頁(yè)面，然后切換到網(wǎng)絡(luò)選項(xiàng)卡以查看網(wǎng)絡(luò)活動(dòng)，而無(wú)需重新加載頁(yè)面。

響應(yīng)式設(shè)計(jì)

當(dāng)網(wǎng)站具有響應(yīng)性時(shí)，它們的設(shè)計(jì)和開發(fā)都是為了在一系列不同的設(shè)備上正常顯示和運(yùn)行：手機(jī)、平板電腦、臺(tái)式機(jī)和筆記本電腦。屏幕尺寸、像素密度和支持觸控是跨設(shè)備開發(fā)時(shí)需要考慮的因素。作為 Web 開發(fā)人員，牢記響應(yīng)式設(shè)計(jì)原則非常重要，這樣您的網(wǎng)站對(duì)人們完全可用，無(wú)論他們可以訪問何種設(shè)備。

Firefox 和 Chrome 都為您提供了確保在創(chuàng)建和開發(fā) Web 站點(diǎn)和應(yīng)用程序時(shí)關(guān)注響應(yīng)式設(shè)計(jì)原則的模式。這些模式將模擬不同的設(shè)備，您可以在開發(fā)過程中對(duì)其進(jìn)行調(diào)查和分析。

總結(jié)

本教程提供了在現(xiàn)代 Web 瀏覽器中使用 JavaScript 控制臺(tái)的概述，以及有關(guān)您可以在工作流程中使用的其他開發(fā)工具的一些信息。

分享文章：如何使用JavaScript開發(fā)者控制臺(tái)
轉(zhuǎn)載來(lái)于：http://m.5511xx.com/article/djpeidd.html