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.
Related posts
De 8 bedste sociale netværkssider for grafiske designere til at fremvise deres porteføljer
Spotify Web Player: Sådan får du adgang til og bruger den
7 bedste værktøjer og apps til at oprette din egen meme gratis
Hvorfor det stadig er værd at bruge Bing til dine websøgninger
8 værktøjer til at skabe billeder i perfekt størrelse til sociale medier
De 10 bedste gratis billedhostingwebsteder i 2022
De 5 bedste websteder til at finde en online underviser til voksne og børn
8 bedste YouTube-kanaler til fotografi- og videoundervisning
De bedste datingwebsteder og -apps for alle i 2021
De 6 bedste websteder til at tjekke nye filmudgivelser
7 bedste Deepfake-apps og -websteder
5 bedste websteder til at teste din skærms opdateringshastighed
De bedste værktøjer til at lære dig selv et sprog
Sådan blokerer du politiske opslag på Facebook
10 bedste websteder til at oprette et Sankey-diagram
De 10 bedste steder at se tegnefilm online gratis
8 politiske subreddits til rolig politisk debat
10 pædagogiske ressourcer til gratis pdf-undervisningsmaterialer og -hjælpemidler
Sådan skærmoptages på en Chromebook
De 10 bedste websteder til at teste din skrivehastighed