6 Nützliche Bookmarklets zur Verbesserung der Webentwicklung

Avatar of Daniel Schwarz
Daniel Schwarz am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ein Bookmarklet ist ein Lesezeichen, das auf JavaScript basiert und zu einem Webbrowser hinzugefügt wird. Ich möchte Ihnen einige großartige Webbrowser-Hacks zeigen, die Ihren Workflow in der Webentwicklung unterstützen, und wie Sie diese Hacks in zeitschonende Bookmarklets umwandeln.

  1. Designmodus aktivieren
  2. Einen Hintergrund für alles anwenden
  3. Ereignisse simulieren
  4. Cookies setzen
  5. Klassen umschalten
  6. Farb-Widget-Lesezeichen
  7. An welche anderen Bookmarklets können Sie denken?

Designmodus aktivieren

Der Designmodus (gestaltet als designMode, da es sich um eine *JavaScript-Eigenschaft* handelt) ist für diejenigen gedacht, die gerne mit Variationen von Text auf einer Live-Website experimentieren. Zum Beispiel Copywriter, die beobachten möchten, wie Inhalte im Fluss des Website-Designs gelesen werden, oder Designer, die sicherstellen möchten, dass Text bei einer bestimmten Schriftgröße bequem in einen bestimmten Bereich passt.

JavaScript verfügt über eine äußerst einfache Funktion, die ein ganzes HTML-Dokument editierbar rendert. Sie funktioniert *genau* wie das HTML-Attribut contenteditable="true" (oder contentEditable="true" in JavaScript), aber für das gesamte Dokument. Wenn Sie sehen möchten, wie es funktioniert, beginnen Sie, indem Sie mit der entsprechenden Tastenkombination die Konsole des Browsers öffnen

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

Geben Sie als Nächstes document.designMode="on" in die Konsole ein, drücken Sie Enter und klicken Sie dann auf ein beliebiges Textelement. Sie werden sehen, dass dieses Textelement (und alle anderen Textelemente) nun einfach durch Anklicken editierbar sind. Diese Methode zur Bearbeitung von Text auf einer Live-Website ist *viel* schneller, als die DevTools öffnen, dann mit der rechten Maustaste klicken und die Option „Text bearbeiten“ auswählen zu müssen… und *viel* weniger mühsam.

Showing an edited version of the CSS-Tricks guide landing page using the design mode bookmarklet.
„Guides und Thangs“ – mein Lieblingsteil von CSS-Tricks

Obwohl ich mir nicht sicher bin, ob „Designmodus“ die genaueste Beschreibung der Funktion ist, ist sie dennoch äußerst nützlich und erstaunlicherweise schon sehr lange verfügbar.

Und was ist ein noch schnellerer Weg, ihn zu aktivieren? Ein Bookmarklet, natürlich! Erstellen Sie ein Lesezeichen mit javascript: document.designMode="on";void 0; als URL.

Showing the bookmarklet installation.

Einen Hintergrund für alles anwenden

Wenn HTML-Elemente keine Hintergründe haben, kann es schwierig sein, ihre Umrisse zu visualisieren und/oder die Abstände zu anderen Elementen genau zu messen. Entwickler möchten möglicherweise die Umrisse besser visualisieren, wenn sie sich mit optischer Unwucht (d. h. wenn etwas „falsch aussieht“, obwohl es das nicht tut), Margin Collapsing (wenn bestimmte Ränder ignoriert werden), verschiedenen Problemen mit display:/float:/position: usw. befassen.

Das Anwenden von Hintergründen bedeutet, allen HTML-Elementen einen halbtransparenten Hintergrund anzuwenden, um ihre Umrisse und Abstände besser zu visualisieren. Viele von uns tun dies üblicherweise, indem sie die DevTools öffnen und dann eine CSS-Deklaration wie selector { background: rgb(0 0 0 / 10%); } in das Feld „Styles“ eingeben. Aber auch hier ist es *wirklich* mühsam und repetitiv – und etwas, das wir mit einem Bookmarklet vereinfachen können.

