6 个提升 Web 开发效率的实用书签工具

书签工具是一种基于 JavaScript 的书签，可添加到 Web 浏览器中。我想向您展示一些很棒的 Web 浏览器技巧，以帮助您提高 Web 开发工作流程，以及如何将这些技巧转换为节省时间的书签工具。

激活设计模式
为所有元素应用背景
模拟事件
设置 Cookie
切换类
颜色小部件书签
您还能想到哪些其他书签工具？

激活设计模式

设计模式（由于它是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，然后右键单击并选择“编辑文本”选项快得多……并且不那么令人厌烦。

Showing an edited version of the CSS-Tricks guide landing page using the design mode bookmarklet. — “指南和内容”——我最喜欢的 CSS-Tricks 部分

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

那么，启用它的更快方法是什么呢？当然是用书签工具！使用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%)");

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

Showing the CSS-Tricks guides landing page with all backgrounds fill with varying shades of gray. — 为所有内容应用背景以查看发生了什么。

模拟事件

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

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

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

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

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

设置 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在一个新标签页中打开了一个<input type="color">

所以，这是我的新颜色选择器应用程序！
它，只是一个包装在数据 URI 中的 HTML 颜色输入，以便我可以将其添加为书签。（随时自行添加）

data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D”color”%3E%3C%2Fhtml%3E pic.twitter.com/0QyFqAsUSq
— Scott Jehl (@scottjehl) 2021 年 8 月 19 日

data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D"color"%3E%3C%2Fhtml%3E

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

您还能想到哪些其他书签工具？

是否存在任何需要您使用 Web 浏览器有时很笨拙的开发者工具的重复性 Web 开发工作流程？如果是这样，创建您自己的节省时间的书签工具非常容易。只需记住以javascript:开头 URL！

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

swyx

# 2022年3月28日

let videoElements = Array.from(document.querySelectorAll('video'));
  videoElements.forEach((videoElement) => {
     videoElement.playbackRate = playbackRate
  })

Mordechai

# 2022年3月28日

Eruda！移动设备的DevTools

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net.cn/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Joe

# 2022年3月28日

我希望我们可以在一个小弹出窗口中打开那个颜色选择器。我尝试过window.open，但它似乎不适用于data URL。

我可能只需要托管一个仅包含颜色选择器的网页，并使用书签将其打开在一个小的弹出窗口中。

Mr.Corvo

评论永久链接# 2022年3月30日
```
javascript:window.open('', '', `popup,width=100,height=100,left=${window.screen.availWidth - 140},top=${window.screen.availHeight - 100}`).document.body.innerHTML = '<input type="color">';location.reload(true);
```
使用它。
这在我的Chrome浏览器中有效。

更多信息
window.open(url, target, windowFeatures);
我设置了windowFeatures，以便窗口位于左下方并且尽可能小。然后我将“添加到body中。然后我重新加载页面，因为我想要检查的活动选项卡也会将“添加到body中。所以它起作用了
Daniel Schwarz

评论永久链接# 2022年3月31日
Joe，你可以做的一件事是将<input type="color">追加到文档中。未经测试，但也许是这样的？
```
javascript:let input=document.createElement("input");input.setAttribute("type","color");document.head.append(input);input.click();
```
追加到head应该会使它呈现为无样式的。

Caleb

# 2022年4月2日

这有效。它打开一个空窗口，然后将input元素追加到它的document中。

javascript:var d=window.open("","_blank", "toolbar=yes,scrollbars=yes,resizable=yes,width=300,height=300");d.document.write('<input type="color">');d.document.close()

Douz

评论永久链接# 2022年4月4日

@Daniel Schwarz，不错；)
但是，如果您通过点击页面将其隐藏并想要再次显示它，则会抛出错误。

这是一个小的改进，可以使其每次都出现
javascript:document.head.append(document.createElement("input").setAttribute("type","color"));input.click();

Grant McLean

# 2022年3月28日

我有一个书签，它将在一个小弹出窗口中呈现当前页面的URL作为二维码。这允许我轻松地在多个移动设备上加载任何页面进行测试。

Daniel Schwarz

评论永久链接# 2022年3月31日

太棒了。请分享它！
Salome Iohann

评论永久链接# 2022年4月7日

Chrome桌面版默认自带此功能，点击地址栏右侧的小箭头。

Rich Werden

# 2022年3月28日

我有一个用于布局调试的书签，它会在页面上的所有元素周围添加不同颜色的边框（基于关系）

