V tomto návodu se naučíte používat Microsoft Edge Developer Tools, které jsou v mnoha ohledech podobné Google Chrome Developer Tools. Objevíte, jak otevřít a efektivně využít tyto nástroje, stejně jako rozdíly mezi oběma nástroji pro vývoj prohlížeče.
Nejdůležitější poznatky
Nástroje Edge-Dev nabízejí téměř identické uživatelské rozhraní jako Chrome-Dev-Tools, pokud jde o základní funkce. Hlavní rozdíly spočívají v uživatelském rozhraní a několika dalších funkcích, zatímco základní nástroje a zkratky zůstávají z velké části stejné.
Krok za krokem
Chcete-li otevřít Edge-DevTools, máte k dispozici různé možnosti. Jedním z nich je stisknutí klávesy F12. Pokud pracujete na počítači Mac, můžete použít klávesovou zkratku Command + Option + I. Uživatelé Windows mohou alternativně použít kombinaci Control + Shift + I. Chcete-li otevřít nástroje pro vývoj webové stránky prostřednictvím kontextového menu, klikněte pravým tlačítkem myši na záhlaví webové stránky a vyberte "Prozkoumat".
Rozhraní Edge-DevTools ti bude okamžitě povědomé, pokud jsi již pracoval s Chrome-Dev-Tools. Zde jsou záložky, ikony vypadají trochu jinak a další nástroje jsou dostupné kliknutím na symbol „Plus“ v horní liště. V Chrome byly tyto další nástroje přístupné přes hlavní menu.
Chcete-li přidat novou záložku do Edge-DevTools, stačí kliknout na symbol Plus. Tak můžete např. přidat nástroj pro animace. Tento nástroj se pak zobrazí v horní liště záložky, podobně jako v nástrojích pro vývoj v Chromu.
Je zde také "Welcome"-záložka, podobně jako stránka "What's New" v Chromu. Zde si můžete prohlédnout přehled funkcí nástrojů pro vývoj. Doporučuji, abyste si tuto záložku prošli, abyste objevili případně užitečné tipy a triky, které jsme v kurzu dosud neprobírali.
Další užitečnou funkcí Edge-DevTools je možnost posunout lištu záložek doleva. To umožňuje vertikální uspořádání záložek. Ikony se pak zobrazí jako tooltipy, což šetří místo a poskytuje více prostoru pro samotné nástroje.
Samotné designové nástroje lze upravit prostřednictvím různých nastavení podobných nastavením v Chromu. Můžete upravit rozbalovací nabídky, dokumentaci a aktivity lištu. Tak si zachováte obvyklé pracovní prostředí.
Jedním z mála rozdílů je dodatečný symbol pro Azure DevOps v nástrojích Edge, který v Chromu není k dispozici. To je zejména užitečné pro vývojáře pracující v prostředí Azure.
Jakmile jste v jednotlivých záložkách, zjistíte, že struktura a funkce v obou nástrojích jsou téměř identické. Můžete také v Edge používat styly, vypočtená rozložení a všechno další, na co jste zvyklí v Chromu.
Aktualizace funkcí se však mohou mírně lišit. Pokud Chrome přidá novou funkci, může být tato funkce v Edge dostupná později nebo naopak. Proto je vhodné pravidelně kontrolovat, jaké nové funkce se přidávají do různých nástrojů.
To je vlastně vše, co musíte vědět o Edge-DevTools. Pokud již pracujete s Chrome Developer Tools, rychle se zorientujete také v nástrojích pro vývoj v Edge.
Shrnutí
V tomto tutoriálu jste se dozvěděli o podobnostech a rozdílech mezi Google Chrome a Microsoft Edge Developer Tools. Nyní víte, jak otevřít nástroje a jaké funkce jsou vám k dispozici pro efektivní práci na vašich webových projektech.
Často kladené dotazy
Jak otevřu nástroje pro vývojáře Microsoft Edge?Stiskněte F12 nebo použijte kombinaci Control + Shift + I na Windows.
Jsou velké rozdíly mezi nástroji pro vývojáře Edge a Chrome?Rozdíly jsou malé, hlavně v uživatelském rozhraní a některých dalších funkcích.
Mohu přizpůsobit lištu kartiček v Edge?Ano, kliknutím na symbol Plus můžete přidávat nové karty a posunout lištu kartiček doleva.
Jsou zkratky v Edge podobné jako v Chrome?Ano, většina zkratkových kláves jsou identické.
Představuje Microsoft Edge i budoucí aktualizace?Ano, funkce se však mohou zobrazit mírně odloženě oproti těm v Chrome.
