Chrome Developer Tools: Korvaukset ja Työtilat - Kattava opas

Tässä ohjeessa opit, kuinka voit käyttää Chrome-kehittäjätyökaluja tyyleihin ja skripteihin tekemättä muutoksia alkuperäiseen koodiin. Näytetään, miten voit käyttää Overridesia ja Chromen työtilaa laajoihin testauksiin ja muokkauksiin verkkosivustollasi ilman alkuperäisen palvelintiedoston muokkaamista.

Tärkeimmät oivallukset

• Overridesin avulla voit korvata tiedostoja paikallisesti testien ja muokkausten tekemiseksi.
• Työtila mahdollistaa paikallisen kehityskansion liittämisen Chrome-kehittäjätyökaluihin muutosten tekemistä varten.
• Nämä kaksi ominaisuutta ovat äärimmäisen hyödyllisiä ongelmien vianmäärityksessä tuotantoympäristössä alkuperäisen palvelinkoodin vaikuttamatta.

Vaiheittainen ohje

Jotta voit hyödyntää Chromen kehittäjätyökaluja tehokkaasti, noudata seuraavia ohjeita:

1. Overridesin käyttö

Ensimmäiseksi haluamme käyttää Chromen Overrides-toimintoa. Etsi JavaScript-tiedosto, kuten main.js, joka ladataan palvelimelta.

Valitse tiedosto hiiren oikealla painikkeella ja valitse "Override Content" kontekstivalikosta.

Auennut dialogiruutu mahdollistaa paikallisen tiedoston sijainnin valitsemisen. Varmista, että olet jo luonut kansioon, johon haluat tallentaa korvaavat tiedostosi.

Valitse haluamasi kansio ja napsauta "Select Folder". Tämä yhdistää alkuperäisen tiedoston ja paikallisen tiedostosi.

Nyt sinun on annettava selaimelle pääsy tähän hakemistoon. Napsauta uudelleen Overrides-valikkoa ja varmista, että käyttöoikeus haluttuun hakemistoon on käytössä.

2. Paikallisen tiedoston luominen

Nyt voit luoda uuden tiedoston Overrides-kansioon. Avaa tiedosto ja kirjoita siihen esimerkiksi yksinkertainen alert()-skripti.

Voit mukauttaa sisällön tarpeidesi mukaan. Tallenna tiedosto ja päivitä sivu nähdäksesi, että nyt ilmestyy ilmoitusikkuna alkuperäisen palvelimelta ladatun tiedoston sijaan.

3. Verkkoaktiviteetin tarkistaminen

Varmista, ettei tiedostoa enää ladata palvelimelta avaamalla Network-välilehti Developer-työkaluista. Main.js-tiedoston pitäisi nyt ladata paikallisesti korvatut sisällöt sen sijaan, että se latautuisi palvelimelta.

Mikäli haluat lisätä lisää Overridesia tai poistaa olemassa olevia, siirry Overrides-alueelle, josta näet kaikki aktiiviset Overridesit.

4. Työskentely työtilassa

Seuraavaksi haluamme asettaa työtilan. Tässä voit kytkeä paikallisen kehityskansion kehittäjätyökaluihin. Siirry kehittäjätyökalujen asetuksiin ja etsi "Työtila"-vaihtoehto.

Valitse kansio, jossa projektit sijaitsevat. Chrome tarvitsee myös tässä tapauksessa käyttöoikeuden tähän kansioon, joten varmista, että olet antanut tarvittavat luvat.

5. Muutokset koodiin

Nyt voit työskennellä suoraan Workspace-tilassa. Avaa esimerkiksi main.js-tiedostosi, tee muutoksia ja tallenna tiedosto. Koodi ladataan automaattisesti uudelleen palvelimelta, jolloin voit heti nähdä miten muutokset vaikuttavat verkkosivustollasi.

6. Debuggaus Workspace-tilassa

Yksi kätevä etu Workspacessa on, että voit asettaa katkaisupisteitä koodisi tehokkaaseen testaamiseen. Aseta katkaisupisteitä koodiriveille ja päivitä sivu, jotta voit keskeyttää suorituksen ja tarkistaa muuttujien nykyisen tilan.

7. Etuja ja haittoja

Vaikka Workspace on hyödyllinen, monet kehittäjät suosittelevat tehdä muutokset suoraan koodieditorilla, kuten Visual Studio Codella, ja tallentaa tiedostot siellä. Tämä auttaa näkemään selvemmin, mitä tiedostoversiota käytetään. Workspacen käyttö voi olla hämmentävää, etenkin jos alkuperäisten tiedostojen linkitys ei ole selvää.

Silti, jos muokkaat vain yksinkertaisia CSS-tiedostoja tai ei käännettyä koodia, Workspace voi olla hyvä vaihtoehto.

Yhteenveto

Tässä oppaassa olet oppinut, miten voit käyttää Overrideseja ja Workspacea Chrome Developer Tools -työkalussa mukauttaaksesi tyylejä ja skriptejä koskematta alkuperäiseen palvelintiedostoon. Overrideseilla voit tehdä nopeita muutoksia, kun taas Workspace mahdollistaa suoran yhteistyön kehityskansion kanssa.