Auch hier werden wir eine URL erstellen, um ein Lesezeichen zu erstellen. Hier ist, was wir für dieses hier verwenden können

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

Wir verwenden einen halbtransparenten Hintergrund, da sich die Transparenz stapelt, wodurch sichergestellt wird, dass jedes verschachtelte Element unterscheidbar ist und die Abstände zwischen ihnen gemessen werden können.

Showing the CSS-Tricks guides landing page with all backgrounds fill with varying shades of gray.
Wenden Sie einen Hintergrund auf alles an, um zu sehen, was passiert.

Ereignisse simulieren

Mussten Sie jemals ein Webereignis testen, das zunächst eine Reihe von Interaktionen oder bestimmte Bedingungen erfordert? Es ist sehr zeitaufwändig, diese Art von Funktionalität testen oder debuggen zu müssen. Dieses Bookmarklet zur Ereignissimulation kann verwendet werden, um bestimmte Ereignisse sofort auszulösen und das Testen zu einem Kinderspiel zu machen.

Ein Ereignis zu simulieren bedeutet, einen „wegwerfbaren“ Button zu programmieren, der ein JavaScript-Ereignis auslöst, was es viel einfacher macht, das Ereignis schnell und wiederholt zu testen, ohne die üblichen benutzerbezogenen Bedingungen erfüllen zu müssen, wie z. B. eingeloggt sein zu müssen.

Unter der Annahme, dass Sie Ihre JavaScript-Ereignis-Listener eingerichtet haben, erstellen Sie für jedes Ereignis, das Sie auslösen/simulieren möchten, ein Lesezeichen und senden Sie die folgende URL

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

Ersetzen Sie „SELECTOR“ durch Ihren eindeutigen Selektor, ersetzen Sie „click“ durch „focus“ oder „blur“ (falls erforderlich) oder erweitern Sie den Ausschnitt, um komplexere Ereignisse auszulösen, wie z. B. scroll.

Cookies setzen

Cookies sind Tokens, die von der besuchten Website auf dem Computer eines Website-Besuchers gespeichert werden. Cookies enthalten Daten, die von der Website, die sie erstellt hat, gelesen werden können, bis sie ihr Ablaufdatum überschritten haben oder gelöscht wurden. Allein die Existenz eines Cookies kann bestimmen, ob ein Besucher angemeldet ist oder nicht, während die Daten Benutzerinformationen speichern können.

Ein Beispiel für ein Szenario, in dem Sie möglicherweise ein Cookie mit einem Bookmarklet setzen möchten, ist, wenn Sie während des Website-Testings einen angemeldeten Zustand erzwingen möchten. Websites sehen oft sehr unterschiedlich aus für angemeldete Benutzer. Das Ein- und Ausloggen wird jedoch schließlich sehr mühsam, sodass dieses Bookmarklet eine ganze Menge Zeit sparen kann.

Manuell Ablaufdaten für Cookies einzugeben ist ziemlich umständlich, aber glücklicherweise kann diese App zum Erstellen eigener Cookie-Bookmarklets ein Bookmarklet für ein bestimmtes Cookie generieren, wenn Sie dessen genauen Namen kennen.

Klassen umschalten

Sie möchten möglicherweise eine Klasse zu einem HTML-Element hinzufügen oder daraus entfernen, um einen neuen Zustand oder eine optische Veränderung auszulösen, auch bekannt als Klassen umschalten. Das Umschalten von Klassen geschieht hinter den Kulissen der meisten Live-Websites, kann aber auch während des Testens verwendet werden, um die Erfüllung bestimmter benutzerbezogener Bedingungen zu überspringen.

Das Umschalten von Klassen kann verwendet werden, um optische Veränderungen (z. B. alternative Themen oder Zustände) und sogar Animationen auszulösen, aber es kann bei der Verwendung von Entwicklertools etwas fummelig sein, wenn es nur zu Testzwecken dient (d. h. die Website funktioniert für Benutzer nicht wirklich so). Ähnlich wie bei den anderen Bookmarklets verwenden Sie dieses, um Klassen schnell umzuschalten und Zeit zu sparen.

