Muokkaat CSS:ää live-sivustolla, vaihdat toiselle sivulle ja kaikki muutokset katoavat. Turhauttavaa? Ehdottomasti. Chromen DevTools-työkalujen Elements-paneeli on loistava nopeisiin tyylien ja merkintäkielen muokkauksiin, mutta vielä hiljattain kaikki kokeilut kestivät tasan ensimmäiseen F5-painallukseen asti. Ja koodieditoriin palaaminen, uudelleenrakentaminen ja uudelleenjulkaisu pelkän hypoteesin testaamiseksi on ajanhukkaa, josta kukaan ei nauti.

Onneksi Chromessa on sisäänrakennettu mekanismi, joka ratkaisee tämän ongelman. Sen nimi on Local Overrides, ja sen avulla voit tallentaa muutokset paikallisesti, jolloin selain käyttää niitä myös sivun päivityksen jälkeen. Ominaisuus ilmestyi Chrome 65 -versiossa, mutta on vuosien varrella saanut uusia kykyjä: nyt voit ohittaa tiedostojen lisäksi myös HTTP-vastausotsikoita ja mockata API-pyyntöjä suoraan selaimesta.

Tässä oppaassa käyttöönotosta muokkausten seurantaan: kaikki mitä kehittäjä tarvitsee tuottavaan työskentelyyn Local Overrides -toiminnon kanssa.

💡 Pikaopas:

• Ota Local Overrides käyttöön Sources-välilehdellä ja valitse kansio ohitettavien tiedostojen tallentamiseen.
• Muokkaa CSS:ää, JavaScriptiä tai HTML:ää Sources-välilehdellä, muutokset tallentuvat automaattisesti paikallisesti.
• Päivitä sivu tai siirry toiselle, Chrome jatkaa muokkaustesi soveltamista.
• Seuraa muutoseroja Changes-välilehdellä ja hallitse tiedostoja Overrides-välilehden kautta.

Miten Local Overrides otetaan käyttöön

Avaa DevTools (F12 tai Ctrl+Shift+I) ja siirry Sources-välilehdelle. Etsi paneelin vasemmasta osasta Overrides-välilehti. Jos se ei ole näkyvissä, klikkaa >>-kuvaketta näyttääksesi piilotetut välilehdet.

Klikkaa Select folder for overrides -painiketta. Chrome pyytää lupaa tiedostojärjestelmän käyttöön, valitse olemassa oleva kansio tai luo uusi. Tänne kaikki ohitetut tiedostot tallennetaan.

Kansion valinnan jälkeen Enable Local Overrides -valintaruutu kytkeytyy automaattisesti päälle. Huomaa: Network-välilehdelle ilmestyy varoituskuvake, joka kertoo, että jotkin verkkopyynnöt saatetaan siepata ja korvata paikallisilla tiedostoversioilla. Tämä on normaalia ja tarkoittaa, että ohitukset ovat aktiivisia.

Miten muutoksia tehdään ja tallennetaan

Nyt kiinnostava osuus eli muokkaaminen. Avaa mikä tahansa tiedosto Sources-välilehden kautta: etsi tarvittava CSS- tai JavaScript-tiedosto vasemmanpuoleisesta tiedostopuusta ja tuplaklikkaa. Tee muokkaukset ja paina Ctrl+S, tiedosto tallentuu paikalliseen kansioosi ja Chrome alkaa käyttää paikallista versiota palvelinversion sijaan.

Tärkeä vivahde: muokkaa merkintäkieltä nimenomaan Sources-välilehdellä, ei Elements-välilehdellä. Elements-paneeli on kätevä visuaaliseen DOM-työskentelyyn, mutta siinä tehtyjä HTML-muutoksia ei tallenneta Local Overrides -ohituksina. Vaihda Sourcesiin, etsi tarvittava HTML-tiedosto ja muokkaa siellä, violetti piste tiedostonimen vieressä vahvistaa, että tiedosto on ohitettu.

Päivitä sivu tai siirry toiselle, Chrome jatkaa muokkaustesi soveltamista. Haluatko palauttaa alkuperäisen? Poista tiedosto ohituskansiosta tai poista valinta Enable Local Overrides -kohdasta.

Erillisen maininnan ansaitsee HTTP-otsikoiden ohittaminen, ominaisuus, joka lisättiin myöhemmissä Chrome-versioissa. Mene Network-välilehdelle, klikkaa pyyntöä hiiren kakkospainikkeella ja valitse Override headers. Chrome luo paikalliseen kansioosi .headers-tiedoston, jossa voit asettaa mukautettuja vastausotsikoita. Tämä on korvaamatonta CORS-käytäntöjen, Content-Security-Policyn ja välimuistin testaamiseen ilman palvelinmuokkauksia.

Miten tehtyjä muokkauksia seurataan

Kun ohitat aktiivisesti kymmeniä tiedostoja, on helppo unohtaa mitä tarkalleen muutettiin ja missä. Tätä varten DevToolsissa on kaksi hyödyllistä työkalua.

Overrides-välilehti (Sources-paneelissa) näyttää täydellisen luettelon ohitetuista tiedostoista verkkotunnuksittain ryhmiteltynä. Täältä voit avata minkä tahansa tiedoston jatkomuokkausta varten tai poistaa tarpeettoman ohituksen, klikkaa hiiren kakkospainikkeella → Delete.

