Tämä suosittu artikkeli päivitettiin vuonna 2020. Lisää kehityskulun parantamisesta työkaluilla, Lue kehittäjän Essentials:Tools on SitePoint Premium.
web-kehittäjän tyypilliseen päivään kuuluu HTML-verkkosivujen luominen niihin liittyvillä CSS-ja JavaScript-palveluilla suosikkieditorissaan. Työnkulku:
- avaa paikallisesti Isännöity sivu selaimella.
- vanno.
- avaa DevTools tutkiakseen asettelun ja toiminnallisuuden ongelmia.,
- Muokata HTML-elementtejä, CSS-ominaisuuksia, ja JavaScript-koodia korjata kysymyksiä.
- Kopioi muutokset takaisin muokkaimeen ja palaa vaiheeseen #1.
Vaikka työkaluja, kuten live uudelleenlastauksen on tehnyt tämän prosessin helpompaa, monet kehittäjät edelleen nipistää koodin sekä DevTools ja niiden toimittaja.
kuitenkin lähdekooditiedostoja on mahdollista avata ja muokata suoraan Chromessa. Kaikki tekemäsi muutokset tallennetaan tiedostojärjestelmään ja päivitetään muokkaimessa (olettaen, että ne päivittyvät, kun tiedostomuutoksia tapahtuu).,
Vaihe 1: Käynnistä Kehittäjän työkalut
Avaa Chrome, lataa sivu paikallisesta tiedostojärjestelmästä/palvelimesta ja avaa Kehittäjän työkalut More tools-valikosta tai paina F12 tai Ctrl / Cmd + Shift + I järjestelmästä riippuen. Siirry Tietolähteet-välilehti tutkia file explorer:
Voit avata ja muokata CSS-ja JavaScript-tiedostot tässä näkymässä, mutta kaikki muutokset menetetään heti, kun päivität sivun.
Vaihe 2: Liitä kansio työtilaan
Napsauta tiedostojärjestelmä-välilehteä ja valitse sitten + Lisää kansio työtilaan., Sinua pyydetään paikantamaan työkansiosi ja Chrome pyytää sinua vahvistamaan, että sallit pääsyn. Explorer näyttää tiedostot järjestelmästä, joka voidaan avata yhdellä napsautuksella:
Vaihe 3: Muokata ja Tallentaa Koodi
nyt Voit hypätä ja muokkaa koodia. Tallentamattomat muokkaukset on merkitty tähdellä Tiedosto-välilehdessä.
CSS-muutokset ovat heti päivittää, mutta jos HTML ja JavaScript, sinun yleensä tarvitse painaa Ctrl/Cmd + S tallentaa tiedoston file system päivitä selain.,
huomaa, että voit myös hiiren kakkospainikkeella Tiedosto-välilehteä ja valitsemalla Tallenna nimellä… tallentaaksesi kopion tiedostosta muualle.
Vaihe 4: tarkistetaan ja kumotaan muutokset
muutosten tarkistamiseksi, hiiren kakkospainikkeella Tiedosto-välilehti ja valitse paikallisia muutoksia… kontekstivalikosta:
diff-tyyppinen näkymä näkyy. Ruudun vasemmassa alalaidassa oleva nuolikuvake kumoaa kaikki muutokset ja palauttaa tiedoston alkuperäiseen tilaansa.,
Chromen Kehittäjän Työkalut ei koskaan täysin korvaa suosikki editori, mutta se voi olla hyödyllinen, kun olet tehdä nopeita muutoksia tai työ toisesta TIETOKONEESTA, jossa toimittaja ei saa asentaa.