如何使用 JavaScript 开发者控制台

一篇译文：原文地址(How To Use the JavaScript Developer Console | DigitalOcean)

By Lisa Tagliaferri 丽莎·塔利亚费里

[Introduction 介绍]

现代浏览器内置了开发工具，可与 JavaScript 和其他 Web 技术配合使用。这些工具包括类似于 shell 界面的控制台，以及用于检查 DOM、调试和分析网络活动的工具。

控制台可用于在 JavaScript 开发过程中记录信息，并允许您通过在页面上下文中执行 JavaScript 表达式来与网页进行交互。

从本质上讲，控制台为您提供了按需编写、管理和监控 JavaScript 的能力。

本教程将介绍如何在浏览器上下文中使用控制台和 JavaScript，并概述您可以在 Web 开发过程中使用的其他内置开发工具。

注意：当您按照本教程进行操作时，您可能会注意到您的浏览器和控制台看起来与图像中的示例不同。浏览器经常更新，并且通常包含新工具，甚至可能包含新的视觉风格。

这些更新不应影响您在浏览器中使用控制台的能力。

[在浏览器中使用控制台]

大多数支持基于标准的 HTML 和 XHTML 的现代 Web 浏览器都会为您提供对开发者控制台的访问，您可以在类似于终端 shell 的界面中使用 JavaScript。本节概述如何在 Firefox 和 Chrome 中访问控制台。

[Firefox 火狐浏览器]

要在 FireFox 中打开 Web 控制台，请导航至右上角地址栏旁边的 ☰ 菜单。

选择更多工具。打开该窗口后，单击"Web 开发人员工具"项。

执行此操作后，浏览器窗口底部将打开一个托盘：

您还可以在 Linux 和 Windows 上使用键盘快捷键 CTRL + SHIFT + K 或 macOS 上的 COMMAND + K 进入 Web 控制台。

现在您已经访问了控制台，您可以开始在其中使用 JavaScript 进行工作。

[Chrome 谷歌浏览器]

要在 Chrome 中打开 JavaScript 控制台，您可以导航到浏览器窗口右上角由三个垂直点表示的菜单。从那里，您可以选择更多工具，然后选择开发人员工具。

这将打开一个面板，您可以在其中单击顶部菜单栏上的"控制台"以调出 JavaScript 控制台（如果尚未突出显示）：

您还可以在 Linux 或 Windows 上使用键盘快捷键 CTRL + SHIFT + J 或 macOS 上的 COMMAND + OPTION + J 进入 JavaScript 控制台，这将立即将焦点带到控制台。

现在您已经访问了控制台，您可以开始在其中使用 JavaScript 进行工作。

[在控制台中工作]

在控制台中，您可以键入并执行 JavaScript 代码。

从打印出字符串 Hello, World! 的警报开始：

bash 复制代码

alert("Hello, World!");

一旦您按下 JavaScript 行后面的 ENTER 键，浏览器中就会出现一个警告弹出窗口：

请注意，控制台还将打印表达式的求值结果，当表达式未显式返回某些内容时，该结果将读取为 undefined 。

您可以通过使用 console.log 将 JavaScript 记录到控制台来使用 JavaScript，而不需要点击弹出警报。

要打印 Hello, World! 字符串，请在控制台中键入以下内容：

bash 复制代码

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

在控制台中，您将收到以下输出：

makefile 复制代码

Output: Hello, World!

您还可以在控制台中执行数学运算：

bash 复制代码

console.log(2 + 6);

复制代码

Output 8

您还可以尝试一些更复杂的数学：

bash 复制代码

console.log(34348.2342343403285953845 * 4310.23409128534);

复制代码

Output 148048930.17230788

此外，您可以使用变量处理多行：

bash 复制代码

let today = new Date();
console.log("Today's date is " + today);

vbnet 复制代码

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

如果需要修改通过控制台传递的命令，可以键入键盘上的向上箭头 (↑) 键来检索上一个命令。这将允许您编辑命令并再次发送。

JavaScript 控制台通过让您使用类似于终端 shell 界面的环境，为您提供了实时尝试 JavaScript 代码的空间。

[使用 HTML 文件]

您可以在控制台中的 HTML 文件或动态呈现页面的上下文中工作。这为您提供了在现有 HTML、CSS 和 JavaScript 上下文中试验 JavaScript 代码的机会。

请记住，在控制台中修改页面后重新加载页面，它将返回到修改文档之前的状态。确保保存您想要保留在其他地方的所有更改。

