Bookmarklets können sowohl für Webdesigner als auch für Entwickler von unschätzbarem Wert sein, die im Browser experimentieren und Fehler beheben möchten. Heute haben wir eine großartige Sammlung kostenloser Bookmarklets für alles zusammengestellt, von der Validierung Ihres HTML-Codes bis zur Neuanordnung von Elementen auf einer Seite ohne Code. Genießen!
WHATFONT
Was ist der einfachste Weg, die auf einer Webseite verwendeten Schriftarten herauszufinden? Firebug oder Webkit Inspector? Nein, das ist zu kompliziert. Es sollte nur einen Klick entfernt sein. Daher habe ich dieses Tool geschrieben, mit dem Sie problemlos Informationen zur Schriftart über den Text erhalten können, über den Sie schweben.
Syntaclet
Als Programmierer ist es sehr üblich, im Internet nach verschiedenen Codeausschnitten und Beispielen zu suchen. Das Problem ist, dass viele Websites schlechte Methoden zum Anzeigen des Beispielcodes haben, was das Lesen erschwert. Hier kommt Syntaclet ins Spiel. Klicken Sie einfach auf das Syntaclet-Bookmarklet, und es wird automatisch eine sprachspezifische Syntaxfarbe mit Zeilennummern auf den gesamten Code auf der Seite angewendet.
Bookmarklets-Sammlung
Diese Seite enthält eine Reihe von Lesezeichen, die speziell für Designer und Entwickler erstellt wurden. Es gibt viele nützliche Tools für alles, vom Auschecken von Stylesheets bis hin zum automatischen Aktivieren von Kontrollkästchen.
FFFFALLBACK
Webfonts sorgen für eine aufregende neue Ära des Webdesigns. Mit FFFFALLBACK können Sie leicht die perfekten Fallback-Schriftarten finden, sodass sich Ihre Designs elegant abbauen.
Firebug Lite
Ein kleines Bookmarklet zur einfachen Installation von Firebug Lite auf einer beliebigen Webseite.
SpriteMe
Hintergrundbilder machen Seiten gut, aber auch langsamer. Jedes Hintergrundbild ist eine zusätzliche HTTP-Anforderung. Es gibt ein Update: Kombinieren Sie Hintergrundbilder zu einem CSS-Sprite. Aber das Erstellen von Sprites ist schwer, erfordert unkenntliches Wissen und viel Versuch und Irrtum. SpriteMe entfernt die Probleme mit einem Klick.
CSSESS
Ich freue mich, die Veröffentlichung von cssess (ausgesprochen secess, wie secession) anzukündigen, einem Bookmarklet, mit dem Sie auf jeder Website ungenutzte CSS-Selektoren finden können.
Mobile Perf
Es zeigt ein Menü mit Links zum Laden anderer Bookmarklets, einschließlich Firebug Lite, Seitenressourcen, DOM Monster, SpriteMe, CSSess und Zoompf. Das Mobile Perf-Menü wird aktualisiert, sobald neue Bookmarklets veröffentlicht werden. So erhalten Sie automatisch die neuesten Tools.
DOM Monster
DOM Monster ist ein plattformübergreifendes, browserübergreifendes Bookmarklet, das das DOM und andere Funktionen der Seite, auf der Sie sich gerade befinden, analysiert und Ihnen den Gesundheitsstatus gibt.
XRAY: schau unter die Haut
XRAY ist ein Bookmarklet für Internet Explorer 6+ und für Webkit und Mozilla-basierte Browser (einschließlich Safari, Firefox, Camino oder Mozilla). Verwenden Sie diese Option, um das Boxmodell für ein beliebiges Element auf einer Webseite anzuzeigen.
MRI: Testen Sie Ihre Selektoren
MRI ist ein Bookmarklet für Internet Explorer 6+ und für Webkit- und Mozilla-basierte Browser (einschließlich Safari, Firefox, Camino oder Mozilla). Verwenden Sie es zum Testen und Spielen mit Selektoren.
FontFriend
Ein praktisches Tool von Matt Wiebe, mit dem Sie die Typografie einer beliebigen CSS-Seite schnell ausprobieren können, ohne dass Sie ein neues Fenster öffnen oder öffnen müssen. Schauen Sie sich diesen Screencast an, schnappen Sie sich das Bookmarklet und fangen Sie an, die online verfügbare Typografie durcheinander zu bringen
Design
Design ist eine Suite von unterstützenden Tools für Webdesign und -entwicklung, die auf jeder Webseite verwendet werden kann. Design ist ein einzigartig leistungsfähiges JavaScript-Bookmarklet, das Dienstprogramme für Rasterlayout, Messung und Ausrichtung umfasst.
W3C Diese Seite überprüfen
Dies ist das Grundlegende? Diese Seite überprüfen? Favelet Es übermittelt einfach die URL für die aktuell angezeigte Seite zur Verarbeitung an den Validator. Ergebnisse werden in demselben Fenster angezeigt.
Layout Grid Bookmarklet
Wendet einfach ein Layoutrasterbild auf den Hauptteil der Seite an. Ich habe auch ein Layout Grid Overlay Bookmarklet erstellt, das ein div erstellt, absolut positioniert und das Hintergrundbild dann auf das div anwendet. Da das Bild transparent ist, erhalten Sie einen schönen Überlagerungseffekt. Durch Ändern der Position des div zu? Fixiert? Sie können auch ein schönes Lesezeichen-Lesezeichen mit fixiertem Overlay-Layout erstellen, das gelegentlich nützlich sein kann.
ReloadCSSEvery
Ein ärgerlicher Aspekt beim Schreiben eines Stylesheets ist das erneute Laden der Seite in Ihrem Browser, damit Sie Ihre inkrementellen Änderungen sehen können. Es gibt Möglichkeiten, dies zu umgehen, aber ich finde sie nicht ideal, also habe ich ReloadCSSEvery erstellt. Es aktualisiert alle 2 Sekunden nur das CSS einer geladenen Seite, sodass Sie Ihren bevorzugten CSS-Editor verwenden und beim Speichern Änderungen in Echtzeit in Ihrem Browser anzeigen können.
Bookmarklet zum Installieren eines WordPress-Plugins
Ich habe ein Bookmarklet erstellt, mit dem Sie ein WordPress-Plugin installieren können. Wenn Sie ein Plugin im WordPress-Plugin-Verzeichnis anzeigen, klicken Sie auf dieses Bookmarklet, und Sie werden bei der Installation dieses Plugins auf Ihrer Site unterstützt.
PrintWhatYouLike
Sind Sie es leid, Webseiten zu drucken, nur um herauszufinden, dass Ihr Ausdruck voll von Anzeigen, leerem Platz und anderem Müll ist, den Sie nicht möchten? PrintWhatYouLike ist ein kostenloser Online-Editor, mit dem Sie jede Webseite für den Druck in Sekunden formatieren können!
Flüssige Seite
Ich habe wieder einmal das Design einer meiner Websites geändert, als mir klar wurde, dass es toll wäre, wenn ich einfach Dinge auf einer Seite verschieben könnte, um eine Vorschau der Änderungen anzuzeigen - ohne Codierung. Wie sich herausstellt, gibt es eine Lösung für dieses Problem: Ein Bookmarklet und ein paar Zeilen JavaScript haben den Trick geleistet. Mit jQuery und seiner UI-Erweiterung erwies sich dies als ziemlich einfach zu implementieren.
Bookmarkleter
Dieses Tool erstellt Bookmarklets aus JavaScript-Code.
