Ez a népszerű cikk 2020-ban frissült. Ha többet szeretne megtudni a fejlesztési munkafolyamat javításáról az eszközökkel, olvassa el a Developer Essentials: Tools on SitePoint Premium.
egy webfejlesztő tipikus napja a HTML-weboldalak létrehozása a kapcsolódó CSS-ekkel és a JavaScript-ekkel a kedvenc szerkesztőjükben. A munkafolyamat:
- nyissa meg a helyben tárolt oldalt egy böngészőben.
- eskü.
- nyissa meg a DevTools alkalmazást az elrendezés és a funkcionalitás problémáinak kivizsgálására.,
- módosítsa a HTML elemeket, a CSS tulajdonságokat és a JavaScript kódot a problémák megoldásához.
- másolja vissza ezeket a módosításokat a szerkesztőbe, majd térjen vissza az 1.lépéshez.
míg az olyan eszközök, mint az élő újratöltés, megkönnyítették ezt a folyamatot, sok fejlesztő továbbra is módosítja a kódot mind a DevTools, mind a szerkesztőben.
a forrásfájlokat azonban közvetlenül a Chrome-ban lehet megnyitni és szerkeszteni. Az Ön által végrehajtott módosítások a fájlrendszerbe kerülnek, majd a szerkesztőn belül frissülnek (feltételezve, hogy frissíti a fájlváltozások bekövetkezésekor).,
1. Lépés: Indítsa el a Fejlesztő Eszközök
Nyissa meg a Chrome-ot, betölt egy oldalt a helyi fájl rendszer/szerver nyílt Fejlesztői Eszközök a További eszközök menüben, vagy nyomja meg az F12 billentyűt, vagy a Ctrl/Cmd + Shift + én attól függően, hogy a rendszer. Keresse meg a Források lapon, hogy vizsgálja meg a File explorer:
meg lehet nyitni és szerkeszteni CSS és JavaScript fájlokat ebben a nézetben, de minden változás elvész, amint frissíti az oldalt.
2. lépés: társítson egy mappát a
munkaterülethez kattintson a fájlrendszer fülre,majd kattintson a + Mappa hozzáadása a munkaterületre., A rendszer kéri, hogy keresse meg a munka mappát, a Chrome pedig felkéri Önt, hogy erősítse meg a hozzáférést. A felfedező fájlokat jelenít meg a rendszeren, amelyeket egyetlen kattintással lehet megnyitni:
3. lépés: szerkessze és mentse el a kódot
most ugorhat be és szerkesztheti a kódot. A nem mentett szerkesztések csillaggal vannak jelölve a fájl lapon.
a CSS változások azonnal frissülnek, de HTML és JavaScript esetén általában a Ctrl/Cmd + S billentyűt kell megnyomnia, hogy a fájlt a fájlrendszerbe Mentse, majd frissítse a böngészőt.,
vegye figyelembe, hogy a jobb gombbal kattintson a Fájl fülre, majd válassza a Mentés másként… lehetőséget a fájl másolatának máshol történő mentéséhez.
4. lépés: a módosítások felülvizsgálata és visszavonása
a módosítások áttekintéséhez kattintson a jobb gombbal a Fájl fülre, és válassza a helyi Módosítások… lehetőséget a helyi menüből:
egy diff-szerű nézet jelenik meg. Az ablaktábla bal alsó részén található nyíl ikon visszavonja az összes módosítást, majd visszaállítja a fájlt eredeti állapotába.,
A Chrome Fejlesztői eszközei soha nem fogják teljes mértékben helyettesíteni a kedvenc szerkesztőjét, de hasznos lehet, ha gyors változtatásokat hajt végre, vagy egy másik számítógépről dolgozik, ahol a szerkesztő Nem telepíthető.