Top 10 Chrome-udvidelser og -værktøjer til webdesignere

Hvis du er designer og har brug for nogle nyttige værktøjer til at fremskynde, samarbejde eller revidere dine webudviklingsprojekter, har Chrome - udvidelsen et væld af værktøjer.

Denne liste omfatter nogle af de mest populære – og nogle vil hævde nødvendige – værktøjer og Chrome-udvidelser(tools and Chrome extensions) , som enhver bruger, der laver designarbejde, bør have i deres kittaske.

1. DomFlag

DOM Flags er en brugervenlig Chrome - udvidelse, der giver udviklere en ny måde at arbejde med browserværktøjer på. Det giver udviklere mulighed for at fremskynde opgaven med styling af elementer.

Ved at bruge tastaturgenveje for hvert element kan du bogmærke din navigation.

Vi har alle oplevet vanskeligheden ved at inspicere meget detaljerede elementer, og det er nemt at fare vild.

DOM-flag(DOM Flags) giver dig mulighed for at spore stylingelementer, der inkluderer en funktion til automatisk at inspicere komponenter med nøjagtighed. Dette vil igen hjælpe med at fremskynde DevTools workflow og implementering.

DOM Flags giver dig mulighed for at spore ændringer. Og bevar dit fokus på de elementer, du arbejder med.

2. Sizzy

Sizzy giver designere og udviklere en enkel måde at teste deres websteder i flere visningsporte.

Sizzy giver en enkel måde at tjekke dit design på i realtid. Det giver en interaktiv visning af et vilkårligt antal enheder og skærmstørrelser. Du kan endda simulere et enhedstastatur og derefter skifte mellem liggende og stående tilstand.

Installation af en Chrome - udvidelse tilføjer en knap til din værktøjslinje, som, når du klikker på den, åbner den aktuelle URL på Sizzy- platformen. Udvidelsen vil blokere alle " x-frame-options " headere, så du vil være i stand til at se på ethvert websted online.

Sizzy er et open source-projekt, og du kan se hele koden her(here) .

3. Checkbot

Checkbot kan teste dit websted for sikkerhedsproblemer og også kontrollere din hjemmesides indlæsningshastighed. Det vil give designere et middel til at identificere typiske fejl og anbefale forbedringer i webstedets sikkerhed, søgemaskine og webstedshastighed.

Ved at bruge mere end 50 bedste praksis-metrics vil den revidere et websted for bedste praksis SEO , ødelagte links, duplikeret indhold og mere. Værktøjet vil også validere CSS , JS og HTML .

Checkbot opfanger designer- og koderfejl i realtid, hvilket sparer dig for besværet med at skulle gå tilbage og tjekke dit arbejde igen gentagne gange.

Hvis du leder efter et værktøj af god kvalitet, der reparerer ødelagte sidelinks, sikrer unikt indhold og sidetitler og eliminerer omdirigeringskæder, ville dette værktøj være nyttigt.

For designere kan det hjælpe dig med at minimere din CSS og JS samt give anbefalinger til, hvordan du kan minimere din CSS og udnytte browserens caching.

4. GistBox Clipper

GistBox er en af ​​de mest nyttige Chrome -udvidelser til webdesignere.

GistBox kan oprette en GitHub Gist fra enhver kodeblok på den webside, du ser.

I øverste højre hjørne af enhver kodeblok, vil du se en lille knap, som, når den trykkes, vil tillade en pop-up, der gør det muligt for dig at gemme koden i Gist .

Du kan oprette nye Gists med et højre museklik og gemme kodeblokke til senere inspektion og brug.

Integration med GitHub gør det muligt for designere og udviklere at indsamle kodeblokke og manipulere dem eller kategorisere dem til senere brug. Dette gør det til et praktisk og effektivt Chrome- udvidelsesværktøj.

5. ColorZilla

ColorZilla er en utrolig nyttig Chrome - udvidelse til indsamling af hex-koder, som kan mærkes, mærkes og kategoriseres til individuelle webdesignprojekter.

Det giver dig mulighed for at vælge et pipetteværktøj, der vil udtrække farven fra enhver webside og gemme den på ColorZilla- udklipsholderen.

Med det kan du hurtigt udvikle farvepaletter til senere brug og som en måde at sikre, at du bruger farve konsekvent i webdesign og udvikling.

ColorZilla fungerer også som en farveanalysator og CSS - gradienteditor, så du kan konvertere et billede til CSS .

6. WhatFont

 Denne Chrome-udvidelse(Chrome Extension) er en reel tidsbesparelse for dem, der ønsker at bruge deres yndlingsskrifttyper og inkorporere dem i deres eget webdesignprojekt.

WhatFont Chrome- udvidelsen giver udviklere mulighed for hurtigt at analysere og identificere næsten enhver skrifttype på enhver webside.

Udvidelsen er veludviklet, og i stedet for at skulle åbne inspektionsværktøjer fungerer udvidelsen ved blot at vifte med musen over skrifttypen.

Ikke kun det, men udvidelsen vil også identificere den tjeneste, der bliver brugt til at vise en Pages went-skrifttype og vil understøtte Google Font API og Typekit.(Google Font API and Typekit.)