拿一个 HTML 文档（例如下面的 index.html 文件）来了解如何使用控制台对其进行修改。在您最喜欢的文本编辑器中，创建一个 index.html 文件并添加以下 HTML 行：

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 文件并将其加载到您选择的浏览器中，则浏览器中将呈现标题为 Today's Date 的空白页面。

打开控制台并开始使用 JavaScript 来修改页面。首先使用 JavaScript 将标题插入 HTML。

bash 复制代码

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

您将在控制台中收到以下输出：

less 复制代码

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

您的页面应类似于以下内容：

可以修改页面的样式，例如背景颜色：

bash 复制代码

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

arduino 复制代码

Output "lightblue"

以及页面上文本的颜色：

bash 复制代码

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

arduino 复制代码

Output "white"

现在您的页面应该显示类似的内容：

从这里，您可以创建一个 <p> 段落元素：

bash 复制代码

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

创建此元素后，您可以继续创建可添加到段落中的文本节点：

bash 复制代码

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

通过将文本节点附加到变量 p 来添加文本节点：

bash 复制代码

p.appendChild(t);

最后将 p 及其段落 <p> 元素和附加文本节点附加到文档中：

bash 复制代码

document.body.appendChild(p);

完成这些步骤后，您的 HTML 页面 index.html 将包含以下元素：

上述的完整代码：

javascript 复制代码

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"
document.body.style.backgroundColor = "lightblue";
document.body.style.color = "white";
let p = document.createElement("P");
let t = document.createTextNode("Paragraph text.");
p.appendChild(t);
document.body.appendChild(p);

控制台为您提供了一个尝试修改 HTML 页面的空间，但请务必记住，当您在控制台上执行操作时，您并没有更改 HTML 文档本身。重新加载页面后，它将返回到空白文档。

[了解其他开发工具]

根据您使用的浏览器开发工具，您将能够使用其他工具来帮助您的 Web 开发工作流程。

[DOM --- Document Object Model 文档对象模型]

每次加载网页时，其所在的浏览器都会创建该页面的文档对象模型（DOM）。

DOM 是一个对象树，并在分层视图中显示 HTML 元素。 DOM 树可以在 Firefox 的检查器面板或 Chrome 的元素面板中查看。

这些工具使您能够检查和编辑 DOM 元素，还可以让您识别与特定页面的某个方面相关的 HTML。 DOM 可以告诉您文本片段或图像是否具有 ID 属性，并可以帮助您确定该属性的值是什么。

在重新加载页面之前，您上面修改的页面将具有与此类似的 DOM 视图：

此外，您将在侧面板或 DOM 面板下方看到 CSS 样式，从而允许您查看 HTML 文档中或通过 CSS 样式表使用的样式。例如，请注意 Firefox 检查器中示例页面的正文样式包含哪些内容：

要实时编辑 DOM 节点，请双击选定的元素并进行更改。例如，您可以修改 <h1> 标记并将其设为 <h2> 标记。

与控制台一样，如果重新加载页面，您将返回到 HTML 文档的原始保存状态。

[Network 网络]

浏览器内置开发工具的"网络"选项卡可以监视和记录网络请求。此选项卡显示浏览器发出的网络请求，包括加载页面的时间、每个请求需要多长时间，并提供每个请求的详细信息。

这可用于优化页面加载性能和调试请求问题。

您可以使用 JavaScript 控制台旁边的"网络"选项卡。也就是说，您可以使用控制台开始调试页面，然后切换到"网络"选项卡以查看网络活动，而无需重新加载页面。

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

[响应式设计]

当网站具有响应能力时，它们的设计和开发就可以在各种不同的设备上正常显示和运行：手机、平板电脑、台式机和笔记本电脑。屏幕尺寸、像素密度和支持触摸是跨设备开发时需要考虑的因素。

作为一名 Web 开发人员，牢记响应式设计原则非常重要，这样无论人们可以使用什么设备，都可以完全访问您的网站。

Firefox 和 Chrome 都为您提供了多种模式，确保您在创建和开发网络网站和应用程序时关注响应式设计原则。

这些模式将模拟不同的设备，您可以在开发过程中调查和分析这些设备。

阅读有关 Firefox 响应式设计模式或 Chrome 设备模式的更多信息，了解有关如何利用这些工具确保更公平地访问网络技术的更多信息。

[结论]

本教程概述了如何在现代 Web 浏览器中使用 JavaScript 控制台，以及有关可在工作流程中使用的其他开发工具的一些信息。

要了解有关 JavaScript 的更多信息，您可以阅读有关数据类型、jQuery 或 D3 库的内容。

感谢您与 DigitalOcean 社区一起学习。查看我们的计算、存储、网络和托管数据库产品。

了解更多关于我们的信息

系列下一篇：如何将 JavaScript 添加到 HTML