你必须知道的 Chrome 开发者工具最有用的功能

Chrome 开发者工具是 Web 开发的重要组成部分。

以下是 Chrome 开发者工具的一些技巧和窍门，可以让您的开发生活变得更加轻松。

截取整个页面的屏幕截图

右键单击页面上的任意位置并选择检查选项以打开 Chrome 开发者工具
按 Ctrl+Shift+P 或 Cmd+Shift+P (Mac) 打开命令菜单
在搜索框中输入屏幕截图，然后从结果中选择“捕获全尺寸屏幕截图”。

无论页面有多长，它都会截取整个页面的屏幕截图。

你也可以用这个技巧截取页面的任何部分。假设你在 dev.to 网站的主页上，想截取页眉

右键单击标题并选择检查选项
从命令菜单中选择“捕获节点截图”

获取页面上任何元素的 CSS 样式

假设您在 google.com 上，想要查看应用于 google 徽标的 CSS 样式

右键单击 Google 徽标图像并选择检查
右键单击图像标签并选择复制->复制样式，徽标应用的样式将被复制到剪贴板

片段

代码片段是您想要在任何网站上执行的 JavaScript 代码。

这样可以避免手动复制粘贴控制台中的代码到每个页面进行测试。您可以随时在任何网站上运行创建的代码片段。

创建代码片段

转到开发者工具的源选项卡
单击“新建代码片段”（如果默认未显示，请点击两个箭头选择代码片段选项卡）
编写代码
通过命名来保存文件
通过右键单击代码片段文件名并选择运行来执行代码。

例如，如果你想获取网页上包含的所有脚本，你可以使用以下代码

(function () {
  console.log(
    Array.from(document.scripts).forEach((script) => console.log(script))
  );
})();

注意，需要执行的代码片段必须是IIFE（立即调用函数表达式）

本地覆盖

此技术允许将本地 JavaScript 或 CSS 文件映射到生产站点上的文件。这对于调试生产问题非常有用。

很多时候，UAT/生产环境具有特定于环境的数据，如数据库、迁移脚本等，因此不可能使本地环境与 UAT/生产环境相同。

在这种情况下，本地覆盖就非常方便了。您可以通过映射本地文件，直接在 UAT/生产环境中快速执行任何 JavaScript 或 CSS，而无需部署更改。

为此，请按照以下步骤操作。

在您的机器上创建一个新文件夹来存储覆盖文件
转到“源”选项卡内的“覆盖”选项卡（如果默认情况下未显示，请点击两个箭头以选择“覆盖”选项卡）
点击“选择覆盖文件夹”
选择第一步创建的文件夹
点击浏览器顶部弹出窗口中的“允许”按钮，以允许更改浏览器文件
更改任何 JavaScript 或 CSS 文件并使用 Ctrl+S 或 Cmd+S (Mac) 保存文件
第一次保存时，您可能会看到“DevTools 已与页面断开连接”的错误。这没关系。
使用 Ctrl+R 或 Cmd+R（Mac）重新加载页面
您可以在网站上看到您所做的更改。

即使在刷新后它也会保留您的更改，以便您可以在推送到 UAT 或生产站点之前测试您的更改。

请注意，如果您觉得在浏览器中更改 JavaScript 或 CSS 文件不方便，可以使用您喜欢的编辑器（例如 VS Code）进行更改。只需将 VS Code 中更改的文件复制到第一步中创建的正确目录中的文件夹，然后在浏览器中刷新页面即可。

观看下面的视频来了解演示

在控制台中获取格式化的 JSON

假设您有以下 JSON。

const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};

为了使其在控制台中更具可读性，您可以使用JSON.stringify(book, null, 2)

最后一个参数 2 表示每行前要使用的空格数。你甚至可以\t使用 Tab 键来缩进

调试时将变量值复制到剪贴板

假设您正在通过添加断点在 chrome 中调试代码，并且变量值是一个长 JSON，并且您想要复制该值进行检查，您可以copy通过传递变量名称在控制台中执行该函数，并且该值将被复制到您的剪贴板

复制控制台中显示的任何值

如果你想复制控制台中显示的一些 JSON 数据，

右键单击显示的 JSON
选择“存储为全局变量”选项
单击控制台上的任意位置即可显示临时变量名称，该名称将是 temp1 或 temp2 或其他名称。
使用该copy函数将该值复制到剪贴板

调试时注意变量值的变化

很多时候，在 Chrome 中进行调试时，您会发现自己使用鼠标悬停在变量名称上以检查其当前值。

每次用鼠标悬停检查每个变量的值时，这都很麻烦。您可以点击+调试器中监视部分旁边的按钮，将变量名称添加到监视列表中，如下所示。

因此，每次您单步执行代码时，当前值都会在监视部分中更新，您不必将鼠标悬停在变量名称上

从您的网站中查找未使用的 CSS

使用此技术，您将能够快速找到网站上任何地方未使用的冗余 CSS。

通过删除未使用的代码，我们可以最小化 CSS 文件的大小。

转到任何选项卡（如控制台选项卡）并按下 Esc 键。
您将看到“覆盖范围”选项卡。（如果默认未显示“覆盖范围”选项卡，请点击左侧的三个点并选择“覆盖范围”选项卡）

点击显示的重新加载按钮开始覆盖
它将显示所有 JavaScript 和 CSS 文件
在搜索框中搜索 .css 来过滤结果
双击任何 .css 文件，它将以红色突出显示未使用的 CSS

计算代码执行时间

console.time和console.timeEnd函数使我们能够找出执行特定代码所需的时间。

console.time('users');
axios.get('https://randomuser.me/api/?page=1&results=20').then((response) => {
  console.timeEnd('users');
});

一旦执行上述代码，您将看到输出，在这种情况下显示所花费的时间（以毫秒为单位）。

以表格格式打印 JSON 数组

如果您有一个 JSON 对象数组，您可以使用它console.table以表格格式获取结果，以便更好地分析它

创建新的内联组以实现更好的日志记录

如果您有一个循环遍历项目，并且想要查看每次迭代期间的变量值，则可以使用console.groupCollapsed方法。它使我们能够轻松地查看输出，而不会使控制台变得混乱。

axios.get('https://randomuser.me/api/?page=1&results=5').then((response) => {
  const users = response.data;
  users.results.forEach((user) => {
    const name = user.name;
    const location = user.location;
    const email = user.email;

    console.groupCollapsed('User Details');
    console.log(name);
    console.log(location);
    console.log(email);
    console.groupEnd('User Details');
  });
});