Selles juhendis saate teada, kuidas kasutada Chrome'i arendajate tööriistu, et kohandada stiile ja skripte ilma originaalkoodi muutmata. Näidatakse, kuidas saate kasutada ülekirjutusi ja Chrome'i töökeskkonda, et teha ulatuslikke katseid ja kohandusi oma veebisaidil, puudutamata originaalserveri faili.
Olulisemad järeldused
- Ülekirjutustega saate kohapeal faile üle kirjutada, et teha katseid ja kohandusi.
- Töökeskkond võimaldab teil ühendada oma kohaliku arenduskausta Chrome'i arendajate tööriistadega, et muudatusi otse teha.
- Need kaks funktsiooni on väga kasulikud tootmisümbruses tõrkeotsinguks, kahjustamata originaalset serverikoodi.
Samm-sammult juhend
Chrome'i arendajate tööriistu tõhusalt kasutamiseks järgige neid samme:
1. Ülekirjutuste kasutamine
Esiteks tahame kasutada Chrome'i ülekirjutuse funktsiooni. Valige näiteks serverist laaditav JavaScript-fail, näiteks main.js.
Paremklõpsake failil ja valige kontekstimenüüst „Ülekirjuta sisu“.
Avaneb dialoogiboks, kus saate valida kohaliku faili salvestuskoha. Veenduge, et olete juba loonud kausta, kuhu soovite oma ülekirjutatavad failid salvestada.
Valige soovitud kaust ja klõpsake nuppu „Vali kaust“. Sellega luuakse ühendus originaalfaili ja teie kohaliku faili vahel.
Nüüd peate brauserile selle kausta juurdepääsu võimaldama. Klõpsake ülekirjutuste menüüs uuesti ja veenduge, et käsk sinu valitud kausta juurdepääsu lubamiseks oleks aktiveeritud.
2. Kohaliku faili loomine
Nüüd saate luua uue faili ülekirjutuste kaustas. Avage fail ja kirjutage näiteks lihtne alert()-skript.
Saate sisu kohandada vastavalt vajadusele. Salvestage fail ja värskendage lehte, et näha, et nüüd ilmub hüpikaken selle asemel, et serverist algselt laaditav fail.
3. Võrgutegevuse kontrollimine
Tagamaks, et faili enam serverist ei laadita, avage arendaja tööriistades võrgu vahekaart. Peaksite nägema, et main.js-faili sellest allika asukohast enam ei laadita, vaid asemel laaditakse kohapeal ülekirjutatud sisu.
Kui soovite lisada rohkem ülekirjutusi või kustutada olemasolevaid, minge ülekirjutuste alale, kus näete kõiki aktiveeritud ülekirjutusi.
4. Töötamine töökeskkonnas
Järgmisena soovime seadistada töökeskkonna. Siin saate ühendada oma kohaliku arenduskausta arendajate tööriistadega. Minge arendaja tööriistade seadetesse ja otsige üles „Töökeskkond“ valik.
Valige kaust, kus teie projektid asuvad. Chrome vajab ka siin juurdepääsu sellele kaustale, seega veenduge, et olete andnud vastavad loaõigused.
5. Koodiga töötamine
Nüüd saate otse tööruumis töötada. Avage näiteks oma main.js fail, tehke muudatusi ja salvestage fail. Kood laaditakse seejärel serverist automaatselt uuesti ja saate kohe näha, kuidas muudatus mõjutab teie veebisaiti.
6. Tõrkeotsing tööruumis
Üks praktiline eelis tööruumist on võimalus seada vaheaegu, et tõhusalt siluda oma koodi. Seadke vahepausid oma koodi ridadel ja laadige leht uuesti, et peatada täitmine ja kontrollida muutuja hetkeseisu.
7. Eelised ja puudused
Kuigi tööruum on kasulik, soovitavad paljud arendajad teha muudatusi otse koodi redaktoris nagu Visual Studio Code ja salvestada failid seal. See tagab parema ülevaate kasutatavatest failiversioonidest. Tööruumi kasutamisel võib tekkida segadus, eriti kui ühendus algsete failidega pole selge.
Siiski, kui muudate ainult lihtsaid CSS-faile või mitte transpileeritud koodi, võib tööruum olla hea valik.
Kokkuvõte
Selles juhendis õppisite, kuidas Chrome'i arendajate tööriistade ülekirjutuste ja tööruumiga töötades saate kohandada stiile ja skripte ilma algse serverifaili puudutamata. Ülekirjutuseid saate kiiresti muuta, samal ajal kui tööruum võimaldab teil otse oma arenduskaustaga töötada.
Sagedased küsimused
Kas ma saan ülekirjutusi kasutada ka CSS-failide jaoks?Jah, saate ülekirjutusi kasutada ka CSS-failide jaoks. Lihtsalt valige soovitud CSS-fail ja aktiveerige ülekirjutus.
Kuidas ma saan ülekirjutused keelata?Ülekirjutusi saate keelata, minnes arendajate tööriistadesse ja lülitades nad välja või kustutades need sealt.
Kas tööruumil on piiranguid?Jah, mõnikord võib olla keeruline tuvastada õige tööruum, eriti transpileeritud koodi korral.
Miks peaksin kasutama ülekirjutusi tööruumi asemel?Ülekirjutused pakuvad selgemat võimalust muudatuste tegemiseks, ilma erinevate failiversioonide sassi ajamiseta. Need on sageli lihtsamini haldatavad, kui te ei soovi originaalfailidele otse muudatusi teha.