Changes-välilehti sijaitsee DevToolsin alaosassa, Console-välilehden vieressä. Se näyttää alkuperäisen tiedoston ja paikallisen versiosi välisen eron rivi riviltä, kuten Gitissä. Kätevä nopeaan auditointiin: mitä tarkalleen muutit kussakin tiedostossa ja kuinka paljon muutokset poikkeavat lähteestä.

Pikavinkki: ennen refaktorointia tai kokeilua live-sivustolla, ota tilannekuva muutoksista Changes-välilehden kautta, tämä on paikallinen "commit", johon voit aina palata.

Overrides suorituskyvyn testaustyökaluna

Kätevän prototyyppauksen lisäksi Local Overrides avaa kiinnostavan skenaarion suorituskykyanalyysiin. Sinulla on mahdollisuus muuttaa koodia sivustolla, joka ei ole paikallinen, ja mitata välittömästi näiden muokkausten vaikutus latausnopeuteen ja renderöintiin.

Esimerkiksi epäilet, että kolmannen osapuolen analytiikkaskripti hidastaa ensimmäisen ruudun renderöintiä. Ohita pyyntö, korvaa alkuperäinen skripti tyhjällä tiedostolla tai lykätyllä versiolla ja aja Lighthouse. Mittareiden ero näyttää selvästi, onko optimointi perusteltua.

Toinen skenaario: fontit. Ohita CSS-tiedosto, poista @font-face mukautetulta fontilta ja katso kuinka paljon LCP (Largest Contentful Paint) muuttuu. Tai kokeile skriptien latausjärjestystä, siirrä kriittinen JS <head>-osiosta <body>-osion loppuun ja vertaa mittareita.

Harry Roberts ja Umar Hansa, tunnetut verkkosuorituskyvyn asiantuntijat, julkaisivat screencasteja, joissa on selkeitä esimerkkejä tästä lähestymistavasta. Heidän demonstraationsa osoittavat: Local Overrides muuttaa selaimen hiekkalaatikoksi suorituskykyhypoteeseille, jossa jokainen iteraatio vie sekunteja, ei minuutteja.

Jos työskentelet paikallisen kehityspalvelimen kanssa, ohitusten arvo on pienempi, hallitset lähteitä jo valmiiksi. Mutta kun sinun on testattava nopeasti ideaa tuotannossa tai jonkun toisen sivustolla ilman pääsyä koodipohjaan, tämä työkalu on korvaamaton.

⁉️🤔 Usein kysytyt kysymykset

Säilyvätkö Local Overrides -ohitukset selaimen sulkemisen jälkeen?

Kyllä, kaikki tiedostot on tallennettu levyllä valitsemaasi kansioon. Chromen uudelleenkäynnistyksen jälkeen ohitukset otetaan automaattisesti käyttöön, edellyttäen että Enable Local Overrides -valintaruutu pysyi päällä. Itse tiedostot eivät katoa minnekään, koska ne ovat tavallisia tiedostoja tiedostojärjestelmässäsi.

Voinko ohittaa API-vastauksen (JSON), enkä vain staattisia tiedostoja?

Kyllä, Chrome 117:stä alkaen tämä toimii. Network-välilehdellä klikkaa pyyntöä hiiren kakkospainikkeella ja valitse Override content, Chrome luo paikallisen tiedoston, jossa on vastauksen runko, jota voit muokata. Seuraavalla pyynnöllä selain palauttaa paikallisen versiosi palvelinvastauksen sijaan.

Miksi Elements-paneelissa tekemäni muutokset nollautuvat päivityksen jälkeen?

Elements-paneeli muokkaa DOMia muistissa, ei lähdetiedostoja. Jotta muutokset säilyisivät F5-painalluksen yli, vaihda Sources-välilehdelle, etsi vastaava tiedosto ja muokkaa sitä siellä. Tallenna painamalla Ctrl+S, ja Chrome luo Local Override -ohituksen.

Miten jaan Local Overrides -ohitukset kollegan kanssa?

Lähetä vain ohituskansion sisältö. Kollega laittaa tiedostot omaan kansioonsa, määrittää sen DevToolsissa Select folder for overrides -kohdan kautta, ja kaikki muokkaukset ovat voimassa hänen koneellaan. Tiimityötä varten on kätevää pitää ohituskansio projektin Git-repositoriossa.

Voinko käyttää Local Overrides -toimintoa Firefoxissa tai muissa selaimissa?

Firefoxissa ei ole Local Overrides -vastaavuutta, muutosten tallentamista uudelleenlatausten välillä ei tueta. Edge, joka perustuu Chromiumiin, sisältää saman toiminnallisuuden kuin Chrome, koska se käyttää yhteistä DevTools-koodipohjaa. Brave ja Opera tukevat myös ohituksia Chromium-pohjaisina selaimina.

Miksi oikeastaan tarvitset Local Overrides -toimintoa

Local Overrides Chrome DevToolsissa ei ole vain "kätevä ominaisuus". Se on tapa muuttaa selain täysimittaiseksi ympäristöksi nopeaan prototyyppaukseen ja hypoteesien testaamiseen koskematta tuotantokoodiin. Säästät "muokkaa → rakenna → julkaise → tarkista" -syklejä ja saat tulokset välittömästi.

Kokeile heti: avaa mikä tahansa sivusto, ota ohitukset käyttöön ja vaihda otsikon väriä. Päivitä sivu. Näitkö, että väri pysyi? Tästä tässä kaikessa oli kyse.