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

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!