6个有用的书签来促进网络开发

书签小工具（Bookmarklet）是基于 JavaScript 的书签，可添加到 Web 浏览器中。本文将向您展示一些强大的浏览器技巧，以帮助您改进 Web 开发工作流程，以及如何将这些技巧转换为节省时间的书签小工具。

1. 激活设计模式
2. 为所有元素应用背景
3. 模拟事件
4. 设置 Cookie
5. 切换类
6. 颜色选择器书签
7. 你还能想到哪些其他的书签小工具？

激活设计模式

设计模式（由于它是 JavaScript 属性，因此样式为 designMode）适用于喜欢在实时网站上试验不同文案变化的人。例如，喜欢观察内容在网站设计流程中阅读效果的文案撰写者，或者想要确保文本在特定字体大小下舒适地适应特定空间的设计师。

JavaScript 具有一个非常简单的功能，可以使整个 HTML 文档可编辑。它的工作原理与 HTML 的 contenteditable="true" 名值属性（或 JavaScript 中的 contentEditable="true"）完全相同，但适用于整个文档。如果您想了解其工作原理，请首先使用相关的键盘快捷键打开浏览器的控制台：

• Chrome: Option ⌘ J / Shift CTRL J
• Firefox: Option ⌘ K / Shift CTRL K
• Safari: Option ⌘ C / Shift CTRL C

接下来，在控制台中键入 document.designMode="on"，按 Return，然后单击任何文本元素。您会看到，只需单击这些文本元素（以及所有其他文本元素），即可对其进行编辑。这种在实时网站上编辑文本的方法比打开 DevTools，然后右键单击并选择“编辑文本”选项要快得多，也省力得多。

虽然我不确定“设计模式”是否是该功能最准确的描述，但它仍然非常有用，而且令人惊讶的是，它已经存在了很长时间。

那么，启用它的更快方法是什么呢？当然是书签小工具！使用 javascript: document.designMode="on";void 0; 作为 URL 创建一个书签。

为所有元素应用背景

当 HTML 元素没有背景时，很难可视化它们的边界和/或准确测量它们与其他元素之间的距离。开发人员在处理视觉不平衡（即即使某物“看起来不对劲”，但实际上并非如此）、边距折叠（忽略某些边距）、各种 display:/float:/position: 问题等时，可能需要更好地可视化边界。

应用背景意味着为所有 HTML 元素应用半透明背景，以便更好地可视化它们的边界和间距。我们很多人通常通过打开 DevTools 然后在“样式”框中键入类似 selector { background: rgb(0 0 0 / 10%); } 的 CSS 声明来做到这一点。但是，这仍然非常费力且重复——我们可以使用书签小工具来简化它。

同样，要创建一个书签，我们将创建一个 URL。以下是我们可以为此使用的内容：

javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");

我们使用半透明背景，因为透明度会叠加，这确保每个嵌套元素都是可区分的，并且可以测量它们之间的距离。

模拟事件

您是否曾经需要测试一个 Web 事件，该事件首先需要一系列交互或满足某些条件？测试或调试这些类型的功能非常耗时。此事件模拟书签小工具可用于立即触发特定事件，从而使测试变得轻而易举。

模拟事件意味着编写一个“临时”按钮来触发 JavaScript 事件，从而更容易快速重复地测试事件，而无需满足任何通常的用户界面条件，例如需要登录。

假设您已设置好 JavaScript 事件侦听器，请为要触发/模拟的每个事件创建一个书签，并提交以下 URL：

javascript: document.querySelector("SELECTOR").click();

将“SELECTOR”替换为您唯一的选择器，将“click”替换为“focus”或“blur”（必要时），或扩展代码段以使其触发更复杂的事件，例如滚动。

设置 Cookie

Cookie 是由网站访问者访问的网站存储在网站访问者计算机上的令牌。Cookie 包含可由创建它们的网站读取的数据，直到它们超过其过期日期或已被删除。Cookie 的存在本身可以确定访问者是否已登录，而数据本身可以存储用户信息。

您可能想要使用书签小工具设置 Cookie 的一个示例场景是当您想要在网站测试期间强制登录状态时。网站在登录用户和未登录用户的情况下通常看起来非常不同，但是登录和注销最终会变得非常繁琐，因此此书签小工具可以节省大量时间。

手动为 Cookie 编写 expires= 日期非常麻烦，但幸运的是，此创建您自己的设置 Cookie 书签小工具应用程序可以为特定 Cookie 生成书签小工具，如果您知道其确切名称。

切换类

您可能想要向 HTML 元素添加或删除类以触发新状态或外观变化，也称为切换类。类切换发生在大多数实时网站的幕后，但它也可以在测试期间用于跳过满足某些用户界面条件。

类切换可用于触发外观变化（例如备用主题或状态）甚至动画，但在仅出于测试目的（即网站实际上并未以这种方式为用户运行）时，使用开发者工具进行操作可能会有点棘手。与其他书签小工具类似，使用此书签小工具可以快速切换类并节省时间。

创建以下书签小工具以定位与您选择的“SELECTOR”匹配的所有元素，这反过来会切换“CLASS”。

javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));

颜色选择器书签

虽然从技术上讲它不是“书签小工具”，但 Scott Jehl 的这个可书签化的数据 URI 在新标签页中打开了一个：

所以，这是我的新颜色选择器应用程序！ 它只是一个包含在数据 URI 中的 HTML 颜色输入，因此我可以将其添加为书签。（您可以自己添加）：

data:text/html;charset=utf-8,<title>Color Picker</title> <input type="color">

这为什么很酷？好吧，您需要从页面上获取颜色值多少次，却发现自己打开 DevTools，单击一堆元素，并仔细检查 CSS 属性以查找该值？最好运行这个小工具，单击该元素，然后立即获取颜色！

你还能想到哪些其他的书签小工具？

是否有任何过于重复的 Web 开发工作流程需要您使用 Web 浏览器的有时很麻烦的开发者工具？如果是这样，创建您自己的节省时间的书签小工具非常容易。只需记住以 javascript: 开头即可。

如果您已经创建了书签小工具来简化您的工作流程，我很想看到它！请在评论中分享它们，让我们创建一个不错的集合。

以上是6个有用的书签来促进网络开发的详细内容。更多信息请关注PHP中文网其他相关文章！