4 Google Chrome Extensions til udvikleren

Skrevet af
Nicky Christensen
Udgivet
Opdateret

Der er blandt andet nogle extensions jeg benytter som er med til at holde min viden up-to-date, der er nogle der er med til at fremme mine evner som udvikler, og andre extensions jeg bare er glade for.

Da det alligevel sner udenfor lige pt, så tænker jeg at jeg lige ville lave en lille artikel om nogle af de Google Chrome extensions jeg benytter til hverdag. Jeg hører også meget gerne om dine favorit extensions, så vær endelig ikke bleg for at smid en kommentar nederst.

Panda 5

panda-5

Dette er den perfekte extension til når man ønsker at holde sig opdateret indenfor frontend-verdenen. I hvert fald i mit tilfælde. Jeg benytter mange medier, blandt andet Flipboard & Medium, men det er primært til når jeg sidder med min telefon. Når jeg sidder foran PC’en er dette min go-to buddy.

Panda 5 er en extension som gør du kan få nyheder fra forskellige medier direkte på din forside af din browser. Der er mange forskellige medier at feede nyheder ind fra. Min favorit er Frontend Front & EchoJS.

Her samles der en bred vifte af artikler indenfor frontend-udvikling. Jeg kan altid sortere på seneste eller mest populære artikler. En kanon måde at holde sig opdateret, samt også kan være med til at fremme ens udvikling når man falder over en artikel som gør man kan lære lidt nyt.
En rigtig god og nyttig nyhedsfeed app som gør det er nemt at holde sig opdateret indenfor ens felt.

Google Lighthouse

LightHouse

Lighthouse er et genialt værktøj efter min mening. Det automatiserer processen til at analysere performance, kode kvalitet, accessibility og mere på en hjemmeside. Du kan indtaste hvilken som helst URL og køre test på det.

Dette er et must have tool til dig som bygger hjemmesider & progressive web apps. Bestemt et værktøj jeg ikke ville kunne undvære. Når du kører Lighthouse på en hjemmeside, vil du få genereret en rapport som indeholder 5 overordnede punkter:

  • Performance
  • SEO
  • Accessibility
  • Progressive Web Apps
  • Best Practices

Til hvert punkt vil du få gode råd og vejledning om hvad der kan optimeres og gøres bedre. Dermed kan du sikre dig en hjemmeside som spiller både ift SEO, Performance, Accessibility og Best Practices. Her kan du se en rapport kørt på websitet https://nemtmåltid.dk

lighthouse-rapport

Her vil du kunne se at det faktisk klarer sig rigtig fint i størstedelen af scores, men under PWA klarer den sig ikke særlig godt. Her vil det så være muligt at dykke ned i rapporten for at se hvad der kan gøres bedre for at få en højere score.

Ønsker du ikke at have det som en extension til din browser kan du også gøre det til en del af dit build-setup til når du bygger din applikation.

Google Font Previewer

FontPreview

Endnu en super extensions om jeg benytter en del. Besøg hvilket som helst website og se hvordan det vil tage sig ud med en font fra Google Webfonts.

På den måde kan du hurtigt og nemt finde den font du ønsker at benytte på dit website, og dermed hurtigt lave en POC på hvordan det vil tage sig ud hvis du skal til udskifte fonten på et website.

Jeg har brugt dette en del og elsker at jeg nemt kan lave et preview af hvordan en hjemmeside vil se ud, uden at jeg skal implementere fonten på ny hver gang og dermed spare lidt tid.

Vue Devtools

vue-dev

Nu laver jeg rigtig meget udvikling med VueJS, derfor er Vue Devtools en extension der er umulig at leve uden. Det gør det muligt at inspicere din webapplikation og interagere med den – Dermed bliver det meget lettere at lave debugging, samt få en forståelse af hvordan din applikation fungerer.

Når du udvikler med Vue vil du automatisk få en besked i Chrome Devtools om at du kan installere denne extension.

Alt i alt er denne extension til stor hjælp når du udvikler med VueJS Du kan installere denne extension på 3 måder, enten via

  • Chrome
  • Firefox
  • Standalone

Desværre så understøtter hverken Safari, IE eller Edge ikke denne extension endnu, men benytter du standalone metoden er det stadig muligt at debugge sin applikation


Jeg hører meget gerne om hvilke du benytter meget i din hverdag – Smid en kommentar og lad mig høre.