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.
![Chrome'i arendajate tööriistad: ülekirjutused ja tööruum - Põhjalik juhend Chrome'i arendaja tööriistad: ülekirjutused ja tööruum - põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-15.webp?tutkfid=226688)
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.
![Chrome'i arendajate tööriistad: Eemaldused ja Tööruum - Põhjalik juhend Chrome Developer Tools: Ülekirjutused ja tööruumid - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-74.webp?tutkfid=226695)
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.
![Chrome Developer Tools: Asendused ja Tööruum - Üksikasjalik juhend Chrome'i arendaja tööriistad: asendused ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-93.webp?tutkfid=226702)
2. Kohaliku faili loomine
Nüüd saate luua uue faili ülekirjutuste kaustas. Avage fail ja kirjutage näiteks lihtne alert()-skript.
![Chrome'i arendaja tööriistad: ülekirjutused ja tööruum - Põhjalik juhend Chrome'i arendajate tööriistad: overrides ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-105.webp?tutkfid=226705)
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.
![Chrome Developer Tools: Overrides ja tööruum - Põhjalik juhend Chrome Developer Tools: Ülekatte ja Tööala - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-116.webp?tutkfid=226708)
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.
![Chrome'i arendajate tööriistad: Asendused ja tööala - Põhjalik juhend Chrome Developer Tools: Ülekattega funktsioonid ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-144.webp?tutkfid=226711)
Kui soovite lisada rohkem ülekirjutusi või kustutada olemasolevaid, minge ülekirjutuste alale, kus näete kõiki aktiveeritud ülekirjutusi.
![Chrome Developer tööriistad: asendused ja tööruumid - Üksikasjalik juhend Chrome'i arendaja tööriistad: asendused ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-158.webp?tutkfid=226713)
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.
![Chrome'i arendaja tööriistad: Ülekirjutused ja tööruum - Põhjalik juhend Chrome'i arendaja tööriistad: asendused ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-202.webp?tutkfid=226715)
Valige kaust, kus teie projektid asuvad. Chrome vajab ka siin juurdepääsu sellele kaustale, seega veenduge, et olete andnud vastavad loaõigused.
![Chrome'i arendaja tööriistad: asendused ja tööruum - Põhjalik juhend Chrome'i arendajate tööriistad: asendused ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-226.webp?tutkfid=226717)
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.
![Chrome'i arendajate tööriistad: ülekatted ja tööruum - Põhjalik juhend Chrome'i arendaja tööriistad: Ülekirjutused ja Tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-324.webp?tutkfid=226724)
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.
![Chrome'i arendaja tööriistad: asendused ja tööruum - Põhjalik juhend Chrome'i arendajatööriistad: ülekirjutused ja töökeskkond - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-373.webp?tutkfid=226728)
Siiski, kui muudate ainult lihtsaid CSS-faile või mitte transpileeritud koodi, võib tööruum olla hea valik.
![Chrome'i arendaja tööriistad: ülekirjutused ja tööruum - Põhjalik juhend Chrome'i arendajate tööriistad: ülekirjutused ja tööruum - Põhjalik juhend](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-359.webp?tutkfid=226731)
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.