介绍
现代浏览器具有内置的开发工具,可与JavaScript和其他Web技术一起工作. 这些工具包括类似于壳界面的控制台,以及检查DOM、调试和分析网络活动的工具。
控制台可以用来记录信息作为JavaScript开发过程的一部分,并允许您通过在页面背景中执行JavaScript表达式来与网页进行交互。
本教程将介绍如何在浏览器的背景下使用Console和JavaScript,并提供您可能在Web开发过程中使用的其他内置开发工具的概述。
<$>[注] 注: 在本教程中,您可能会注意到您的浏览器和控制台的外观与图像中的示例不同。
在浏览器中使用 Console
大多数支持基于标准的 HTML 和 XHTML 的现代网页浏览器将为您提供开发者控制台的访问权限,您可以在类似于终端壳的接口中使用 JavaScript。
《Firefox》
若要在 FireFox 中打开 Web Console,请前往地址栏旁边的右上角的 ****菜单。
选择 ** 更多工具**. 打开它时,单击 ** 网页开发工具**。
一旦你这样做,你的浏览器窗口底部会打开一个盘子:
您还可以在 Linux 和 Windows 上使用键盘快捷键CTRL +SHIFT +K或在 macOS 上使用COMMAND +OPTION +K进入 Web Console。
现在你已经访问了控制台,你可以开始在JavaScript中工作。
克罗姆
要在 Chrome 中打开 JavaScript 控制台,您可以导航到浏览器窗口右上方的菜单,由三个垂直点表示。
这将打开一个面板,您可以在顶部菜单栏沿着 Console 点击以将 JavaScript Console 带上,如果它尚未突出:
在 Linux 或 Windows 上,您还可以使用键盘快捷键CTRL +SHIFT +J或在 macOS 上COMMAND +OPTION +J进入 JavaScript 控制台,从而立即将焦点带到控制台。
现在你已经访问了控制台,你可以开始在JavaScript中工作。
在控制台工作
在控制台中,您可以键入和执行JavaScript代码。
开始用一个警告,打印出字符串你好,世界!:
1alert("Hello, World!");
一旦你按下你的JavaScript行后面的ENTER键,就会在你的浏览器中出现一个警告 popup:
请注意,控制台还会打印评估表达式的结果,当表达式没有明确返回某个内容时,该表达式将被读取为未定义。
与此相反,您可以使用 JavaScript 登录到console.log的控制台,而不是使用需要单击退出的弹出窗口通知。
要打印Hello, World!字符串,请在控制台中键入以下内容:
1console.log("Hello, World!");
在控制台中,您将收到以下输出:
1[secondary_label Output]
2Hello, World!
您也可以在控制台中执行数学:
1console.log(2 + 6);
1[secondary_label Output]
28
你也可以尝试一些更复杂的数学:
1console.log(34348.2342343403285953845 * 4310.23409128534);
1[secondary_label Output]
2148048930.17230788
此外,您可以通过多种变量来工作:
1let today = new Date();
2console.log("Today's date is " + today);
1[secondary_label Output]
2Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)
如果您需要修改您通过 Console 传输的命令,您可以在键盘上键入向上箭头(↑)键,以获取之前的命令。
JavaScript 控制台为您提供了实时试用 JavaScript 代码的空间,允许您使用类似于终端壳界面的环境。
使用一个HTML文件
您可以在控制台中以HTML文件或动态渲染的页面为背景工作,这为您提供了在现有HTML、CSS和JavaScript的背景下使用JavaScript代码进行实验的机会。
请记住,一旦您在控制台中更改页面后重新加载页面,它将返回在您更改文档之前的状态。
在您最喜欢的文本编辑器中,创建一个 index.html 文件,并添加以下 HTML 行:
1[label index.html]
2<!DOCTYPE html>
3<html lang="en-US">
4
5<head>
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>Today's Date</title>
9</head>
10
11<body>
12
13</body>
14
15</html>
如果您保存上述HTML文件,并将其加载到您选择的浏览器中,将在浏览器中渲染一个名为今天的日期的空页面。
打开控制台,开始使用JavaScript来修改页面,开始使用JavaScript将标题插入HTML。
1let today = new Date();
2document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"
您将在 Console 中收到以下输出:
1[secondary_label Output]
2"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"
您的页面应该类似于以下:
您可以更改页面的风格,例如背景颜色:
1document.body.style.backgroundColor = "lightblue";
1[secondary_label Output]
2"lightblue"
以及页面上的文字的颜色:
1document.body.style.color = "white";
1[secondary_label Output]
2"white"
现在你的页面应该揭示类似的东西:
从这里,您可以创建一个<p>段落元素:
1let p = document.createElement("P");
创建此元素后,您可以继续创建可以添加到段落的文本节点:
1let t = document.createTextNode("Paragraph text.");
将文本节点添加到变量p中:
1p.appendChild(t);
最后,添加p及其段落<p>元素和附加的文本节点到文档中:
1document.body.appendChild(p);
完成这些步骤后,您的 HTML 页面 index.html 将包含以下元素:
控制台为您提供了一个空间来尝试修改 HTML 页面,但重要的是要记住,当您在控制台上完成操作时,您不会更改 HTML 文档本身。
了解其他开发工具
根据您使用的浏览器开发工具,您将能够使用其他工具来帮助您的 Web 开发工作流程。
DOM - 文档对象模型
每当一个网页被加载时,其浏览器会创建该网页的 Ddocument Object Model,或 DOM。
DOM树是一个对象树,在等级视图中显示 HTML 元素. DOM 树可以在 Firefox 中的 **Inspector**面板或 Chrome 中的 **Elements**面板中查看。
这些工具允许您检查和编辑DOM元素,并允许您识别与特定页面的某个方面相关的HTML。DOM可以告诉您文本片段或图像是否具有ID属性,并可以帮助您确定该属性的值是什么。
您所修改的页面在重新加载页面之前将具有类似的 DOM 视图:
此外,您将在侧面板或DOM板下方看到CSS风格,允许您在HTML文档中或通过CSS风格表查看正在使用的风格,例如,请注意您的样本页面的身体风格包括在Firefox检查器中:
若要实时编辑 DOM 节点,请双击选定的元素并进行更改,例如,您可以更改一个 <h1> 标签并将其变成 <h2> 标签。
与 Console 一样,如果重新加载页面,您将返回 HTML 文档的原始保存状态。
网络
您的浏览器内置开发工具的网络选项卡可以监控和记录网络请求,此选项卡显示浏览器所做的网络请求,包括页面加载时、每个请求需要多长时间,并提供每个请求的详细信息。
您可以使用网络选项卡与 JavaScript 控制台一起使用,也就是说,您可以开始使用控制台调试页面,然后切换到网络选项卡以查看网络活动,而无需重新加载页面。
若要了解有关如何使用网络选项卡的更多信息,请阅读有关 使用 Firefox 的网络监视器或 使用 Chrome 的 DevTools 开始分析网络性能的文章。
响应式设计
当网站响应性时,它们是设计和开发的,在各种不同的设备上看起来和正常工作:手机,平板电脑,桌面和笔记本电脑. 屏幕大小,像素密度和支持触摸是开发设备时要考虑的因素。
Firefox 和 Chrome 都为您提供模式,以确保您在为 Web 创建和开发网站和应用程序时注意响应式设计原则。
阅读有关 Firefox 的 响应式设计模式或 Chrome 的 设备模式的更多信息,了解如何利用这些工具来确保更公平的访问 Web 技术。
结论
本教程提供了在现代Web浏览器中使用JavaScript Console的工作概述,以及您可以在工作流中使用的其他开发工具的一些信息。