简介现代浏览器具有用于使用JavaScript和其他网络技术的内置开发人员工具。这些工具包括类似于shell界面的控制台，以及用于检查DOM、调试和分析网络活动的工具。控制台可用于在JavaScript开发期间记录信息，并允许我们通过在页面上下文中执行JavaScript表达式来与网页进行交互。从本质上讲，控制台使我们能够按需编写、管理和监视JavaScript。本教程将向您展示如何在浏览器和其他可在Web开发期间使用的内置开发工具的上下文中使用JavaScript中的控制台。在浏览器中使用控制台大多数支持基于标准的HTML和XHTML的现代Web浏览器将为开发人员提供访问控制台的权限，我们可以在其中使用类似终端shell的界面来使用JavaScript。我们将介绍如何在Firefox和Chrome中访问控制台。FireFox要在FireFox中打开Web控制台，我们可以导航到地址栏旁边右上角的?菜单。从那里，单击由扳手图标表示的Developer按钮，这将打开WebDeveloper菜单。打开后，单击Web控制台菜单项。完成后，将在浏览器窗口底部打开一个窗口：我们还可以在Linux和Windows上使用键盘快捷键CTRL+SHIFT+K或在macOS上使用COMMAND+OPTION+K来访问Web控制台。现在我们可以访问控制台，可以开始使用JavaScript工作了。Chrome要在Chrome中打开JavaScript控制台，我们导航到浏览器窗口右上角的菜单，该菜单由三个连续的垂直点表示。从那里，我们可以选择更多工具，然后选择开发人员工具。这将打开一个面板，我们可以在其中单击顶部菜单栏上的控制台以调出JavaScript控制台（如果它尚未突出显示）：您还可以在Linux或Windows上使用键盘快捷键CTRL+SHIFT+J或在macOS上使用COMMAND+OPTION+J进入JavaScript控制台，它会立即将焦点带到控制台。现在我们可以访问控制台，可以开始使用JavaScript工作了。在控制台中工作在控制台中，我们可以键入JavaScript代码。让我们从字符串Hello,World!的警报开始。使用以下代码：alert("Hello,World!");在您的JavaScript行后按ENTER后，您应该会在浏览器Windows中看到以下警告弹出：请注意，控制台还将评估表达式的结果，当表达式未明确返回某些内容时，该结果将被读取为未定义。我们可以通过使用console.log将JavaScript记录到控制台来使用JavaScript，而不是让我们需要不断单击以退出的弹出警报。输出Hello,World!字符串，我们可以在控制台输入以下内容：console.log("Hello,World!");在控制台中，我们将收到以下输出：Hello,World!我们也可以使用JavaScript在控制台中执行数学运算：console.log(2+6);//Output8我们也可以尝试一些更复杂的数学运算：console.log(34348.2342343403285953845*4310.23409128534);//Output148048930.17230788中另外，我们可以使用多行变量处理：letd=newDate();console.log("Today'sdateis"+d);//OutputToday'sdateisWedJun21201715:49:47GMT-0400(EDT)如果我们需要通过控制台下达的控制命令进行修改，向上箭头↑可以键入键盘上的键来检索上一个命令。这将允许我们编辑命令并再次发送。JavaScript控制台通过让我们使用类似于终端shell界面的环境，为我们提供了一个实时试验JavaScript代码的空间。使用HTML文件，我们还可以在HTML文件或控制台中动态呈现的页面的上下文中工作。这使我们有机会在现有HTML、CSS和JavaScript的上下文中试验JavaScript代码。请记住，一旦我们在使用控制台修改页面后重新加载页面，它将返回到我们修改文档之前的状态，因此请确保将您想要保留的任何更改保存在其他地方。我们以一个空白的HTML文档为例，比如下面的index.html文件，看看如何使用控制台修改它。在我们最喜欢的文本编辑器中，创建一个index.html文件并添加以下HTML行：如果我们保存上面的HTML文件并将其加载到您选择的浏览器中，您应该会看到一个标题为今天日期的空白页面。然后您可以打开控制台并开始使用JavaScript修改页面。我们将从使用JavaScript在HTML中插入标题开始。letd=newDate();document.body.innerHTML="

Today'sdateis"+d+"

"您将在控制台上收到以下输出：//Output"

Today'sdateisSatJun24201712:16:14GMT-0400(EDT)

“此时，您的页面应该类似于下图：我们还可以继续修改页面的样式，比如背景color:document.body.style.backgroundColor="lightblue";//输出"lightblue"和页面上文本的颜色：document.body.style.color="white";//输出"white"现在你的页面将如下所示：从这里，我们可以创建一个

段落元素：letp=document.createElement("P");创建此元素后，我们可以继续创建一个文本节点，然后我们可以将其添加到段落中：lett=document.createTextNode("Paragraphtext.");我们将通过将文本节点附加到变量p来添加文本节点：p.appendChild(t);最后附加p及其段落

元素并将文本节点附加到文档：document.body.appendChild(p);完成这些步骤后，您的HTML页面index.html将如下所示：控制台为我们提供了修改HTML页面的实验空间，但重要的是要记住，当我们在安慰。在这种情况下，一旦我们重新加载页面，它将返回到一个空白文档。了解其他开发工具根据您使用的浏览器开发工具，您将能够使用其他工具来帮助您的Web开发工作流程。让我们来看看其中的一些工具。DOM-文档对象模型每次加载网页时，它所在的浏览器都会创建该页面的文档对象模型或DOM。DOM是一棵对象树，以分层视图显示HTML元素。DOM树可以在Firefox的检查器面板或Chrome的元素面板中查看。这些工具使您能够检查和编辑DOM元素，还允许您识别与特定页面的某个方面相关的HTML。DOM可以告诉您文本片段或图像是否具有ID属性，并让您确定该属性的值是什么。在我们重新加载页面之前，我们上面修改的页面将有一个类似于此的DOM视图：此外，我们将在侧面板或DOM面板下方看到CSS样式，允许您查看HTML文档中使用的样式或通过CSS样式表使用的样式。这就是上面示例页面的文本在Firefox检查器中的外观：要实时编辑DOM节点，请双击选定的元素并进行更改。例如，首先，您可以修改

标签，使其成为

标签。与控制台一样，如果您重新加载页面，您将返回到HTML文档的保存状态。Web浏览器内置开发人员工具的网络选项卡可以监视和记录网络请求。此选项卡向您显示浏览器发出的网络请求，包括页面加载时间、每个请求花费的时间，并提供有关每个请求的详细信息。这可用于优化页面加载性能和调试请求问题。您可以使用JavaScript控制台旁边的网络选项卡。也就是说，您可以使用控制台开始调试页面，然后切换到网络选项卡以查看网络活动而无需重新加载页面。响应式设计当网站具有响应式时，它们的设计和开发是为了在一系列不同的设备上显示和运行良好：手机、平板电脑、台式机和笔记本电脑。屏幕尺寸、像素密度和对触摸的支持是跨设备开发时需要考虑的因素。作为Web开发人员，牢记响应式设计原则非常重要，这样您的网站才能完全供人们使用，无论他们可以访问什么设备。Firefox和Chrome都为您提供了多种模式，以确保您在创建和开发网站和应用程序时牢记响应式设计原则。这些模式模拟您可以在开发过程中调查和分析的不同设备。总结本教程提供了在现代Web浏览器中使用JavaScript控制台的概述，以及有关您可以在工作流程中使用的其他开发工具的一些信息。