您需要知道的 10 个 Chrome 控制台提示

测试网站或 Web 应用程序及其用户界面可能会非常棘手且耗时，尤其是在您没有使用适当的调试工具（例如 Chrome 控制台，也称为 Chrome 开发人员工具）时。

现在几乎所有的网络浏览器都支持开发者工具，但谷歌似乎更坚定地为快速调试过程提供最佳环境。

Google 一直在努力使 Chrome DevTools 尽可能地对开发人员友好。 如此之多，以至于问题不再是您可以使用这些直接内置于 Google Chrome 浏览器中的开发人员工具做什么。 现在的问题是您对 chrome 控制台了解多少。

有一些特定的 Chrome 控制台功能往往会吸引每个开发人员。 有些人认为它是查找网站组成部分（包括脚本和样式）的最佳开发人员工具。 其他开发人员发现它在跟踪链接标签、浏览器呈现、HTTP 请求和响应、分页点、测试新功能或脚本等方面更有用。

这篇文章几乎不会触及控制台可以做什么的表面。 有关功能和手册的完整概述，请访问 Google 开发者官方页面。

如何打开 Chrome 控制台

访问 Chrome DevTools 的常规方法是点击自定义和控制 Google Chrome按钮（Chrome 浏览器菜单栏右上角的三个垂直点），向下滚动到更多工具并选择开发者工具。

键盘快捷键： Ctrl + Shift + I 用于 Windows 和 Cmd + Options + I 用于 Macintosh。

或者，您可以通过右键单击网站上的任何元素并选择“检查元素”选项来访问 Chrome 控制台。

如果您使用上述任何一种方法，Chrome 控制台面板将出现在浏览器窗口的侧面或底部。 您可以将 chrome 控制台面板解锁到一个单独的窗口中，或者通过单击自定义和控制 Devtools按钮（DevTools 面板右上角的三个垂直点）并在Dock 侧选项旁边选择您的首选位置来更改停靠位置.

每个开发者都应该知道的 10 个 Chrome 控制台提示

1.模拟移动设备

网站测试最重要的方面之一是确定您的页面设计的响应速度以及它们相对于不同设备的断点。 您可以使用 chrome DevTools 测试媒体查询或找出网站中断的分辨率，以便您可以通过模拟不同的移动设备来设置应用媒体查询的位置。

要访问 Chrome 控制台设备模式，您可以在其中模拟不同的移动设备，请单击 Chrome 控制台面板左上角的切换设备工具栏（小手机和平板电脑图标）。 这会将网站窗口更改为响应模式。

键盘快捷键： Ctrl + Shift + M（Cmd + Shift + M）。

将出现在网站窗口中的一组工具将允许您选择要模拟的设备和分辨率，以及添加列表中不可用的移动设备。

2. 检查网络活动

使用 Chrome 控制台，您可以检查网站的网络活动，以确保准确下载和上传所有资源。 并且还检查每个资源的属性，例如图像大小、内容、HTTP 标头等。

单击 DevTools 窗口上的网络选项卡。 这将打开带有空日志的网络面板，因为该工具仅在打开时记录网络活动。 按 Ctrl + R (Cmd +R) 或重新加载网站以查看您的页面网络日志活动。

您应该会在页面下方看到一个表格，其中显示了您的页面网络活动的时间日志。 要查看有关每个资源的更多信息，请单击网络设置（右侧的齿轮图标）并选中旁边的框以使用大图标请求行。

您可以通过调试网络日志中的错误来提高页面的加载性能，以解决文件压缩等问题。

3.网络节流

与移动设备模拟类似，您可以使用 Chrome 控制台模拟不同的互联网速度。 如果您想以特定速度测试网站性能，例如在 3G 移动设备上，此功能会很有用。

在网络面板菜单栏中，单击在线（限制）并选择您选择的互联网速度。 要添加自定义网络配置文件，请单击下拉菜单中的添加选项，然后输入您首选的上传和下载速度。

4.添加脚本片段

您可以使用片段功能在网站内的任何位置添加您喜欢的随机代码。 无需一遍又一遍地编写相同的代码，此功能将允许您保存代码片段并随时访问代码。

