A Google Chrome az egyik legnépszerűbb webes böngészője a fejlett szolgáltatásoknak köszönhetően. Chrome fejlesztői eszközök nagyon hasznos lehet hibakeresés közben. A legtöbben már tudják, hogy az élő CSS-t szerkeszthetjük a Chrome Dev Eszközök használatával, de még több tippet tudunk megosztani Önnel ma.
A Chrome Fejlesztőeszközök tippjei
A Chrome Dev Eszközök számos ismeretlen és rejtett trükkje van, és a leghasznosabb trükköket keressük. A fejlesztői eszközök Chrome-ban történő megnyitásához nyomjuk meg a gombot F12 a billentyűzeten, és próbálja ki a következő trükköket.
1. Keresse meg és nyissa meg a fájlt
Amikor webfejlesztést végzünk, számos HTML, CSS, JS és egyéb fájlt kezelünk. Ha valamit hibakeresni szeretnénk, megnyílik a Chrome Dev eszközök. Gyorsan megkeresheti és megtalálhatja az adott fájlt, hogy megkönnyítse a munkáját. Csak nyomja meg Ctrl + P és írja be a fájl nevét. Ez segít megtalálni az adott fájlt a fájlok listájából.
2. Keresés a forrásfájlban
Az előző trükkben megismertük, hogyan keressünk egy adott fájlt. A betöltött fájlokban egy bizonyos karakterláncot is megkereshet. nyomja meg Ctrl + Shift + F keresni egy karakterláncot a fájlokban. Támogatja a rendszeres kifejezéseket is.
3. Menjen egy adott vonalra
Miután megnyitott egy forrásfájlt, és át kíván lépni egy adott vonalra, nyomja meg a gombot Ctrl + G és adja meg a sorszámot és nyomja meg az Enter billentyűt.
4. A DOM elemek kiválasztása a Konzol lapon
A Dev Tools lehetővé teszi az elemek kiválasztását is a konzolban.
- $() – Visszaadja a megfelelő CSS-választó első előfordulását.
- $$() – Az adott CSS-választóhoz tartozó elemek tömbjét adja vissza.
További konzolparancsok esetén menj át erre a bejegyzésre.
5. Használj több rakodót
Előfordulhat, hogy különböző helyeken kívánja beállítani a többszemélyes kagylót, és a Chrome Dev eszközökkel egyszerűen megteheti azt Ctrl gombot, és kattintson arra, hogy hova kívánja elhelyezni őket. Ezután kezdd el az írást, és látni fogod, hogy a kiválasztott helyeken van elhelyezve.
6. A napló megőrzése
A napló megőrzése segít megőrizni a naplót, még az oldal betöltése során is. Jelölje be a lehetőséget mellette A napló megőrzése a konzol naplójában és a napló megőrzése. Ez megjeleníti a naplót, mielőtt az oldal be nem töltött és hasznos lenne a hibák kivizsgálására.
7. Használja a beépített kód szépítőt
A Chrome Dev Eszközöknek a beépített kódszója van szép nyomtatás "{}". A fejlesztői eszköz a minimális kódot mutatja, és nem olyan könnyű olvasni. Kattintson a szép nyomtatási gombra, amely a nyitott forrásfájllal bal alsó részén látható, hogy megjelenítse a forrásfájlt az emberi olvasható formátumban.
8. Mobilbarát a webhelye? Ellenőrizze itt
A Chrome Dev Eszközök lehetővé teszi, hogy ellenőrizzük, hogy a webhely mobilbarát vagy nem. Ellenőrizheti, hogy a webhely hogyan néz ki különböző eszközökön. Vezesse át a Chrome Dev eszközöket és alatta emuláció lapon különböző fájlokat tölthet le. Válassza ki a kívánt eszközt, és tesztelje, hogy a webhely hogyan néz ki az adott eszközön.
9. Emulálja az érzékelőket és a földrajzi elhelyezkedést
A szenzorok, mint az érintőképernyő és a gyorsulásmérők is emulálhatják. Még a földrajzi helyet is emulálhatja. Ehhez menj át Emuláció -> Érzékelők.
10. Válassza ki az aktuális szó következő előfordulását
Ha ki szeretné cserélni az összes szót, akkor jelölje ki a szót, majd nyomja meg a gombot Ctrl + D a kiválasztott szó következő előfordulásának kiválasztásához. A, akkor az adott szó mindegyik előfordulásában egy lövésnél szerkeszthető.
11. Változtassa meg a színformátumot
Csak használja Shift + Kattintson a színes előnézeti változások megváltoztatása az rgba, a hexadecimális és a hsl formázás között.
12. A helyi fájlok módosítása a munkaterületen keresztül
Képes szerkeszteni a forrásfájlokat és módosítani a CSS, a Java Script és a Chrome Dev eszközök más fájljait. Ha ezeket a módosításokat hozzáadni a helyi fájlokhoz, akkor itt nem kell másolni a változásokat a munkaterületről a lemezen található fájlokra. A Chrome Dev eszközök lehetővé teszik a fájlok illesztését és a helyi fájl frissítését a dev eszközökben végrehajtott módosításokkal. Ehhez kattints jobbra a forrásfájlra a bal oldalon források lapot és válassza ki Mappa hozzáadása a munkaterülethez.
A munkaterületekkel kapcsolatos további információért keresse fel a Chrome.com webhelyet.
