Bokmärken kan vara ovärderliga verktyg för både webbdesigners och utvecklare som gillar att experimentera och felsöka i webbläsaren. Idag har vi samlat en fantastisk samling gratis bookmarklets för allt från att validera din HTML för att omorganisera element på en sida utan kod. Njut av!
WHATFONT
Vad är det enklaste sättet att ta reda på vilka teckensnitt som används på en webbsida? Firebug eller Webkit Inspector? Nej, det är för komplicerat. Det borde vara bara ett klick bort. Därför skrev jag det här verktyget, med vilket du enkelt kan få typsnitt om texten du svävar på.
Syntaclet
Som programmerare är det väldigt vanligt att surfa på interwebs för olika kodutdrag och exempel. Problemet är att många webbplatser har dåliga metoder för att visa provkoden vilket gör det svårt att läsa. Det här är där Syntaclet kommer in. Klicka bara på Syntetbokens bokmärke och det kommer automatiskt att använda språkspecifik syntaxfärgning med radnummer till all kod på sidan.
Bookmarklets Collection
Den här sidan har en massa bokmärken som skapats speciellt för designers och utvecklare. Det finns gott om användbara verktyg för allt från att kolla in stylesheets för att automatiskt aktivera kryssrutor.
FFFFALLBACK
Webtexter är här, gnista en spännande ny era i webbdesign. FFFFALLBACK gör det enkelt att hitta de perfekta fallback-tecknen, så att dina mönster försämras graciöst.
Firebug Lite
En liten bokmärke för att enkelt installera Firebug Lite på vilken webbsida som helst.
SpriteMe
Bakgrundsbilder gör att sidorna ser bra ut, men gör dem också långsammare. Varje bakgrundsbild är en extra HTTP-begäran. Det finns en fix: kombinera bakgrundsbilder till en CSS-sprite. Men det är svårt att skapa sprites, vilket kräver arcane kunskaper och massor av försök och fel. SpriteMe tar bort krångelarna med ett knapptryck.
CSSESS
Jag är glad att tillkännage lanseringen av cssess (uttalad secess, som secession), en bokmärke som hjälper dig att hitta oanvända CSS-väljare på vilken webbplats som helst.
Mobil Perf
Den visar en meny med länkar som laddar andra bookmarklets inklusive Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess och Zoompf. Mobile Perf-menyn uppdateras när nya bokmärken släpps - så du får de senaste verktygen automatiskt.
DOM Monster
DOM Monster är en cross-platform, cross-browser bokmärke som analyserar DOM & andra funktioner på sidan du är på och ger dig sin hälsoreglement.
XRAY: se under huden
XRAY är en bokmärke för Internet Explorer 6+ och Webkit och Mozilla-baserade webbläsare (inklusive Safari, Firefox, Camino eller Mozilla). Använd den för att se boxmodellen för något element på en webbsida.
MR: test dina selektorer
MRI är en bokmärke för Internet Explorer 6+ och Webkit och Mozilla-baserade webbläsare (inklusive Safari, Firefox, Camino eller Mozilla). Använd den för att testa och spela med väljare.
FontFriend
Praktiskt verktyg från Matt Wiebe som låter dig experimentera med typografi på någon CSS-typeset-sida i farten utan att uppdatera eller öppna ett nytt fönster. Kolla in den här skärmdumpen, ta tag i bokmärket och börja byta med typografi du hittar online
Design
Design är en serie med webbdesign och utvecklingshjälpmedel som kan användas på alla webbsidor. Omfattande verktyg för gridlayout, mätning och anpassning är Design en unik kraftfull JavaScript-bokmärke.
W3C Validera denna sida
Detta är det grundläggande? Bekräfta den här sidan? Favelet. Den skickar helt enkelt webbadressen för den aktuella sidan som visas till Validator för bearbetning. Resultaten visas i samma fönster.
Layout Grid Bookmarklet
Använder helt enkelt en layout galler bild till sidans kropp. Jag har också skapat en Layout Grid Overlay Bookmarklet som skapar en div, positionerar den absolut och tillämpar sedan bakgrundsbilden på div. Eftersom bilden är transparent får du en fin överlagseffekt. Genom att ändra positionen för div till? Fixed? Du kan också skapa en fin layoutram med fast överlagring, vilket kan vara användbart vid tillfället.
ReloadCSSEvery
En irriterande aspekt av att skriva ett stilark är att behöva ladda om sidan i din webbläsare för att se dina inkrementella ändringar. Det finns sätt att lösa det här, men jag finner dem mindre än idealiska så jag skapade ReloadCSSEvery. Den uppdaterar endast CSS på en laddad sida varannan sekund så att du kan använda din CSS-redigerare och välja halv realtidsändringar i din webbläsare när du sparar.
Bookmarklet för att installera ett WordPress-plugin
Jag har skapat en bokmärke som du kan använda för att installera ett WordPress-plugin. När du tittar på ett plugin i WordPress Plugin Directory, klickar du på den här bokmärket och du får vägledning när du installerar det pluginet på din webbplats.
PrintWhatYouLike
Trött på att skriva ut webbsidor bara för att hitta din utskrift är full av annonser, tomt utrymme och annat skräp du inte vill ha? PrintWhatYouLike är en gratis online-editor som låter dig formatera vilken webbsida som helst för utskrift på några sekunder!
Flytande sida
Jag ändrade på nytt en av mina webbplatser när jag insåg att det skulle vara bra om jag bara kunde flytta saker runt på en sida för att förhandsgranska ändringarna - utan kodning. Som det visar sig finns det en lösning på det problemet: En bokmärke och några rader med JavaScript gjorde tricket. Med hjälp av jQuery och dess gränssnittstillägg visade det sig vara ganska enkelt att implementera.
Bookmarkleter
Detta verktyg skapar bokmärken från JavaScript-kod.