单击源选项卡>>片段>>新片段。 这将在片段窗格中创建一个新文件。 重命名您的代码段并在窗格旁边的窗口中编写一小段 JavaScript 代码。 要保存片段，请右键单击片段文件，单击另存为并选择您喜欢的目录。 您也可以通过命令菜单访问此功能。

使用 Ctrl + Shift + P 或 Cmd + Shift + P (Mac) 打开命令菜单，键入片段并单击创建新片段。

使用 Ctrl + Enter 或 Cmd + Enter 运行代码或单击文本窗口下方的Run Snippet图标。

5. 截取网站截图

Chrome DevTools 允许您截取网站不同部分的屏幕截图。 使用 Ctrl + Shift + P 或 Cmd + Shift + P (Mac) 打开命令菜单并输入screenshot 。 选择您想要的屏幕截图类型。 DevTool 将自动截取图像并将图像作为 .png 文件下载到您的默认下载目录中。

6.开启内容文字编辑模式

您可以使用 Chrome 控制台直接在浏览器窗口中编辑页面内容。 单击控制台选项卡并使用以下代码打开该功能。

document.body.contentEditable = 'true';

或者

document.designMode='开';

按回车键打开该功能。

7. 颜色选择器

使用具有一系列工具的颜色选择器可以更轻松地在您的网站上操作颜色。 吸管可让您直接从网页中选择颜色并将它们设置在您的颜色属性中。 您可以使用颜色选择器调整颜色的色调和不透明度，并通过简单的点击在 RGBA、HEX 和 HSLA 之间进行转换。

要访问颜色选择器，请选择要更改其颜色的元素。 这应该会在右侧打开元素选项卡和样式表窗格。 找到元素 CSS 属性并单击相应的颜色框以打开颜色选择器。

8. 编辑 CSS 属性

Chrome 控制台提供了轻松访问以调整网站上任何元素的 CSS 属性。 单击选择按钮（Ctrl + Shift + C 或 Cmd + Options + C），将光标悬停在要编辑的元素上以查看元素属性的概览，然后单击元素。

这应该会突出显示 Element 窗格下元素的 HTML 根，以及 DevTools 面板右侧的 CSS 属性。 转到样式窗格并滚动到要编辑以进行实时更改的属性。 您可以通过 Ctrl + 单击（Cmd + 单击）属性来查看任何样式的完整属性。

9. JavaScript 断点

使用断点查找和修复 JavaScript 错误比使用 console.log () 方法要容易得多。 这是因为，在后一种方法中，您需要手动访问源代码并将console.log()语句插入到相关代码中，然后重新加载页面以查看日志。 断点不一定要求您在暂停相关代码之前了解代码结构。

单击源选项卡 > 页面，然后从特定文件夹中选择要调试的脚本。 您可以在 Chrome DevTools 中设置断点，只需单击要暂停脚本的行号，以便在脚本执行到该行时立即暂停。

或者，您可以使用调试器窗格中的事件侦听器来设置断点，以参考您在脚本中定位的特定事件，例如鼠标单击或媒体播放。 使用 Ctrl + R (Cmd + R) 刷新页面并使用调试器窗格工具移动步骤。

10. 将 HTML 元素存储为全局 JS 变量

无论您是检查记录到控制台的复杂对象还是站点上的 DOM 元素，您都可以在全局范围内自动存储对它们的引用。 这在调试时非常方便，因为您可以简单地将它们作为全局变量进行检查。

右键单击控制台中的对象或元素选项卡中元素的 HTML 块，然后在下拉菜单中选择“存储为全局变量”。 Chrome 控制台会自动将元素存储为全局变量，并使其在控制台中可用。 变量名称将是“tempN”，其中 N 表示您使用此方法存储变量的次数。 第一个变量显然命名为“temp1”，第二个变量命名为“temp2”。

结论

熟练度和速度是人们熟悉工具的属性，这在 Chrome DevTools 中有很深的含义。 您拥有的信息越多，您可能会越快越好地使用这些工具，这反过来又会减少调试所花费的时间。

本周和下周花一点时间阅读文档可能更有价值，从通常花费您最多时间的调试方面开始。 如果上述 chrome 控制台提示没有提及您最喜欢的功能，我们不会感到惊讶。 请在下面的评论中让我们知道它们。