Sa redigeerid CSS-i otse elaval saidil, lähed teisele lehele ja kõik muudatused kaovad. Tüütu? Absoluutselt. Chrome'i arendajatööriistade Elementide paneel on suurepärane stiilide ja märgendi kiireks muutmiseks, kuid kuni viimase ajani kestsid kõik katsetused täpselt esimese F5 vajutuseni. Ning koodiredaktorisse tagasi minemine, uuesti ehitamine ja juurutamine lihtsalt hüpoteesi testimiseks on ajaraisk, mida keegi ei naudi.

Õnneks on Chrome'il sisseehitatud mehhanism, mis selle probleemi lahendab. Seda nimetatakse kohalikeks ülekirjutusteks (Local Overrides) ja see võimaldab muudatused kohapeal salvestada, nii et brauser rakendab neid ka pärast lehe värskendamist. See funktsioon ilmus juba Chrome 65-s, kuid aastate jooksul on see saanud uusi võimalusi: nüüd saate üle kirjutada mitte ainult faile, vaid ka HTTP vastuse päiseid ning imiteerida API päringuid otse brauserist.

Selles juhendis alates lubamisest kuni muudatuste jälgimiseni: kõik, mida arendaja vajab produktiivseks tööks kohalike ülekirjutustega.

💡 Kiirülevaade:

• Luba kohalikud ülekirjutused vahekaardil Allikad (Sources) ja vali kaust ülekirjutatud failide salvestamiseks.
• Redigeeri CSS-i, JS-i või HTML-i vahekaardil Allikad, muudatused salvestatakse automaatselt kohapeal.
• Värskenda lehte või navigeeri teisele, Chrome jätkab sinu muudatuste rakendamist.
• Jälgi erinevusi vahekaardil Muudatused (Changes) ja halda faile ülekirjutuste kaudu.

Kuidas kohalikke ülekirjutusi lubada

Ava arendajatööriistad (F12 või Ctrl+Shift+I) ja mine vahekaardile Allikad (Sources). Paneeli vasakus osas leia vahekaart Ülekirjutused (Overrides). Kui see pole nähtav, klõpsa ikoonil >>, et kuvada peidetud vahekaardid.

Klõpsa nuppu Vali ülekirjutuste kaust (Select folder for overrides). Chrome küsib luba failisüsteemile juurdepääsuks, vali olemasolev kaust või loo uus. Siia salvestatakse kõik ülekirjutatud failid.

Pärast kausta valimist lülitub märkeruut Luba kohalikud ülekirjutused (Enable Local Overrides) automaatselt sisse. Pane tähele: vahekaardil Võrk (Network) ilmub hoiatusikoon, mis annab märku, et mõned võrgupäringud võidakse kinni püüda ja asendada kohalike failiversioonidega. See on normaalne ja tähendab, et ülekirjutused on aktiivsed.

Kuidas muudatusi teha ja salvestada

Nüüd huvitav osa, redigeerimine. Ava ükskõik milline fail vahekaardi Allikad (Sources) kaudu: leia vasakul asuvast failipuust vajalik CSS või JavaScript ja tee topeltklõps. Tee muudatused ja vajuta Ctrl+S, fail salvestatakse sinu kohalikku kausta ja Chrome hakkab serveriversiooni asemel kasutama kohalikku versiooni.

Oluline nüanss: redigeeri märgendit just nimelt vahekaardil Allikad, mitte Elemendid (Elements). Elementide paneel on mugav visuaalseks tööks DOM-iga, kuid seal tehtud HTML-i muudatusi ei salvestata kohalike ülekirjutustena. Lülitu Allikate vahekaardile, leia vajalik HTML-fail ja redigeeri seal, lilla täpp failinime kõrval kinnitab, et fail on üle kirjutatud.

Värskenda lehte või navigeeri teisele, Chrome jätkab sinu muudatuste rakendamist. Tahad originaali taastada? Kustuta fail ülekirjutuste kaustast või eemalda märge Luba kohalikud ülekirjutused eest.

Eraldi tasub mainida HTTP päiste ülekirjutamist, võimalus, mis lisati hilisemates Chrome'i versioonides. Mine vahekaardile Võrk (Network), tee päringul paremklõps ja vali Kirjuta päised üle (Override headers). Chrome loob sinu kohalikku kausta .headers faili, kus saad määrata kohandatud vastuse päiseid. See on hindamatu CORS-i poliitikate, Content-Security-Policy ja vahemällu salvestamise testimiseks ilma serveripoolsete muudatusteta.

Kuidas tehtud muudatusi jälgida

Kui kirjutad aktiivselt üle kümneid faile, on lihtne unustada, mida täpselt kus muudeti. Selle jaoks on arendajatööriistades kaks kasulikku tööriista.

Vahekaart Ülekirjutused (Overrides) (Allikate paneelil) näitab täielikku loendit ülekirjutatud failidest, mis on grupeeritud domeenide kaupa. Siit saad avada mis tahes faili edasiseks redigeerimiseks või kustutada mittevajaliku ülekirjutuse, paremklõps → Kustuta (Delete).

