Google Chrome je jedným z populárnych webových prehliadačov pre vývoj webových aplikácií, a to kvôli jeho pokročilým funkciám. Nástroje pre vývojárov Chrome môže byť veľmi užitočné pri ladení. Väčšina z nás už vie, že môžeme upraviť živé CSS pomocou nástrojov Chrome Dev Tools, ale sú tu aj ďalšie tipy, ktoré s vami dnes budeme zdieľať.
Tipy pre vývojárov Chrome
Existuje veľa neznámych a skrytých trikov nástrojov Chrome Dev Tools a budeme sa pozerať na najužitočnejšie triky medzi nimi. Ak chcete otvoriť nástroje pre vývojárov v prehliadači Chrome, stlačte tlačidlo F12 na klávesnici a vyskúšajte nasledujúce triky.
1. Nájdite a otvorte ľubovoľný súbor
Keď robíme webový vývoj, zaoberáme sa mnohými HTML, CSS, JS a ďalšími súbormi. Keď chceme niečo ladiť, otvoríme nástroje Chrome Dev. Môžete rýchlo vyhľadávať a nájsť konkrétny súbor, aby ste uľahčili prácu. Len stlač Ctrl + P a začnite písať názov súboru. To vám pomôže nájsť konkrétny súbor zo zoznamu súborov.
2. Hľadať v zdrojovom súbore
V predchádzajúcom triku sme sa dozvedeli, ako vyhľadať konkrétny súbor. Môžete dokonca vyhľadať určitý reťazec vo všetkých načítaných súboroch. lis Ctrl + Shift + F hľadanie reťazca v súboroch. Podporuje aj regulárne výrazy.
3. Prejdite na konkrétny riadok
Keď otvoríte ľubovoľný zdrojový súbor a chcete prejsť na konkrétny riadok, stlačte tlačidlo Ctrl + G a zadajte číslo linky a stlačte Enter.
4. Výber položky DOM Elements v konzole
Nástroje Dev vám tiež umožňujú vybrať prvky v konzole.
- $() – Vráti prvý výskyt zodpovedajúceho voliča CSS.
- $$() – Vráti pole prvkov zodpovedajúcich danému selektoru CSS.
Ak chcete získať ďalšie príkazy konzoly, prejdite na tento príspevok.
5. Využívajte viac zábavy
Niekedy môžete nastaviť viacero funkcií na rôznych miestach a môžete to ľahko urobiť v nástrojoch Chrome Dev podržaním ctrl a kliknutím na miesto, kam chcete umiestniť. Potom začnite písať a uvidíte, že je umiestnený na rôznych vybraných miestach.
6. Zachovať záznam
Zachovať protokol vám pomôže pretrvávať denník aj načítanie stránky. Skontrolujte možnosť vedľa položky Zachovať protokol v denníku konzoly a protokol sa zachová. Toto zobrazuje protokol pred tým, ako je stránka vyložená a užitočná na vyšetrenie chýb.
7. Použite zabudovaný kód skrášľovač
Aplikácia Chrome Dev Tools má vstavaný vstavaný kódový zosvetľovač pekná tlač "{}". Nástroj pre vývojárov zobrazuje minimalizovaný kód a nie je tak ľahko čitateľný. Kliknite na tlačidlo pekného tlače, ktoré je zobrazené v ľavom dolnom rohu na otvorenom zdrojovom súbore, aby ste zobrazili zdrojový súbor v ľudskom čitateľnom formáte.
8. Je váš web priateľský pre mobilné zariadenia? Skontrolujte ho tu
Nástroje Chrome Dev nám tiež umožňujú skontrolovať, či je internetová stránka vhodná pre mobilné zariadenia alebo nie. Môžete skontrolovať, ako váš web vyzerá na rôznych zariadeniach. Prejdite na nástroje Chrome Dev a pod emulácia kartu môžete načítať rôzne zariadenia. Vyberte zariadenie, ktoré chcete, a vyskúšajte, ako váš web vyzerá v danom zariadení.
9. Emulujte snímače a geografickú polohu
Môžete dokonca emulovať senzory ako dotykový displej a akcelerometre. Môžete dokonca napodobniť geografickú polohu. Ak to chcete urobiť, prejdite na to Emulácia -> Snímače.
10. Zvoľte ďalší výskyt aktuálneho slova
Ak chcete nahradiť slovo Vo všetkých jeho výskytoch, vyberte slovo a stlačte Ctrl + D na výber ďalšieho výskytu vybratého slova. Toto slovo môžete upraviť vo všetkých jeho výskytoch v jednej snímke.
11. Zmeniť formát farieb
Stačí použiť Shift + Kliknite na náhľad farieb na zmenu mení medzi rgba, hexadecimálne a hsl formátovanie.
12. Pridajte zmeny do miestnych súborov cez pracovný priestor
Sme schopní upravovať zdrojové súbory a robiť nejaké zmeny v CSS, Java Script av iných súboroch v nástrojoch pre vývojárov Chrome. Ak chcete tieto zmeny pridať do miestnych súborov, nie je potrebné kopírovať tieto zmeny z pracovného priestoru na súbory na disku. Nástroje Chrome Dev vám umožňujú porovnávať súbory a aktualizovať lokálny súbor so zmenami, ktoré ste vykonali v dev nástrojoch. Ak to chcete urobiť, kliknite pravým tlačidlom na zdrojový súbor na ľavej strane na zdroje a vyberte Pridať priečinok do pracovného priestoru.
Ďalšie informácie o pracovných priestoroch nájdete na stránke Chrome.com.
