Chrome fejlesztői eszközök Tutorials, Tips, Tricks

A Chrome Developer Tools nagyon hasznos lehet hibakeresés közben. A legtöbben már tudják, hogy az élő CSS segítségével szerkeszthetjük a Chrome Dev Eszközöket, de még több tippet fogunk megosztani Önnel ma. Chrome Fejlesztőeszközök tippjei

Számos ismeretlen és rejtett trükköt talál a Chrome Dev eszközzel Eszközök, és a leghasznosabb trükköket vizsgáljuk meg. A fejlesztői eszközök Chrome-ban történő megnyitásához nyomja meg a billentyűzeten a

F12 billentyűt, és próbálja ki a következő trükköket. 1. Fájlok keresése és megnyitása

A webes fejlesztések során 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 a

Ctrl + P gombot, és kezdje el begépelni a fájlnevet. Ez segít megtalálni az adott fájlt a fájlok listájáró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 a

Ctrl + Shift + F gombot a fájlok kereséséhez. Ezenkívül támogatja a szabályos kifejezéseket is. 3. Menj egy bizonyos sorra

Miután megnyitott egy forrásfájlt és át akarsz ugrani egy bizonyos sorra, majd nyomja meg a

Ctrl + G gombot, és adja meg a sorszámot és nyomja meg az enter billentyűt. 4.

$ () -

A megfelelő CSS-választó első előfordulását adja vissza.

• $$ () - Az adott CSS-választóhoz tartozó elemek tömbjét adja vissza.
• További konzolparancsokért ugorjon át erre a bejegyzésre . Használjon többszörös kártyákat

Néha a különböző helyeken többféle színt szeretne beállítani, és egyszerűen elvégezheti a Chrome Dev eszközökben a

Ctrl

billentyűt, és rákattintva a helyére. Ezután kezdjen el írni, és látni fogja, hogy a kiválasztott helyeken van elhelyezve. 6. Tárolja a naplót A napló megőrzése segít megőrizni a naplót, még akkor is, ha betöltötte az oldalt. Jelölje be a

Napló megőrzése

mellett a konzol naplóját, és a napló megőrződik. Ez megjeleníti a naplót, mielőtt az oldal be nem töltött és hasznos a hibák kivizsgálásához. 7. Használjon beépített kódkímélõt A Chrome Dev Tools a beépített kódszûnõvel, a

szép nyomtatással "{}" nevezik.

A fejlesztõ 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 a bal alsó részén látható, hogy a forrásfájlt az emberi olvasható formátumban jelenítse meg. 8. A webhely mobilbarát? Ellenőrizze itt A Chrome Dev Eszközök lehetővé teszi számunkra, hogy ellenőrizzük, hogy egy webhely mobilbarát vagy sem. 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

Emuláció

lap alatt különböző fájlokat tölthet le. Válassza ki a kívánt eszközt, és tesztelje, hogyan néz ki webhelye az adott eszközön. További információért nézze meg a következő videót. 9. Szenzorok emulálása és földrajzi elhelyezkedés

A szenzorokat, mint az érintőképernyőt és a gyorsulásmérőket is emulálhatja. Még a földrajzi helyet is emulálhatja. Ehhez hajtsa át a

Emuláció -> Érzékelők

10 értékre. Válassza ki az jelenlegi szó következő előfordulását Ha a "Minden esemény előfordulása" szót ki szeretné cserélni, akkor válassza ki a szót, majd nyomja meg a

Ctrl + D

gombot a kiválasztott szó következő előfordulásának kiválasztásához. A, akkor a szó mindegyikének előfordulásait egyetlen felvételen szerkesztheti. 11. Alter Color Format Csak a

Shift + Click

elemet használja a színes előnézetben az rgba, a hexadecimális és a hsl formázás megváltoztatásához. 12. A helyi fájlok módosítása a munkaterületen keresztülKépesek vagyunk szerkeszteni a forrásfájlokat és módosításokat végrehajtani a CSS, a Java Script és a Chrome Dev eszközökben található egyéb fájlokban. 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 a bal oldali forrásfájlra a

Források

lapon, és válaszd a Mappa hozzáadása a munkaterületre. A munkaterületekre vonatkozó további információkért menj át a Chrome.com webhelyre.