Vahekaart Muudatused (Changes) asub arendajatööriistade alumises osas, vahekaardi Konsool (Console) kõrval. See näitab erinevusi originaalfaili ja sinu kohaliku versiooni vahel rida-realt, nagu Git-is. Mugav kiireks auditeerimiseks: mida täpselt igas failis muutsid ja kui palju muudatused lähtekoodist erinevad.

Kiire nõuanne: enne ümberkujundamist või katsetamist elaval saidil, tee muudatustest hetktõmmis vahekaardi Muudatused kaudu, see on sinu kohalik „commit", mille juurde saad alati tagasi pöörduda.

Ülekirjutused kui jõudluse testimise tööriist

Lisaks mugavale prototüüpimisele avavad kohalikud ülekirjutused huvitava stsenaariumi jõudluse analüüsiks. Sul on võimalus muuta koodi mitte-kohalikul saidil ja koheselt mõõta nende muudatuste mõju laadimiskiirusele ja renderdamisele.

Näiteks kahtlustad, et kolmanda osapoole analüütika skript aeglustab esimese ekraani renderdamist. Kirjuta päring üle, asenda originaalskript tühja faili või edasilükatud versiooniga ja käivita Lighthouse. Mõõdikute erinevus näitab selgelt, kas optimeerimine on õigustatud.

Teine stsenaarium: fondid. Kirjuta CSS-fail üle, eemaldades @font-face kohandatud fondi jaoks, ja vaata, kui palju muutub LCP (Largest Contentful Paint). Või katseta skriptide laadimisjärjekorraga, liiguta kriitiline JS <head>-ist <body> lõppu ja võrdle mõõdikuid.

Harry Roberts ja Umar Hansa, tuntud veebi jõudluse eksperdid, avaldasid ekraanisalvestusi selgete näidetega sellest lähenemisest. Nende demonstratsioonid näitavad: kohalikud ülekirjutused muudavad brauseri liivakastiks jõudlushüpoteeside jaoks, kus iga iteratsioon võtab sekundeid, mitte minuteid.

Kui töötad kohaliku arendusserveriga, on ülekirjutuste väärtus väiksem, sul on juba lähtekoodi üle kontroll. Kuid kui on vaja kiiresti testida ideed toodangus või kellegi teise saidil ilma juurdepääsuta koodibaasile, on see tööriist asendamatu.

⁉️🤔 Korduma kippuvad küsimused

Kas kohalikud ülekirjutused salvestatakse pärast brauseri sulgemist?

Jah, kõik failid salvestatakse sinu poolt kettal valitud kausta. Pärast Chrome'i taaskäivitamist võetakse ülekirjutused automaatselt kasutusele, eeldusel, et märkeruut Luba kohalikud ülekirjutused jäi sisselülitatuks. Failid ise ei kao kuhugi, kuna need on tavalised failid sinu failisüsteemis.

Kas ma saan üle kirjutada API vastust (JSON), mitte ainult staatilisi faile?

Jah, alates Chrome 117-st see toimib. Vahekaardil Võrk tee päringul paremklõps ja vali Kirjuta sisu üle (Override content), Chrome loob kohaliku faili vastuse kehaga, mida saad redigeerida. Järgmisel päringul tagastab brauser serveri vastuse asemel sinu kohaliku versiooni.

Miks minu Elementide paneelis tehtud muudatused pärast värskendamist lähtestuvad?

Elementide paneel redigeerib DOM-i mälus, mitte lähtefaile. Selleks et muudatused F5 üle elaksid, lülitu Allikate vahekaardile, leia vastav fail ja redigeeri seda seal. Salvesta Ctrl+S abil ja Chrome loob kohaliku ülekirjutuse.

Kuidas jagada kohalikke ülekirjutusi kolleegiga?

Lihtsalt saada ülekirjutuste kausta sisu. Kolleeg paneb failid oma kausta, määrab selle arendajatööriistades valiku Vali ülekirjutuste kaust kaudu ja kõik muudatused rakenduvad tema masinas. Meeskonnatööks on mugav hoida ülekirjutuste kausta projekti Git-i hoidlas.

Kas ma saan kasutada kohalikke ülekirjutusi Firefoxis või teistes brauserites?

Firefoxil puudub kohalike ülekirjutuste analoog, muudatuste salvestamist värskendamiste vahel ei toetata. Edge, mis põhineb Chromiumil, omab sama funktsionaalsust nagu Chrome, kuna kasutab ühist arendajatööriistade koodibaasi. Brave ja Opera toetavad samuti ülekirjutusi kui Chromiumi brauserid.

Miks sul tegelikult kohalikke ülekirjutusi vaja on

Kohalikud ülekirjutused Chrome'i arendajatööriistades ei ole lihtsalt „mugav funktsioon". See on viis muuta brauser täisväärtuslikuks keskkonnaks kiireks prototüüpimiseks ja hüpoteeside testimiseks ilma toodangu koodi puutumata. Säästate tsükleid „redigeeri → ehita → juuruta → kontrolli" ja saate tulemused koheselt.

Proovi kohe: ava ükskõik milline sait, luba ülekirjutused ja muuda pealkirja värvi. Värskenda lehte. Näed, et värv jäi alles? See ongi see, milleks see kõik.