Ebben az útmutatóban megtudhatod, hogyan használhatod a Chrome Developer Tools-t arra, hogy stílusokat és szkripteket alakíts meg anélkül, hogy változtatnád az eredeti kódot. Megmutatjuk, hogyan végezhetsz kiemelt teszteket és módosításokat a webhelyeden a Felülbírálások és a Chrome munkaterület segítségével, anélkül hogy az eredeti szerverfájlt érintenéd.
Legfontosabb megállapítások
- Az Overwrites lehetővé teszi a fájlok helyi felülírását tesztelések és módosítások előtt.
- A Munkaterület lehetővé teszi, hogy összeköthesd a helyi fejlesztői mappádat a Chrome Developer Tools segítségével, hogy közvetlen módosításokat végezhess.
- Ezek a két funkció rendkívül hasznosak a termelési környezet hibáinak hibakereséséhez, anélkül hogy az eredeti szerverkódot érintenéd.
Lépésről lépésre vezetés
A Chrome Developer Tools hatékony használatához kövesd ezeket a lépéseket:
1. Overwrites használata
Első lépésként az Overwrites funkciót szeretnénk használni a Chrome-ban. Válassz ki egy JavaScript-fájlt, például a main.js-t, ami a szerverről tölt be.
Kattints jobb gombbal a fájlra, majd válaszd ki a "Tartalom felülírása" lehetőséget a lenyíló menüből.
Egy párbeszédablak jelenik meg, ahol kiválaszthatod a helyi fájl tárolási helyét. Győződj meg arról, hogy már létrehoztál egy mappát, amelyben el akarod helyezni a felülíró fájlokat.
Válaszd ki a kívánt mappát, majd kattints a "Mappa kiválasztása" gombra. Ezzel létrejön a kapcsolat az eredeti fájl és a helyi fájl között.
Ezután engedélyezned kell a böngésző számára a hozzáférést ehhez a könyvtárhoz. Kattints újra az Overwrites menüre, és győződj meg róla, hogy az engedély a kívánt könyvtárhoz való hozzáférésre aktív.
2. Helyi fájl létrehozása
Most készíthetsz egy új fájlt az Override mappában. Nyisd meg a fájlt, és írj bele például egy egyszerű alert()-szkriptet.
A tartalmat igényeidnek megfelelően módosíthatod. Mentsd el a fájlt, majd frissítsd az oldalt, hogy láthasd, most már megjelenik az Alert ablak, ahelyett, hogy az eredeti szerverről betöltött fájl lenne.
3. Hálózati tevékenység ellenőrzése
Annak érdekében, hogy biztosítsd, hogy a fájl már nem töltődik be a szerverről, nyisd meg a Developer Tools-ban a Hálózat fülületet. Látnod kell, hogy a main.js fájlt már nem tölti be a szerver, helyette a helyileg felülírt tartalmak jelennek meg.
Ha további Overwrite-okat szeretnél hozzáadni vagy meglévőket törölni, menj az Overwrites területre, ahol áttekintést kapsz az összes aktivált Overwrites-ról.
4. Munkavégzés a Munkaterülettel
Következő lépésként beállítanánk a Munkaterületet. Ezzel a módszerrel összekötheted a helyi fejlesztői mappádat a Developer Tools-szal. Menj a Developer Tools beállításaiba, és keresd meg a “Munkaterület” opciót.
Válaszd ki a mappát, amelyben a projektek találhatók. A Chrome-nak itt is szüksége van engedélyre ahhoz, hogy hozzáférjen ehhez a mappához, tehát győződj meg róla, hogy megadtad az adott jogosultságokat.
5. Kód módosítások
Most már közvetlenül a Workspace-ben dolgozhatsz. Például nyisd meg a main.js fájlodat, végezz módosításokat és mentsd el a fájlt. A kód ezután automatikusan újra lesz töltve a szerverről, és azonnal láthatod, hogyan befolyásolja ez az alkalmazkodás a weboldaladat.
6. Hibakeresés a Workspace-ben
A Workspace praktikus előnye, hogy Breakpointokat helyezhetsz el a kódod hatékony hibakereséséhez. Helyezz Breakpointokat a kódod soraira és frissítsd az oldalt, hogy megszakítsd a végrehajtást és ellenőrizd a változók aktuális állapotát.
7. Előnyök és hátrányok
Bár a Workspace hasznos, sok fejlesztő azt javasolja, hogy a módosításokat közvetlenül egy kód szerkesztőben, például a Visual Studio Code-ban végezd, és ott mentsd el a fájlokat. Ez segít jobban látni, hogy melyik fájlverziót használod. A Workspace használata zavaró lehet, különösen ha a kapcsolat az eredeti fájlokhoz nem egyértelmű.
Azonban ha csak egyszerű CSS fájlokat vagy nem transzpillált kódot szerkesztesz, a Workspace jó választás lehet.
Összefoglalás
Ebben az útmutatóban megtanultad, hogyan tudsz dolgozni az Overrides-okkal és a Workspace-szel a Chrome Developer Tools segítségével, hogy meg tudj stilizálni és scripteket módosítani anélkül, hogy az eredeti szerverfájlokat érintenéd. Az Overrides lehetővé teszik gyors módosítások végrehajtását, míg a Workspace lehetővé teszi, hogy közvetlenül dolgozz a fejlesztőkönyvtáradon.
Gyakran Ismételt Kérdések
Használhatom az Overrides-ot CSS fájlokhoz is?Igen, használhatod az Overrides-ot CSS fájlokhoz is. Egyszerűen válaszd ki a kívánt CSS fájlt és aktiváld az Override-ot.
Hogyan deaktiválhatom az Override-okat?Az Override-okat azáltal tudod deaktiválni, hogy a Fejlesztőeszközökben az Override-okhoz mész, és ott kiiktatod vagy törölöd azokat.
Vannak korlátozások a Workspace terén?Igen, néha problémát jelenthet a megfelelő Workspace azonosítása, különösen transzpillált kódnál.
Miért érdemes az Override-okat használni a Workspace helyett?Az Override-ok egyértelműbb lehetőséget kínálnak a módosítások végrehajtására, anélkül hogy zavarba jönnél a különböző fájlverziók között. Gyakran egyszerűbb őket kezelni, ha nem szeretnéd közvetlenül a forrást módosítani.
