介绍
现代浏览器具有内置的开发工具，可以使用JavaScript和其他Web技术。 这些工具包括与shell接口类似的控制台，以及检查DOM，调试和分析网络活动的工具。
控制台可用于记录信息作为JavaScript开发过程的一部分，并允许您通过在页面上下文中执行JavaScript表达式来与网页进行交互。 本质上，控制台可让您根据需要编写，管理和监控JavaScript。
本教程将介绍如何在浏览器的上下文中使用JavaScript控制台，并提供可用作Web开发过程一部分的其他内置开发工具的概述。
在浏览器中使用控制台
支持基于标准的HTML和XHTML的大多数现代Web浏览器将为您提供对开发人员控制台的访问，您可以在类似于终端外壳的界面中使用JavaScript。 我们将介绍如何在Firefox和Chrome中访问控制台。
火狐
要在FireFox中打开Web控制台 ，您可以导航到地址栏旁边右上角的☰菜单。
从那里，点击由扳手图标表示的开发者按钮，这将打开Web Developer菜单。 打开该窗口后，单击Web控制台菜单项。
一旦这样做，托盘将在浏览器窗口的底部打开：
您还可以使用Linux和Windows上的键盘快捷键CTRL + SHIFT + K ，或在MacOS上的COMMAND + OPTION + K进入Web控制台。
现在我们已经访问了控制台，我们可以在JavaScript中开始工作。
铬
要在Chrome中打开JavaScript控制台 ，您可以导航到浏览器窗口右上角的菜单，该列表由一行中的三个垂直点指示。 从那里，您可以选择更多工具，然后选择开发工具。
这将打开一个面板，您可以在顶部菜单栏中单击控制台 ，以便在未突出显示的情况下启动JavaScript控制台：
您还可以使用Linux或Windows上的键盘快捷键CTRL + SHIFT + J或MacOS上的COMMAND + OPTION + J进入JavaScript控制台，这将立即将焦点放在控制台上。
现在我们已经访问了控制台，我们可以在JavaScript中开始工作。
在控制台工作
在控制台中，您可以键入JavaScript代码。
我们从一个警告开始，打印出你的Hello, World! ：
alert("Hello, World!");
一旦您按照JavaScript行的按ENTER键，您应该在浏览器中看到以下警报弹出窗口：
请注意，控制台还将打印评估表达式的结果，当表达式未显式返回某些内容时，该表达式将读取为undefined 。
我们可以使用console.log将其登录到控制台，而不是弹出式警报，我们需要继续点击。
打印Hello, World! 字符串，我们可以在控制台中输入以下内容：
console.log("Hello, World!");
在控制台中，您将收到以下输出：
OutputHello, World!
我们还可以使用JavaScript在控制台中执行数学：
console.log(2 + 6);
Output8
你也可以尝试一些更复杂的数学：
console.log(34348.2342343403285953845 * 4310.23409128534);
Output148048930.17230788
另外，我们可以使用多行变量：
let d = new Date();
console.log("Today's date is " + d);
OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)
如果需要修改通过控制台传递的命令，可以键入键盘上的向上箭头键来检索上一个命令。 这将允许您编辑该命令并再次发送。
JavaScript控制台通过让您使用类似于终端shell界面的环境，为您提供实时测试JavaScript代码的空间。
使用HTML文件
您还可以在控制台中的HTML文件或动态呈现页面的上下文中工作。 这为您提供了在现有HTML，CSS和JavaScript的上下文中实验JavaScript代码的机会。
请记住，一旦您在使用控制台修改页面之后重新加载页面，它将在您修改文档之前恢复其状态，因此请确保保存任何您想要保留的更改。
让我们拿一个空白的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 d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
您将在控制台上收到以下输出：
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</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 - 文档对象模型
每次加载一个网页时，它所在的浏览器都会创建一个页面的D o o o o oject M odel或DOM 。
DOM是一个对象树，并在层次化视图中显示HTML元素。 可以在Firefox中的“ 检查器”面板或“Chrome”中的“ 元素”面板中查看DOM树。
这些工具使您可以检查和编辑DOM元素，还可以确定与特定页面方面相关的HTML。 DOM可以告诉您文本片段或图像是否具有ID属性，并且可以让您确定该属性的值。
在我们重新加载页面之前，我们修改的页面将具有与之类似的DOM视图：
此外，您将在侧面板中或DOM面板下方看到CSS样式，从而可以查看HTML文档或CSS样式表中使用的样式。 这是我们上面的示例页面的身体样式在Firefox检查器中看起来像：
要实时编辑DOM节点，请双击所选元素并进行更改。 例如，要开始，您可以修改<h1>标签并使其成为<h2>标签。
与控制台一样，如果您重新加载页面，您将返回到HTML文档的保存状态。
网络
浏览器内置开发工具的“ 网络”选项卡可以监视和记录网络请求。 此选项卡显示浏览器所做的网络请求，包括何时加载页面，每个请求需要多长时间，并提供每个请求的详细信息。 这可以用于优化页面加载性能和调试请求问题。
您可以在JavaScript控制台旁边使用“网络”选项卡。 也就是说，您可以使用控制台开始调试页面，然后切换到“网络”选项卡以查看网络活动，而无需重新加载页面。
要了解有关如何使用“网络”选项卡的更多信息，您可以阅读有关使用Firefox的网络监视器或开始使用Chrome的DevTools分析网络性能 。
响应式设计
当网站响应时，它们的设计和开发既可以在一系列不同的设备上正常运行，也可以正常运行：手机，平板电脑，台式机和笔记本电脑。 屏幕尺寸，像素密度和支持Touch是跨设备开发时考虑的因素。 作为网络开发人员，重要的是保持敏感的设计原则，以便您的网站完全可供人们使用，无论他们有权访问哪些设备。
Firefox和Chrome都为您提供模式，以确保在为网络创建和开发网站和应用程序时，响应式设计原则受到关注。 这些模式将模拟不同的设备，您可以作为开发过程的一部分进行调查和分析。
详细了解Firefox的响应式设计模式或Chrome的设备模式，以了解有关如何利用这些工具确保更公平地访问Web技术的更多信息。
结论
本教程概述了在现代Web浏览器中使用JavaScript控制台以及可在工作流中使用的其他开发工具的一些信息。