7. LightShot

LightShot er et hurtigt skærmbilledeværktøj, der gør det muligt for dig at fange hele eller dele af en hvilken som helst side og enten uploade den eller downloade den eller sende den til en tredjepartsdestination.

Skærmbilleder taget af LightShot kan bruges og deles på sociale medier eller udskrives.

Du kan kommentere og tilføje tekst, pile og mere til den valgte del af skærmen. Men måske er en af ​​de mest geniale funktioner ved dette enkle værktøj til webdesignere, at du ved at vælge et billede kan fortsætte med at lave en fuld Google -billedsøgning efter lignende billeder online.

LightShot kan konfigureres på flere sprog.

Udvidelsen er skrevet i ren JavaScript og vil også fungere til Windows , Chromebook , Linux og Mac OS . Det kan også tilgås som en desktop-applikation,(desktop application) hvilket gør det til et fremragende valg for webdesignere, der er afhængige af flere enheder.

8. Fantastisk skærmbillede

Ligesom Lightshot er Awesome Screenshot en skærm- og billedoptagelsesudvidelse.

Det adskiller sig dog fra Lightshot på en række måder. Awesome Screenshot kan konfigureres til at forbinde alle dine screenshots med dit Google -drev.

Det giver dig mulighed for at screenshotte de elementer, der er uden for dit syn, for at fange hele siden. Det har yderligere redigerings- og anmærkningsværktøjer. komma tillader beskæring og billedredigering alt i udvidelsen.. eller med brug af yderligere Awesome Screenshot-applikationer

Du kan udvide dets funktioner ved også at installere Chrome -applikationen til desktop. Udvidelsen giver også mulighed for videooptagelse og deling, så du kan samarbejde med andre udviklere eller designere, når du arbejder på ethvert websted.

Du kan tilføje yderligere billeder til et skærmbillede samt blå eller slette elementer, som du helst ikke vil vise til andre.

9. Ryd cache

Chrome-udvidelsen(Cache Chrome Extension) Ryd cache er et hurtigt og enkelt værktøj, der gør det muligt for dig at rydde cookies og cache på den side, du kigger på. Det fjerner behovet for at navigere til indstillingssiden i din browser for at rydde nogle få simple sideelementer.

For webdesignere, der laver flere redigeringer og ønsker at se dem i realtid, er dette et fremragende værktøj, der vil eliminere meget af frustrationen ved at se på gamle data.

Der er tidspunkter, hvor du skal rydde din cache og dine cookies, men det er kedeligt at navigere til Chrome- indstillinger. (Chrome)Ryd cache giver dig mulighed for at slette din cache såvel som globale eller lokale cookies med et klik på en knap.

Ryd cache giver dig mulighed for at konfigurere, hvilke elementer du vil rydde fra siden. Variabler(Variables) inkluderer Cash , downloads, alle systemer, formulardata, at Cash , indeksdatabase, plugin-data, adgangskoder og mere.

10. Webudvikler Google Chrome Extension

Google Chrome-udvidelsen til webudviklere(Web Developer Google Chrome Extension) giver udviklere og designere mulighed for nemt at revidere, analysere og tjekke deres websider for eventuelle overtrædelser af bedste praksis design, kodning, brugervenlighed og søgemaskineoptimering.

Det er et fantastisk alt-i-et værktøj, der ikke er tungt at gennemse vores ressourcer, men som alligevel giver et væld af informationer, der er nyttige til webdesign, der også er ansvarlige for søgemaskineoptimeringselementer på et websted eller en side.

 Udvidelsen installerer værktøjslinjen med flere webudviklerværktøjer.

Værktøjet vil give dig indikationer om sidestørrelse, -bredde og -dimensioner, som er i konflikt med bedste praksis på flere enheder. Det giver dig mulighed for at tjekke indlejret JavaScript og se dit websted gennem en simulering af forskellige enheder.

Udvidelsen fungerer godt på Windows , Linux og Mac OS . Ud over kodnings- og designproblemer vil det også give indsigt i metatag-oplysninger, svaroverskrifter, farveoplysninger og topografiske oplysninger.

Du kan gennemgå værktøjets hovedfunktioner såvel som dets fulde funktioner på udvikleren Chris Pedericks' hjemmeside(Chris Pedericks’ website) .

Der er uden tvivl et væld af andre nyttige Chrome(Chrome) -udvidelser af høj kvalitet , som webdesignere eller udviklere kan bruge.

Denne liste viser nogle af de mest populære og nyttige værktøjer. Har du nogen anbefalinger til værktøjer, som du synes, jeg er mere nyttige eller overlegne i forhold til dem på denne liste? Lad os vide.



Helle Holmberg

About the author

Jeg er professionel computertekniker og har over 10 års erfaring inden for området. Jeg har specialiseret mig i Windows 7 og Windows Apps udvikling, samt Cool Websites design. Jeg er ekstremt vidende og erfaren på området, og vil være et værdifuldt aktiv for enhver organisation, der ønsker at vokse deres forretning.


Related posts