释放 Chrome DevTools 代码片段的强大功能

Chrome DevTools 中的 Snippets 面板是一个经常被忽视的强大工具。 代码片段允许开发人员直接在浏览器中编写、保存和运行自定义 JavaScript 代码。此功能有助于实验、调试和演示 JavaScript，而无需启动新的本地/开发/登台实例。

在本文中，我想重点介绍“代码片段”面板的功能，同时为您的日常开发工作提供一些实际用途。

什么是片段面板？

Chrome DevTools 中的 Snippets 面板本质上是一个迷你代码编辑器，您可以在其中编写和保存可重用的 JavaScript 代码。与在控制台中输入命令不同，代码片段允许您：

• 保存您的代码以供重复使用。
• 只需单击一下即可运行脚本。
• 在浏览器会话之间共享代码。
• 使用断点和监视表达式调试脚本。

如何访问

您可以通过打开 DevTools 来访问 Snippets（右键单击 > Inspect > Sources > Snippets）。

但为什么？

在上一篇文章中，我介绍了使用控制台来帮助调试网站的不同方法。 片段超出了这个范围。 直接将 JavaScript 添加到控制台是可行的，但对于重复的任务来说有点烦人。 这就是片段发挥作用的地方。 这允许重复和扩展脚本。

代码片段位于控制台和启动您自己的本地实例之间的中间位置。

实际用途

演示

在您职业生涯的某个阶段，您可能需要直接与客户互动或为内部团队演示某些内容。 片段允许您在无法访问代码的实时网站上显示潜在的更新。 我使用片段向客户展示了某些更改的潜力，包括批量 CSS 更新、重新排列部分以及实时站点的操作。 通过控制台或 Elements 控制台操作 CSS 对于单个实例来说效果很好，但片段在批量更新方面表现出色。

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

抓取网站

根据您的代理机构，您可能需要将入职客户转换为您自己公司的专有模板。 根据客户的设置，您可能无法使用预构建的抓取工具来选择您自己的自定义抓取工具。我使用片段来测试抓取站点，以确保我们只从适当的元素中提取数据。当您在难以抓取的网站上工作且所需数据位于页面上且在后端不可用时，这会很有帮助。

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

重复性任务

如果您正在手动测试站点并且刚开始一遍又一遍地重复任务。 也许您需要重复单击事件才能查看用户的体验。编写一个片段对于重复执行此操作非常有帮助。将代码片段与脚本中的断点结合起来，以帮助完成更长的工作流程。

const h1 = document.querySelector('h1').innerText;
console.log(h1);

结论

代码片段面板是一个多功能工具，可以增强您的开发工作流程。通过自动化任务、高效调试和分析内容，您将在日常工作中节省时间和精力。

代码片段有不同的用例吗？在下面的评论中分享吧！

以上是释放 Chrome DevTools 代码片段的强大功能的详细内容。更多信息请关注PHP中文网其他相关文章！