javascript:!function(a){for(a.__CSSDebug__=!a.__CSSDebug__,i=0;A=document.all[i++];)A.style.outline=a.__CSSDebug__?%22solid%20hsl(%22+9*(A+A).length+%22,99%,50%)1px%22:null}(window)

Rich Werden

# 2022年3月28日

另外，CSS-Tricks 的“Printliminator”书签在哪里？

javascript:(function(){function loadScript(a,b){var c=document.createElement('script');c.type='text/javascript';c.src=a;var d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2%27,function(){loadScript(%27https://css-tricks.cn/examples/ThePrintliminator/js/printliminator.js%27,function(){printlimator()})})})()

Khodok

# 2022年3月29日

应用背景的那个很好，但我一直很喜欢这个版本，它是一样的，只是它很丰富多彩（也允许查看深度）

javascript: (function (){let domStyle=document.getElementById('domStylee');if(domStyle){document.body.removeChild(domStyle);return;} domStyle=document.createElement('style');domStyle.setAttribute('id','domStylee');domStyle.append(['* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }'],['* * { background-color: rgba(0,255,0,.2) !important; }'],['* * * { background-color: rgba(0,0,255,.2) !important; }'],['* * * * { background-color: rgba(255,0,255,.2) !important; }'],['* * * * * { background-color: rgba(0,255,255,.2) !important; }'],['* * * * * * { background-color: rgba(255,255,0,.2) !important; }'],['* * * * * * * { background-color: rgba(255,0,0,.2) !important; }'],['* * * * * * * * { background-color: rgba(0,255,0,.2) !important; }'],['* * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }'].join());document.body.appendChild(domStyle);})();

JC

评论永久链接# 2022年3月30日

@Khodok – 谢谢 – 它也可以切换。

Christoph Wagner

# 2022年3月29日

仅仅因为设计模式书签需要支持切换；)

javascript:document.designMode=(document.designMode=="on"?"off":"on");void 0;

Daniel Schwarz

评论永久链接# 2022年3月31日

切换它不会使文本恢复正常，所以我倾向于直接刷新。但不错！

Robert

# 2022年3月29日

我真的很喜欢书签。以下是我的一些收藏

禁用表单验证

为了测试服务器端表单验证，我在所有表单中禁用了客户端验证。这允许发送包含错误的表单并检查服务器端是否正确处理了这些错误。

document.querySelectorAll('form').forEach(form => form.noValidate = true)

移除覆盖层

这将生成一个一次性点击处理程序，它将移除我点击页面上的下一个元素。我主要使用它来移除烦人的覆盖层、新闻通讯横幅、隐私声明等。

(function() {
    (function() {
        var clickHandler = (event) => {
            event.preventDefault();
            document.removeEventListener('click', clickHandler);
            var element = document.elementFromPoint(event.clientX, event.clientY);
            if (!element) {
                return;
            }
            var positions = ['fixed', 'absolute'];
            while (element && !positions.includes(getComputedStyle(element).position)) {
                element = element.parentNode;
            }
            if (element && element.remove) {
                element.remove();
            }
            document.documentElement.style.overflow = 'auto !important';
            document.body.style.overflow = 'auto !important';
        };
        document.addEventListener('click', clickHandler)
    })()
})()

生成锚点

这将绑定一个一次性点击处理程序，它将为下一个被点击的元素生成一个锚点，如果它有ID。如果所有元素都用具有ID的元素包装，这使得轻松共享指向页面上特定元素的链接变得容易。
例如，我点击书签，然后我点击本文中的标题，我的地址栏更改为

6个提升 Web 开发的实用书签

(function() {
    clickHandler = (event) => {
        event.preventDefault();
        document.removeEventListener('click', clickHandler);
        var element = document.elementFromPoint(event.clientX, event.clientY);
        if (!element) {
            return;
        }
        while (element && !element.id) {
            element = element.parentNode;
        }
        if (element && element.id) {
            location.hash = element.id;
        }
    };
    document.addEventListener('click', clickHandler)
})()

Chris Haglund

评论永久链接# 2022年11月9日

无效的 URL，Chrome 确认。尝试删除所有空格和换行符，但没有帮助

Dustin Hart

# 2022年3月29日

有没有人能够在 Microsoft Edge 中使用这些书签？我使用的是 98.0.1108.92 版本，并且无法运行它们。

Berend

评论永久链接# 2022年3月30日

是的，在最新版本的 Edge 中没有问题。

JaranF

# 2022年3月29日

@DustinHart。是的，我在 MS Edge 中做到了。虽然我习惯于按 Ctrl + D 来“添加收藏夹”，但这不适用于保存书签。我必须做的是 Ctrl + Shift + O（即 O 代表奥斯卡），找到一个我想变成书签的条目，右键单击“编辑”它，然后手动将它的 URL 字段更改为 JavaScript: ….some_js_code_etc

顺便说一句，很棒且有趣的文章。比我的书签更有趣，我的书签用于无聊的事情，例如从亚马逊移除广告或关闭 GDPR 同意模态

JaranF

# 2022年3月30日

@DanielSchwarz 您可能需要考虑的一件事是，为了使您的书签更易于重复使用，允许用户在每次使用时指定 SELECTOR，而不是必须编辑书签本身。
例如，您的“模拟点击”书签将变成。
javascript:!function() { let s=prompt('Selector?','');void(document.querySelector(s).click());}()

Daniel Schwarz

评论永久链接# 2022年3月31日

不错！如果您有很多书签需要管理，这绝对是一种更好的方法。
JaranF

评论永久链接# 2022年4月6日

@DanielSchwartz。谢谢。这是一篇很好的文章，因为很多好的想法都被提出来了。

Chris Wachtman

# 2022年3月30日

这些书签很棒。我肯定会在我的工作中使用设计模式和颜色选择器。

我尝试了一个 gulp 设置，用于创建具有 UI 元素的复杂书签。作为一个概念，我创建了一个Music-Bookmarklet，它会在您当前页面上查找 mp3 链接，并创建一个包含歌曲播放列表的音频播放器。

要创建简单的书签，我喜欢Peter Coles Bookmarklet Creator

Koen Cornelis

# 2022年3月31日

这是一个用于查找溢出的书签。它添加了 1px 的红色轮廓和 3 向盒子阴影，因此无论元素的背景颜色是什么，您都可以非常轻松地找到罪魁祸首。
为了全面起见，它还会添加一个错误元素的控制台日志。

javascript:(function() {
  var docWidth = document.documentElement.offsetWidth;

  [].forEach.call(
    document.querySelectorAll('*'),
    function(el) {
      if (el.offsetWidth > docWidth) {
        console.log(el);
        el.style.boxshadow = "0 0 0 2em white,
              0 0 0 4em red,0 0 0 6em white";
        el.style.outline = "1px solid red";
      }
    }
  );
})()

Adrian Roselli 这里也有很多有用的书签：https://adrianroselli.com/2015/01/css-bookmarklets-for-testing-and-fixing.html

Bob

# 2022年4月1日

在页面扫描服务中打开当前页面。例如 PageSpeed Insights

javascript:(function(){location.href='https://pagespeed.web.dev/report/?url=%27+window.location.href+%27&hl=en%27})();

Daniel Schwarz

评论永久链接# 2022年4月25日

不错！我使用 Alfred + NPM + 一个config.js来实现这一点。

Artem

# 2022年4月1日

我编写了一段代码来突出显示和取消突出显示元素

javascript:document.querySelectorAll(‘body *’).forEach(function(el){let a = el.getAttribute(‘data-highlighted’);if(typeof a !== ‘undefined’ && a === ‘true’){let b = el.getAttribute(‘data-prev-bg-color’);if(typeof b !== ‘undefined’){el.style.backgroundColor = b;}else {el.style.backgroundColor=”initial”;}el.removeAttribute(‘data-highlighted’);el.removeAttribute(‘data-prev-bg-color’)}else {let c = el.style.backgroundColor;el.style.backgroundColor=”rgba(255,255,0,0.1)”;el.setAttribute(‘data-prev-bg-color’, c);el.setAttribute(‘data-highlighted’, ‘true’);}});

Thomas

# 2022年4月3日

我在https://bookmarklets.websec.blog/上创建了一些我使用的书签的集合

随意发送 PR 添加更多有用的书签

Jake Paris

# 2022年4月6日

当您在任何 WordPress 页面上时，登录到 WP，然后返回到您所在的页面

javascript:location.href='http://'+window.location.host+'/wp-login.php?redirect_to=%27+encodeURIComponent(window.location);

meblum

# 2022年7月14日

检查隐藏密码！

(() => { document.querySelectorAll('input[type="password"]').forEach(e => e.setAttribute('type', 'text')) })();

激活设计模式

为所有元素应用背景

模拟事件

设置 Cookie

切换类

颜色小部件书签

您还能想到哪些其他书签工具？

评论

发表评论 取消回复

发表评论取消回复