V tem vodniku boste izvedeli, kako z orodji za razvijalce Chrome prilagodite sloge in skripte, ne da bi spremenili izvirno kodo. Pokazal vam bo, kako lahko s prepisi in delovnim prostorom Chrome opravite obsežne preizkuse in prilagoditve spletnega mesta, ne da bi se dotaknili izvirne strežniške datoteke.
Ključna spoznanja
- Prevzemi omogočajo lokalno prepisovanje datotek za izvajanje testov in prilagoditev.
- Delovni prostor vam omogoča, da lokalno razvojno mapo povežete z orodji Chrome Developer Tools in neposredno izvajate spremembe.
- Ti dve funkciji sta izjemno uporabni za odpravljanje napak v produkcijskem okolju, ne da bi posegali v izvirno strežniško kodo.
Vodnik po korakih
Če želite učinkovito uporabljati orodja Chrome Developer Tools, sledite naslednjim korakom:
1. uporaba prepisov
Najprej želimo uporabiti Chromovo funkcijo overrides. Izberite datoteko JavaScript, na primer main.js, ki je naložena iz strežnika.
Z desnim gumbom miške kliknite datoteko in v kontekstnem meniju izberite možnost "Override Content" (Prevlada vsebino).
Odpre se pogovorno okno, v katerem lahko izberete mesto shranjevanja za lokalno datoteko. Prepričajte se, da ste že ustvarili mapo, v katero želite shraniti datoteke s prekrivanjem.
Izberite želeno mapo in kliknite "Izberi mapo". S tem bo ustvarjena povezava med izvirno datoteko in vašo lokalno datoteko.
Zdaj morate brskalniku omogočiti dostop do te mape. Ponovno kliknite na meni overrides in se prepričajte, da je aktivirano dovoljenje za dostop do želenega imenika.
2. Ustvarite lokalno datoteko
Sedaj lahko v mapi override ustvarite novo datoteko. Odprite datoteko in vanjo napišite preprosto skripto alert(), na primer.
Vsebino lahko prilagodite tako, da bo ustrezala vašim potrebam. Shranite datoteko in ponovno naložite stran, da vidite, da se zdaj namesto datoteke, ki je bila prvotno naložena iz strežnika, prikaže opozorilno okno.
3. Preverite omrežno dejavnost
Če se želite prepričati, da strežnik datoteke ne nalaga več, odprite zavihek Omrežje v orodjih za razvijalce. Videli bi morali, da se datoteka main.js ne nalaga več iz strežnika, temveč se namesto nje nalaga lokalno prepisana vsebina.
Če želite dodati še več prekrivanj ali izbrisati obstoječa, pojdite v razdelek prekrivanj, kjer boste dobili pregled vseh aktiviranih prekrivanj.
4 Delo z delovnim prostorom
Nato želimo nastaviti delovni prostor. Tu lahko svojo lokalno razvojno mapo povežete z orodji za razvijalce. Pojdite v nastavitve orodja za razvijalce in poiščite možnost "Workspace" (delovni prostor).
Izberite mapo, v kateri se nahajajo vaši projekti. Tudi v tem primeru bo Chrome potreboval dovoljenje za dostop do te mape, zato se prepričajte, da ste podelili ustrezna dovoljenja.
5. Spremembe kode
Zdaj lahko delate neposredno v delovnem prostoru. Odprite na primer datoteko main.js, vnesite spremembe in jo shranite. Koda se nato samodejno naloži iz strežnika in takoj lahko vidite, kako prilagoditev vpliva na vaše spletno mesto.
6 Odpravljanje napak v delovnem prostoru
Praktična prednost delovnega prostora je, da lahko nastavite prekinitvene točke in tako učinkovito odpravljate napake v kodi. Nastavite točke prekinitve v vrsticah kode in ponovno naložite stran, da prekinete izvajanje in preverite trenutno stanje spremenljivk.
7 Prednosti in slabosti
Čeprav je delovni prostor uporaben, številni razvijalci priporočajo, da spremembe izvedete neposredno v urejevalniku kode, kot je Visual Studio Code, in tam shranite datoteke. To zagotavlja, da lahko bolje vidite, katera različica datotek se uporablja. Pri uporabi delovnega prostora lahko pride do zmede, zlasti če povezava do izvirnih datotek ni jasna.
Kljub temu je lahko delovni prostor dobra možnost, če urejate le preproste datoteke CSS ali nepredelano kodo.
Povzetek
V tem vodniku ste se naučili, kako delati s prevladami in delovnim prostorom v orodjih za razvijalce Chrome, da prilagodite sloge in skripte, ne da bi se dotaknili izvirne strežniške datoteke. Prevladujoče nastavitve vam omogočajo hitro izvajanje sprememb, medtem ko vam delovni prostor omogoča neposredno delo z razvojno mapo.
Pogosto zastavljena vprašanja
Ali lahko nadomeščanja uporabljam tudi za datoteke CSS?Da, nadomeščanja lahko uporabljate tudi za datoteke CSS. Preprosto izberite želeno datoteko CSS in aktivirajte nadomeščanje.
Kako lahko deaktiviram nadrejene? Nadrejene lahko deaktivirate tako, da v orodjih za razvijalce obiščete nadrejene in jih tam izklopite ali izbrišete.
Ali obstajajo omejitve za delovni prostor?da, včasih je lahko problematično določiti pravilen delovni prostor, zlasti pri preslikani kodi.
Zakaj naj namesto delovnega prostora uporabljam premoči? premoči zagotavljajo jasnejši način izvajanja sprememb, ne da bi se ukvarjali z različnimi različicami datotek. Z njimi je pogosto lažje ravnati, če ne želite neposredno spreminjati izvirnih datotek.
