如何使用JavaScript开发者控制台

教程

JavaScript

介绍

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

控制台可用于记录信息作为 JavaScript 开发过程的一部分，同时允许您在页面的上下文中执行 JavaScript 表达式与页面进行交互。基本上，控制台为您提供了按需编写、管理和监视 JavaScript 的能力。

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

注意：在本教程中跟随时，您可能会注意到您的浏览器和控制台与图像中的示例不同。浏览器经常更新并经常包含新工具，可能还包括新的视觉样式。这些更新不应影响您在浏览器中使用控制台的能力。

在浏览器中使用控制台

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

Firefox

要在FireFox中打开Web Console，请导航到位于地址栏旁边的右上角的☰菜单。

选择更多工具。打开后，单击Web开发者工具项。

这样做后，一个托盘将在您的浏览器窗口底部打开：

您还可以使用键盘快捷键在Web Console中进入，Linux和Windows上为CTRL + SHIFT + K，macOS上为COMMAND + OPTION + K。

现在您已经进入了控制台，可以开始在其中使用JavaScript了。

Chrome

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

这将打开一个面板，在顶部菜单栏上点击控制台，如果尚未突出显示，则会显示JavaScript控制台：

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

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

在控制台中工作

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

从一个弹出字符串”Hello, World!”的警告开始：

alert("Hello, World!");

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

请注意，当表达式没有明确返回值时，控制台还会打印出评估表达式的结果，这将显示为undefined。

与弹出式警报需要点击关闭不同，您可以通过将 JavaScript 记录到控制台中使用 console.log 来处理。

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

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

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

OutputHello, World!

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

console.log(2 + 6);

Output8

您也可以尝试一些更复杂的数学运算：

console.log(34348.2342343403285953845 * 4310.23409128534);

Output148048930.17230788

此外，您可以使用变量在多行上工作：

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

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

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

JavaScript 控制台为您提供了一个实时尝试 JavaScript 代码的空间，让您使用类似于终端 shell 接口的环境。

使用 HTML 文件

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

请记住，一旦在控制台中修改页面后重新加载页面，它将恢复到修改文档之前的状态。请确保将任何希望保留的更改保存到其他地方。

将HTML文档，如下所示的index.html文件，带入控制台中以了解如何修改它。在你喜欢的文本编辑器中，创建一个index.html文件，并添加以下HTML代码：

index.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中插入一个标题。

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

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

Output"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</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的检查器面板或Chrome的元素面板中查看。

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

您修改的页面在重新加载页面之前会有类似于以下的DOM视图：

此外，您还将在DOM面板的侧边栏或下方看到CSS样式，这样您就可以看到HTML文档中使用的样式或通过CSS样式表使用的样式。例如，注意您的示例页面在Firefox Inspector中的body样式包含了什么：

要对DOM节点进行实时编辑，双击所选元素并进行更改。例如，您可以修改一个<h1>标签并将其更改为<h2>标签。

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

网络

您的浏览器内置开发工具的网络选项卡可以监视和记录网络请求。此选项卡显示浏览器发出的网络请求，包括加载页面时的请求时间以及每个请求的详细信息。这可用于优化页面加载性能并调试请求问题。

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

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

响应式设计

当网站具有响应式设计时，它们被设计和开发成在一系列不同设备上都能正确显示和正常运行：手机、平板电脑、台式机和笔记本电脑。屏幕尺寸、像素密度和支持触摸是跨设备开发时需要考虑的因素。作为网页开发人员，重要的是要牢记响应式设计原则，以便您的网站能够完全适用于人们所使用的任何设备。

无论您是使用Firefox还是Chrome，都可以为您提供模式，以确保在为网络创建和开发网站和应用程序时重视响应式设计原则。这些模式会模拟您可以在开发过程中调查和分析的不同设备。

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

结论

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

要了解更多关于JavaScript的信息，您可以阅读有关数据类型，或者是jQuery或D3库的资料。

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console