Šiame vadove sužinosite, kaip naudoti "Chrome" programuotojo įrankius ir pritaikyti stilius bei scenarijus nekeičiant pradinio kodo. Jame sužinosite, kaip naudoti perrašymus ir "Chrome" darbo sritį, kad galėtumėte atlikti išsamius svetainės bandymus ir pritaikymus neliesdami originalaus serverio failo.
Pagrindinės žinios
- Perdangos leidžia perrašyti failus vietoje, kad galėtumėte atlikti bandymus ir pritaikymus.
- Darbo erdvė leidžia prijungti vietinį kūrimo aplanką prie "Chrome Developer Tools" ir tiesiogiai atlikti pakeitimus.
- Šios dvi funkcijos yra labai naudingos siekiant pašalinti problemas gamybinėje aplinkoje, nedarant poveikio originaliam serverio kodui.
Žingsnis po žingsnio vadovas
Norėdami veiksmingai naudotis "Chrome" programuotojo įrankiais, atlikite šiuos veiksmus:
1. naudodami perrašymus
Pirmiausia norime naudoti "Chrome" funkciją overrides. Pasirinkite "JavaScript" failą, pavyzdžiui, main.js, kuris yra įkeltas iš serverio.
Dešiniuoju pelės mygtuku spustelėkite failą ir kontekstiniame meniu pasirinkite "Override Content".
Atsidarys dialogo langas, kuriame galėsite pasirinkti vietinio failo saugojimo vietą. Įsitikinkite, kad jau sukūrėte aplanką, kuriame norite saugoti perrašymo failus.
Pasirinkite norimą aplanką ir spustelėkite "Select Folder" (pasirinkti aplanką). Taip bus sukurta nuoroda tarp originalaus failo ir jūsų vietinio failo.
Dabar turite suteikti naršyklei prieigą prie šio katalogo. Dar kartą spustelėkite meniu "Overrides" ir įsitikinkite, kad prieigos prie norimo katalogo leidimas yra įjungtas.
2. Sukurkite vietinį failą
Dabar galite sukurti naują failą apvertimo aplanke. Atidarykite failą ir jame parašykite paprastą alert() scenarijų, pvz.
Turinį galite pritaikyti pagal savo poreikius. Išsaugokite failą ir iš naujo įkelkite puslapį, kad pamatytumėte, jog vietoj iš pradžių iš serverio įkelto failo dabar rodomas įspėjimo langas.
3. Patikrinkite tinklo veiklą
Norėdami įsitikinti, kad failas nebeįkeliamas iš serverio, atidarykite Kūrėjo įrankių skirtuką Tinklas. Turėtumėte pamatyti, kad iš serverio nebesikraunamas main.js failas, o vietoj jo kraunamas vietoje perrašytas turinys.
Jei norite pridėti daugiau pertvarkymų arba ištrinti esamus, eikite į skyrių Overrides (pertvarkymai), kuriame apžvelgsite visus aktyvuotus pertvarkymus.
4 Darbas su darbo erdve
Toliau norime nustatyti darbo erdvę. Čia galite sujungti vietinį kūrimo aplanką su programavimo įrankiais. Eikite į "Developer Tools" nustatymus ir ieškokite parinkties "Workspace".
Pasirinkite aplanką, kuriame yra jūsų projektai. Vėlgi "Chrome" reikės leidimo pasiekti šį aplanką, todėl įsitikinkite, kad suteikėte atitinkamas teises.
5. Kodo pakeitimai
Dabar galite dirbti tiesiogiai darbo erdvėje. Pavyzdžiui, atidarykite savo main.js failą, atlikite pakeitimus ir išsaugokite failą. Tuomet kodas automatiškai įkeliamas iš serverio ir iš karto galite matyti, kaip pritaikymas veikia jūsų svetainę.
6 Derinimas darbo erdvėje
Praktinis darbinės erdvės privalumas yra tas, kad galite nustatyti nutraukimo taškus ir taip efektyviai derinti kodą. Nustatykite nutraukimo taškus savo kodo eilutėse ir perkraukite puslapį, kad nutrauktumėte vykdymą ir patikrintumėte dabartinę kintamųjų būseną.
7 Privalumai ir trūkumai
Nors darbo erdvė yra naudinga, daugelis kūrėjų rekomenduoja pakeitimus atlikti tiesiogiai kodo redaktoriuje, pavyzdžiui, "Visual Studio Code", ir įrašyti failus ten. Taip užtikrinama, kad geriau matysite, kokia failų versija naudojama. Naudojantis darbo erdve gali kilti painiava, ypač jei nuoroda į originalius failus nėra aiški.
Vis dėlto, jei redaguojate tik paprastus CSS failus arba netranspiliuotą kodą, darbo erdvė gali būti geras pasirinkimas.
Apibendrinimas
Šiame vadove sužinojote, kaip "Chrome" programuotojo įrankių programoje "Chrome Developer Tools" dirbti su perviršiais ir darbo erdve, kad galėtumėte pritaikyti stilius ir skriptus neliesdami originalaus serverio failo. Perdangos leidžia greitai atlikti pakeitimus, o darbo erdvė leidžia dirbti tiesiogiai su kūrimo aplanku.
Dažniausiai užduodami klausimai
Ar CSS failams taip pat galiu naudoti perdangas? Taip, CSS failams taip pat galite naudoti perdangas. Tiesiog pasirinkite norimą CSS failą ir suaktyvinkite perdangą.
Kaip deaktyvuoti perdangas? Galite deaktyvuoti perdangas eidami į Kūrėjo įrankių skyrių ir ten jas išjungdami arba ištrindami.
Ar yra apribojimų dėl darbo vietos?taip, kartais gali būti problemiška nustatyti tinkamą darbo vietą, ypač naudojant perkeltą kodą.
Kodėl turėčiau naudoti overrides, o ne darbo erdvę? overrides suteikia aiškesnį būdą atlikti pakeitimus, nesusiduriant su skirtingomis failų versijomis. Su jomis dažnai lengviau dirbti, jei nenorite tiesiogiai keisti originalių failų.
