Bruk siste Chrome code coverage til å bli kvitt død kode
![Screen Shot 2017 12 14 At 15 40 14](https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Screen-Shot-2017-12-14-at-15.40.14_5472332afa344033d2bf9e7b6b9d883e.png 600w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Screen-Shot-2017-12-14-at-15.40.14_5ae402c9837860cd6e4f65e304b3a5fa.png 800w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Screen-Shot-2017-12-14-at-15.40.14_6c0c164bd2b597ee32b68b8b5755bd2e.png 1200w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Screen-Shot-2017-12-14-at-15.40.14_353fe568217a4ecd8f2727f818d6534e.png 1600w)
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».
![](https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde1_campaign_5472332afa344033d2bf9e7b6b9d883e.png 600w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde1_campaign_5ae402c9837860cd6e4f65e304b3a5fa.png 800w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde1_campaign_6c0c164bd2b597ee32b68b8b5755bd2e.png 1200w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde1_campaign_353fe568217a4ecd8f2727f818d6534e.png 1600w)
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.
![](https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde2_5472332afa344033d2bf9e7b6b9d883e.png 600w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde2_5ae402c9837860cd6e4f65e304b3a5fa.png 800w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde2_6c0c164bd2b597ee32b68b8b5755bd2e.png 1200w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde2_353fe568217a4ecd8f2727f818d6534e.png 1600w)
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.
![](https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde4_5472332afa344033d2bf9e7b6b9d883e.png 600w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde4_5ae402c9837860cd6e4f65e304b3a5fa.png 800w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde4_6c0c164bd2b597ee32b68b8b5755bd2e.png 1200w, https://d3r5m4esdp2p70.cloudfront.net/production/imagertransforms/d3r5m4esdp2p70_cloudfront_net/production/images/Bilde4_353fe568217a4ecd8f2727f818d6534e.png 1600w)
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!