Småbiter

Bruk siste Chrome code coverage til å bli kvitt død kode

Screen Shot 2017 12 14 At 15 40 14

De fleste frontend-utviklere vet hvor enkelt det er at det akkumuleres kode som ikke lengre er i bruk. Og jo lengre tid som går, jo vanskeligere blir det å skulle rydde opp i - og fjerne denne koden.

Bli kvitt død kode

De fleste frontendutviklere vet hvor fort kode som ikke lenger er i bruk, hoper seg opp. Og jo lengre tid som går, jo vanskeligere blir det å rydde opp i og fjerne denne koden. Chrome til unnsetning. Nyeste versjon av nettleseren Chrome (Canary) har nå fått en helt ny funksjon som kan hjelpe oss. Den heter «Code Coverage».

Hva er det så som gjør denne funksjonen så genial og enkel i bruk? Jo, den går over både ekstern og innbygd JavaScript- og CSS-kode på sidene du ønsker å sjekke, og gir deg et dekningskart over disse. 

Ta opp, surf, sjekk

Du åpner altså utviklerverktøy i Chrome Canary, velger Code Coverage-funksjonen, trykker på «record» og surfer rundt på nettstedet ditt. Det er viktig at du husker å surfe rundt på alle sidene og holde musepekeren over lenker og elementer, og husk å justere størrelsen på nettleseren din så du får med deg mediaqueries for mindre og større enheter.

Når du har gjort dette, trykker du på record igjen – som da vil stoppe opptaket. Chrome vil nå bruke et sekund eller to på å analysere resultatet og gir deg en dekningsgraf, inndelt per fil. 

Hver JavaScript- og CSS-fil som er i bruk (inkludert lineærkode i HTML), får en prosentvis dekning som vises i rødt eller grønt. Rødt er kode den finner ut at ikke er i bruk, grønt er kode i bruk.

Hva nå? Å se disse tallene hjelper meg jo ikke

Tallene er åpenbart bare en indikasjon på hvor mye ubrukt (eller død) kode som ligger i hver enkelt fil. Men hvis du trykker på filnavnet, får du se hele innholdet, i velkjent utviklerverktøystil. På samme måte – hvis du har gjort som du bør, og minimert filen din slik at alt innholdet havner på én linje –kan du enkelt trykke på {}-ikonenet nede til venstre for å se en pent formatert utgave av innholdet.

På samme måte som i oversikten er ubrukt kode her markert med en blodrød farge i margen, og brukt kode med grønt.

Lykke til i jakten, la den store vårrengjøringen begynne!

Artikkel: Det digitale vannskillet

Det digitale vannskillet

Ved utgangen av fjoråret spådde vi at 2018 kom til å være et slags digitalt vannskille, og at advarslene om følgene av å ikke henge med vill...

Artikkel: Digitalt oljeeventyr

Digitalt oljeeventyr

Når du skal drive oljevirksomhet i Ghana, er du avhengig av en nettløsning som bare funker.

Artikkel: Enklere hverdag for Akastor ASA

Enklere hverdag for Akastor ASA

Akastor er et investeringsselskap innen oljeservice med et fleksibelt mandat for aktivt eierskap og langsiktig verdiskaping.