介紹

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

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

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

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

在瀏覽器中使用控制臺

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

FireFox

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

從那里，單擊由扳手圖標表示的 Developer 按鈕，這將打開 Web Developer 菜單。打開后，單擊 Web 控制臺菜單項。

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

我們還可以在 Linux 和 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + K 或在 macOS 上使用 COMMAND + OPTION + K 進入 Web 控制臺。

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

Chrome

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

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

你還可以在 Linux 或 Windows 上使用鍵盤快捷鍵 CTRL + SHIFT + J 或在 macOS 上使用 COMMAND + OPTION + J 進入 JavaScript 控制臺，這將立即將焦點帶到控制臺。

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

在控制臺中工作

在控制臺中，我們可以鍵入 JavaScript 代碼。

讓我們從一個字符串 Hello, World! 的警報開始，代碼如下：

alert("Hello, World!");

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

請注意，控制臺還將計算表達式的結(jié)果，當表達式未顯式返回某些內(nèi)容時，該結(jié)果將讀取為未定義。

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

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

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

在控制臺中，我們將收到以下輸出：

Hello, World!

我們還可以使用 JavaScript 在控制臺中執(zhí)行數(shù)學(xué)運算：

console.log(2 + 6);

//Output
8

我們還可以嘗試一些更復(fù)雜的數(shù)學(xué)運算：

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)境，為我們提供了一個實時試用 JavaScript 代碼的空間。

使用 HTML 文件

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

請記住，一旦我們在使用控制臺修改頁面后重新加載頁面，它將返回到我們修改文檔之前的狀態(tài)，因此請確保保存想要保留在其他地方的任何更改。

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

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

然后，您可以打開控制臺并開始使用 JavaScript 來修改頁面。我們將首先使用 JavaScript 在 HTML 中插入標題。

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

您將在控制臺上收到以下輸出：

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

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

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

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

// Output
"lightblue"

以及頁面上文字的顏色：

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

// Output
"white"

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

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

段落元素：

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

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

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

我們將通過將文本節(jié)點附加到變量 p 來添加它：

p.appendChild(t);

最后附加 p 及其段落

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

document.body.appendChild(p);

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

控制臺為我們提供了一個試驗修改 HTML 頁面的空間，但重要的是要記住，當我們在控制臺上執(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 中的正文樣式：

要實時編輯 DOM 節(jié)點，請雙擊選定元素并進行更改。例如，首先，您可以修改

標記并將其設(shè)為

標記。

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

網(wǎng)絡(luò)

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

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

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

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

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

總結(jié)

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

當前題目：如何使用JavaScript開發(fā)者控制臺
轉(zhuǎn)載來源：http://www.5511xx.com/article/djpeidd.html