Hvis du er designer i behov av noen nyttige
verktøy for å øke hastigheten, samarbeide eller kontrollere din web utviklingsprosjekter, Chrome
utvidelsen har en rekke verktøy.
Denne listen består av noen av de mest populære – og noen vil hevde det er nødvendig – verktøy og Chrome-utvidelser at hver bruker å gjøre design arbeid bør ha i sine kit bag.
1. DomFlags
DOM Flagg er en enkel å bruke Chrome-utvidelse
det gir en ny måte for utviklere å jobbe med nettleser verktøy. Det gjør det mulig
utviklere å fremskynde oppgave av styling elementer.
Ved hjelp av hurtigtaster for hvert element du
kan sette bokmerke på din navigasjon.
Vi har alle opplevd problemer i
inspeksjon svært detaljerte elementer, og det er lett å gå seg vill.
DOM Flagg gjøre deg i stand til å spore styling elementer
inkluderer en funksjon for å inspisere komponenter med nøyaktighet automatisk. Dette, i
igjen vil bidra til å få fart opp DevTools arbeidsflyt og gjennomføring.
DOM Flagg gjør det mulig å spore endringer. Og
opprettholde fokus på de elementene du arbeider med.
2. Sizzy
Sizzy gir designere og utviklere en enkel
måten å teste sine områder i flere viewports.
Sizzy gir en enkel måte å sjekke dine
design i real-time. Det tilbyr en interaktiv visning av en rekke enheter og
skjermstørrelser. Du kan også simulere en enhet tastaturet og bytte mellom
liggende og stående modus.
Installere en Chrome-utvidelsen vil legge til en knapp på verktøylinjen, som, når det klikkes på er kommer til å åpne den aktuelle URL-adressen i Sizzy plattform. Utvidelsen vil blokkere alle “x-ramme-alternativer” – overskrifter, slik at du vil være i stand til å ta en titt på ethvert nettsted online.
Sizzy er en åpen kildekode-prosjekt, og du kan se hele koden her.
3. Checkbot
Checkbot kan teste ditt nettsted for sikkerhet
problemer og også overvåke ditt nettsted side lasting hastighet. Det vil gi
designere med et middel til å identifisere typiske feil og anbefale forbedringer
i området sikkerhet, søkemotor, og området hastighet.
Ved hjelp av mer enn 50 beste praksis beregninger, det
vil granske et nettsted for beste praksis SEO, brutte koblinger, duplikat innhold og
mer. Verktøyet vil også validere CSS, JS og HTML.
Checkbot plukker opp på designer og koder feil
i ekte tid sparer deg bryet med å måtte gå tilbake og kontrollerer arbeidet ditt
gjentatte ganger.
Hvis du er på utkikk etter et verktøy av god kvalitet som
vil fikse ødelagte koblinger til nettsider sikre unikt innhold og sidetitler og eliminere
redirect kjeder dette verktøyet vil være nyttig.
For designere, kan det hjelpe deg med å minimere dine
CSS og JS samt gi anbefalinger om hvordan minify CSS og
utnytte nettleser caching.
4. GistBox Clipper
GistBox er en av de mest nyttige Chrome
utvidelser for web-designere.
GistBox kan opprette en GitHub Hovedpunkt fra hvilken som helst kode blokk på nettsiden du ser på.
Øverst i høyre hjørne av enhver kode
blokk, vil du se en liten knapp, som når den trykkes, vil tillate en pop-up som
gjør at du kan lagre koden for å Hovedpunkt.
Du kan opprette nye Gists med en høyre museknapp
klikk og lagre blokker med kode for senere inspeksjon og bruk.
Integrering med GitHub gjør at designere og
utviklere å samle kode blokker og manipulere dem eller kategorisere dem for
senere bruk. Dette gjør det til et praktisk og effektiv Chrome-utvidelse verktøy.
5. ColorZilla
ColorZilla Er et utrolig nyttig Chrome
extension for å samle hex-koder som kan være merket, merket og kategoriseres
for individuelle web design prosjekter.
Det gir deg muligheten til å velge et eye-dropper-verktøyet
som vil trekke ut fargen fra alle web-side og lagre det til ColorZilla
utklippstavlen.
Med det, kan du raskt utvikle farge
paletter for senere bruk og som en måte å sikre at du er ved å bruke farge
konsekvent i web design og utvikling.
ColorZilla fungerer også som en farge analyzer og
CSS-gradient editor, slik at du kan konvertere et bilde til CSS.
6. WhatFont
Dette
Chrome-Utvidelsen er en virkelig tidsbesparende for de som ønsker å utnytte sine
favoritt skrifter Og innlemme dem i
deres egen web-design-prosjektet.
WhatFont Chrome-utvidelsen gjør det mulig for utviklere å
raskt analysere og identifisere nesten hvilken som helst skrift på en web-side.
Utvidelsen er godt utviklet og heller
enn å måtte åpne opp inspeksjon verktøy utvidelsen fungerer bare ved å vinke
musen over skriften.
Ikke bare det, men utvidelsen vil også identifisere tjenesten som blir brukt til å tjene opp Sider gikk skrift og vil støtte Google Skrift API og Typekit.
7. LightShot
LightShot er en rask skjermbilde verktøy som
gir deg muligheten til å ta hele, eller deler av en hvilken som helst side, og enten laste det opp eller
last ned den eller sende den til en tredje part reisemål.
Skjermbilder tatt av LightShot kan brukes og
delt på sosiale medier eller skrives ut.
Kan du kommentere og legge til tekst, piler og mer
til den valgte delen av skjermen. Men kanskje en av de mest briljante
funksjoner i dette enkle verktøyet for web designere er at ved å velge et bilde
du kan deretter fortsette å gjøre en full Google image-søk etter lignende bilder
online.
LightShot kan konfigureres på flere
språk.
Utvidelsen er skrevet i ren JavaScript, og vil også fungere for Windows, Chromebook, Linux og Mac OS. Det kan også være tilgjengelig som en desktop applikasjon som gjør det til et utmerket valg for web-designere som er avhengig av flere enheter.
8. Awesome Skjermbilde
Som Lightshot, Awesome Skjermbilde er en skjerm
og bildet du tar extension.
Det gjør forskjellige fra Lightshot, men i en
antall måter. Awesome Skjermbildet kan være konfigurert til å koble til alle
skjermbilder med din Google disk.
Det tillater deg å skjermbilde disse elementene
som er utenfor visningen for å fange opp hele siden. Det har
ytterligere redigering og merknadsverktøy komma gjør for beskjæring og bilde
redigerer alt innen extension.. eller med bruk av ekstra Awesome
Screenshot programmer
Du kan utvide funksjonene ved å installere den
Chrome program for skrivebordet som godt. Utvidelsen gir også mulighet for video
å ta opp og dele, slik at du kan samarbeide med andre utviklere eller
designere når du arbeider på et nettsted.
Du kan legge til flere bilder til et skjermbilde
så vel som blå eller slette elementer som du ville heller ikke vise til andre.
9. Slett Cache
Tøm Cache Chrome-Utvidelsen Er en rask og
enkelt verktøy som gjør det mulig for deg å tømme cookies og buffer av siden du er
å se på. Det fjerner behovet for å gå til innstillinger-siden din
nettleser for å fjerne et par enkle sideelementer.
For web-designere som lager flere
redigeringer, og ønsker å vise dem i sanntid, dette er et utmerket verktøy som vil
eliminere mye av frustrasjonen av å se på gamle data.
Det er tider du trenger for å tømme bufferen
og informasjonskapsler, men du navigerer du til siden for Chrome-innstillinger er kjedelig. Slett Cache gjør du
slette din cache, samt globale eller lokale informasjonskapsler ved å klikke på en knapp.
Tøm Buffer vil tillate deg å konfigurere som
elementer du vil fjerne fra siden. Variablene omfatter Kontanter, nedlastinger,
alle systemer, form-data, på Cash -, indeks-database, plugin data, passord og
mer.
10. Web Developer Google Chrome
Extension
Web Developer Google Chrome Extension
gjør det mulig for utviklere og designere til å enkelt overvåke, analysere og kontrollere sine web
sider for alle overtredelser av beste praksis design, koding, brukervennlighet, og søk
engine optimization.
Det er en stor alt-i-ett verktøy som ikke er tung
på bla gjennom våre ressurser, men gir massevis av nyttig informasjon til web-design
er også ansvarlig for search engine optimization elementer på et nettsted eller i
– siden.
Den
extension installerer verktøylinjen med flere web developer tools.
Verktøyet vil gi deg indikasjoner på side
størrelse, bredde og dimensjoner som gjør konflikt med beste praksis for bruk på
flere enheter. Det tillater deg å sjekke innebygd JavaScript og vise din
nettsted gjennom en simulering av ulike enheter.
Utvidelsen fungerer godt på Windows, Linux
og Mac OS. I tillegg til koding og design problemer, vil det også gi
innsikt i meta tag-informasjon, respons overskrifter, farge informasjon, og
topografisk informasjon.
Du kan gå gjennom de viktigste funksjonene i verktøyet, så vel som det er full evner på utvikleren Chris Pedericks’ nettsted.
Ingen tvil om at det er en mengde andre høy
kvalitet og nyttig Chrome-utvidelser som er web-designer eller utvikler kan
bruk.
Denne listen viser noen av de mest populære
og nyttig verktøy. Har du noen anbefalinger for verktøy som du tror jeg er
mer nyttig eller står de i denne listen? La oss vite.