Erstellen Sie das folgende Bookmarklet, um alle Elemente anzusprechen, die Ihrem gewählten „SELECTOR“ entsprechen, was wiederum die „CLASS“ umschaltet.

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

Farb-Widget-Lesezeichen

Obwohl dies technisch gesehen kein „Bookmarklet“ ist, öffnet dieser lesezeichenfähige Daten-URI von Scott Jehl ein <input type="color"> in einem neuen Tab

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

Warum ist das cool? Nun, wie oft mussten Sie einen Farbwert von einer Seite abrufen und fanden sich dabei wieder, wie Sie die DevTools geöffnet haben, durch eine Reihe von Elementen geklickt und CSS-Eigenschaften durchforstet haben, um den Wert zu finden? Besser, Sie führen diesen kleinen Kerl aus, klicken auf das Element und erhalten sofort eine Farbe!

An welche anderen Bookmarklets können Sie denken?

Gibt es übermäßig repetitive Arbeitsabläufe in der Webentwicklung, bei denen Sie die manchmal umständlichen Entwicklertools des Webbrowsers verwenden müssen? Wenn ja, ist es *super einfach*, Ihre eigenen zeitschonenden Bookmarklets zu erstellen. Denken Sie nur daran, die URL mit javascript: beginnen zu lassen!

