Výukové nástroje pro Chrome Vývojové nástroje, tipy, triky

Google Chrome je jedním z populárních webových prohlížečů pro vývoj webových aplikací díky pokročilým funkcím. Nástroje pro vývojáře Chrome mohou být velmi užitečné při ladění. Většina z nás již ví, že můžeme editovat živé CSS pomocí nástrojů Chrome Dev Tools, ale máme další tipy, které s vámi budeme dnes sdílet.

Tipy pro vývojáře Chrome

Existuje mnoho neznámých a skrytých triků Chrome Dev Nástroje a my se podíváme na nejužitečnější triky mezi nimi. Chcete-li otevřít vývojářské nástroje v prohlížeči Chrome, stiskněte klávesu F12 na klávesnici a vyzkoušejte následující triky:

1. Najít a otevřít libovolný soubor

Při vývoji webových stránek se zabýváme mnoha HTML, CSS, JS a dalšími soubory. Když chceme něco ladit, otevřeme nástroje Chrome Dev. Můžete rychle vyhledávat a najít konkrétní soubor, abyste usnadnili práci. Pouze stiskněte Ctrl + P a začněte psát název souboru. To vám pomůže nalézt konkrétní soubor ze seznamu souborů.

2. Vyhledávání v rámci zdrojového souboru

V předchozím triku jsme se dozvěděli, jak hledat konkrétní soubor. Můžete dokonce vyhledat konkrétní řetězec ve všech načtených souborech. Stiskněte Ctrl + Shift + F pro vyhledání řetězce v souborech. Podporuje také regulární výrazy.

3. Přejděte na konkrétní řádek

Jakmile otevřete zdrojový soubor a chcete přesunout na konkrétní řádek, stiskněte klávesu Ctrl + G a zadejte číslo řádku a stiskněte enter. Výber prvků DOM v konzole

Dev Tools také umožňuje vybrat prvky v konzole

$ () -

• Vrátí první výskyt odpovídajících voličů CSS $$ () -
• Vrátí pole prvků, které odpovídají danému voliči CSS Pro další příkazy konzoly se přesuňte k tomuto příspěvku

5. Využívejte vícenásobné péče

Někdy můžete nastavit více zábavy na různých místech a můžete to udělat snadno v nástrojích Chrome Dev podržením klávesy

Ctrl a kliknutím na místo, kam je chcete umístit. Pak začněte psát a uvidíte, že je umístěn na různých vybraných místech. 6. Zachovat protokol

Zachovat protokol vám pomůže přetrvávat protokol i při načítání stránky. Zkontrolujte volbu vedle položky

Zachovat protokol v protokolu Console a protokol se zachová. Toto zobrazuje protokol před tím, než je stránka vyložena a užitečná pro vyšetření chyb. 7. Použití vestavěného kódového zkreslení

Chrome Dev Tools má vestavěný kódový zkrášlovací program nazvaný

hezké vytisknutí "{}". Vývojový nástroj zobrazuje minimalizovaný kód a není tak snadné číst. Klikněte na tlačítko pro tisk, které je zobrazeno vlevo dole v otevřeném zdrojovém souboru a zobrazí zdrojový soubor ve formátu, který je čitelný pro lidi. 8. Je váš web mobilní? Podívejte se sem

Chrome Dev Tools nám také umožňuje zkontrolovat, zda je web vhodný pro mobilní zařízení nebo ne. Můžete zkontrolovat, jak vypadá váš web na různých zařízeních. Přečtěte si nástroje Chrome Dev a pod kartou

Emulation můžete nahrát různé zařízení. Vyberte požadované zařízení a vyzkoušejte, jak váš web vypadá v daném zařízení. Další informace naleznete v následujícím videu:

9. Emulate Sensors and Geographical Location

Dokonce můžete napodobit senzory jako dotyková obrazovka a akcelerometry. Můžete dokonce napodobit zeměpisnou polohu. Chcete-li to provést, přejděte na

Emulace -> Snímače. 10. Vyberte další výskyt aktuálního slova

Chcete-li slovo ve všech jeho výskytech vyměnit, vyberte slovo a stisknutím

Ctrl + D vyberte další výskyt vybraného slova. Toto slovo můžete upravit ve všech jeho výskytech v jednom snímku. 11. Alter Color Format

Použijte

Shift + Klikněte na v náhledu barev, abyste změnili změnu mezi formátováním rgba, hexadecimální a hsl. 12. Přidejte změny do místních souborů pomocí pracovního prostoru

Jsme schopni upravit zdrojové soubory a provést některé změny v CSS, Java Script av jiných souborech v nástrojích Chrome Dev. Chcete-li tyto změny přidat do místních souborů, není potřeba zkopírovat tyto změny z pracovního prostoru do souborů na disku. Nástroje Chrome Dev vám umožňují porovnávat soubory a aktualizovat místní soubory se změnami, které jste provedli v nástrojích dev. Chcete-li to provést, klikněte pravým tlačítkem na zdrojový soubor na levé straně na kartě

Zdroje a vyberte Přidat složku do pracovního prostoru. Další informace o pracovních prostorech naleznete na Chrome.com.