Und wenn Sie ein Bookmarklet zur Vereinfachung Ihres Workflows erstellt haben, würde ich es gerne sehen! Teilen Sie sie hier in den Kommentaren und lassen Sie uns eine schöne Sammlung zusammenstellen.

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. swyx
    Permalink zum Kommentar# 
    let videoElements = Array.from(document.querySelectorAll('video'));
  videoElements.forEach((videoElement) => {
     videoElement.playbackRate = playbackRate
  })
    Antworten
  2. Mordechai
    Permalink zum Kommentar#

    Eruda! DevTools für mobile Geräte

    javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
    Antworten
  3. Joe
    Permalink zum Kommentar#

    Ich wünschte, wir könnten diesen Farbwähler in einem kleinen Popup öffnen. Ich habe window.open ausprobiert, aber es scheint mit Daten-URLs nicht zu funktionieren.

    Ich werde vielleicht einfach eine Webseite mit nur einem Farbwähler darauf hosten und das Bookmarklet verwenden, um sie in einem kleinen Popup zu öffnen.

    Antworten
    • Mr.Corvo
      Permalink zum Kommentar# 
      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);

      Benutze es.
      Das funktioniert in meinem Chrome.

      Weitere Informationen
      window.open(url, target, windowFeatures);
      Ich habe windowFeatures so eingestellt, dass das Fenster unten links und so klein wie möglich ist. Dann füge ich `" "` zum Body hinzu. Und dann lade ich die Seite neu, da mein aktiver Tab, den ich überprüfen möchte, auch `" "` zum Body hinzufügt. Also funktioniert es.

    • Daniel Schwarz
      Permalink zum Kommentar#

      Eine Sache, die Sie tun können, Joe, ist <input type="color"> zum Dokument hinzuzufügen. Ungetestet, aber vielleicht so etwas?

      javascript:let input=document.createElement("input");input.setAttribute("type","color");document.head.append(input);input.click();

      Das Anhängen an den Kopf sollte es ungestylt rendern.

    • Caleb
      Permalink zum Kommentar#

      Das funktioniert. Es öffnet ein leeres Fenster und fügt dann das input-Element zum document desselben hinzu.

      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
      Permalink zum Kommentar#

      @Daniel Schwarz, gut gemacht ;)
      Aber wenn man es durch Klicken auf die Seite versteckt und es wieder anzeigen möchte, wirft es einen Fehler.

      Hier ist eine kleine Verbesserung, um es immer erscheinen zu lassen
      javascript:document.head.append(document.createElement("input").setAttribute("type","color"));input.click();

  4. Grant McLean
    Permalink zum Kommentar#

    Ich habe ein Bookmarklet, das die URL der aktuellen Seite als QR-Code in einem kleinen Popup-Fenster anzeigt. Dies ermöglicht es mir, jede Seite einfach für Tests auf mehreren mobilen Geräten zu laden.

    Antworten
  5. Rich Werden
    Permalink zum Kommentar#

    Ich habe ein Bookmarklet für das Layout-Debugging, das verschiedenenfarbige Rahmen (basierend auf Beziehungen) um alle Elemente einer Seite legt

    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)
    Antworten
  6. Rich Werden
    Permalink zum Kommentar#

    Außerdem, wo ist die Liebe für das CSS-Tricks „Printliminator“ Bookmarklet?

    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.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2%27,function(){loadScript(%27https://css-tricks.de/examples/ThePrintliminator/js/printliminator.js%27,function(){printlimator()})})})()
    Antworten
  7. Khodok
    Permalink zum Kommentar#

    Das mit dem Hintergrund anwenden ist nett, aber ich war schon immer ein Fan dieser Version, sie ist dieselbe, nur dass sie farbig ist (was auch die Tiefe erkennen lässt).

    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);})();

    Antworten
  8. Christoph Wagner
    Permalink zum Kommentar#

    Nur damit der Designmodus-Bookmarklet auch das Umschalten unterstützt ;)

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

    Antworten
    • Daniel Schwarz
      Permalink zum Kommentar#

      Das Umschalten setzt den Text nicht auf normal zurück, daher aktualisiere ich meistens. Aber nett!

  9. Robert
    Permalink zum Kommentar#

    Ich mag Bookmarklets wirklich. Hier sind einige meiner Favoriten

    Formularvalidierung deaktivieren

    Um die serverseitige Formularvalidierung zu testen, deaktiviere ich die clientseitige Validierung in allen Formularen. Dies ermöglicht das Senden von Formularen mit Fehlern und die Überprüfung, ob der Server diese Fehler korrekt behandelt.

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

    Overlay entfernen

    Dies generiert einen einmaligen Klick-Handler, der das nächste Element entfernt, auf das ich auf der Seite klicke. Ich benutze dies meistens, um nervige Overlays, Newsletter-Banner, Datenschutzhinweise usw. zu entfernen.

    (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)
    })()
})()

    Anker generieren

    Dies bindet einen einmaligen Klick-Handler, der einen Anker für das nächste angeklickte Element generiert, wenn es eine ID hat. Dies erleichtert das Teilen von Links zu bestimmten Elementen auf einer Seite, wenn alle Elemente mit einem Element umschlossen sind, das eine ID hat.
    Zum Beispiel klicke ich auf das Bookmarklet, dann auf die Überschrift hier im Artikel und meine Adressleiste ändert sich zu

    6 nützliche Bookmarklets zur Verbesserung der Webentwicklung

    (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)
})()
    Antworten
    • Chris Haglund
      Permalink zum Kommentar#

      Ungültige URL, laut Chrome. Habe versucht, alle Leerzeichen und Zeilenumbrüche zu entfernen, aber es hat nicht geholfen

  10. Dustin Hart
    Permalink zum Kommentar#

    Konnte jemand diese Art von Bookmarklets in Microsoft Edge zum Laufen bringen? Ich benutze Version 98.0.1108.92 und konnte sie nicht ausführen.

    Antworten
  11. JaranF
    Permalink zum Kommentar#

    @DustinHart. Ja, ich habe es in MS Edge geschafft. Während ich es gewohnt bin, Strg + D zu drücken, um „Favorit hinzufügen“, funktioniert das nicht zum Speichern eines Bookmarklets. Was ich tun musste, war Strg + Shift + O (das ist O wie Oscar), einen Eintrag finden, der zu einem Bookmarklet werden sollte, mit der rechten Maustaste darauf klicken, ihn ‚Bearbeiten‘ und dann sein URL-Feld von Hand in JavaScript: ….einige_js_code_etc ändern.

    Übrigens, toller und interessanter Artikel. Viel interessanter als meine Bookmarklets, die für langweilige Dinge wie das Entfernen von Anzeigen von Amazon oder das Töten von DSGVO-Zustimmungsmodals sind.

    Antworten
  12. JaranF
    Permalink zum Kommentar#

    @DanielSchwarz Ein Punkt, den Sie vielleicht in Betracht ziehen sollten, um Ihre Bookmarklets wiederverwendbarer zu machen, ist, dem Benutzer jedes Mal, wenn er es verwendet, den SELECTOR angeben zu lassen, anstatt das Bookmarklet selbst bearbeiten zu müssen.
    Zum Beispiel würde Ihr „Simuliere Klick“-Bookmarklet so aussehen.
    javascript:!function() { let s=prompt('Selector?','');void(document.querySelector(s).click());}()

    Antworten
    • Daniel Schwarz
      Permalink zum Kommentar#

      Schön! Definitiv ein besserer Ansatz, wenn man viele Bookmarklets verwalten muss.

    • JaranF
      Permalink zum Kommentar#

      @DanielSchwartz. Danke. Das war ein guter Artikel, um ihn zu posten, da viele gute Ideen besprochen wurden.

  13. Chris Wachtman
    Permalink zum Kommentar#

    Diese Bookmarklets sind großartig. Ich werde sie auf jeden Fall bei meiner Arbeit nutzen, den Designmodus und den Farbwähler.

    Ich habe mit einem Gulp-Setup zum Erstellen komplexer Bookmarklets mit UI-Elementen experimentiert. Als Konzept habe ich ein Music-Bookmarklet erstellt, das nach mp3-Links auf Ihrer aktuellen Seite sucht und einen Audioplayer mit den Songs in einer Playlist erstellt.

    Zum Erstellen einfacher Bookmarklets gefällt mir der Peter Coles Bookmarklet Creator.

    Antworten
  14. Koen Cornelis
    Permalink zum Kommentar#

    Hier ist eines zum Auffinden von Überläufen. Es fügt sowohl eine rote Umrandung von 1 Pixel als auch einen 3-Wege-Box-Schatten hinzu, sodass Sie den Schuldigen sehr leicht finden können, egal welche Hintergrundfarbe das Element hat.
    Nur zur Vollständigkeit halber fügt es auch ein Konsolenprotokoll des fehlerhaften Elements hinzu.

    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 hat hier auch viele nützliche: https://adrianroselli.com/2015/01/css-bookmarklets-for-testing-and-fixing.html

    Antworten
  15. Bob
    Permalink zum Kommentar#

    Öffnen Sie die aktuelle Seite in einem Seiten-Scanning-Dienst. Zum Beispiel PageSpeed Insights

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

    Antworten
  16. Artem
    Permalink zum Kommentar#

    Ich habe Code geschrieben, der Elemente hervorhebt UND wieder ausblendet

    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’);}});

    Antworten
  17. Thomas
    Permalink zum Kommentar#

    Ich habe eine Sammlung von Bookmarklets erstellt, die ich auf https://bookmarklets.websec.blog/ verwende.

    Senden Sie gerne einen PR, um weitere nützliche Bookmarklets hinzuzufügen.

    Antworten
  18. Jake Paris
    Permalink zum Kommentar#

    Wenn Sie sich auf einer beliebigen WordPress-Seite befinden, melden Sie sich bei WP an und kehren Sie dann zu der Seite zurück, auf der Sie sich befinden.

    javascript:location.href='http://'+window.location.host+'/wp-login.php?redirect_to=%27+encodeURIComponent(window.location);
    Antworten
  19. meblum
    Permalink zum Kommentar#

    Versteckte Passwörter anzeigen!

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

    Antworten

Antwort hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .