V tomto návode sa dozvieš o Microsoft Edge Developer Tools, ktoré sú vo viacerých ohľadoch podobné Google Chrome Developer Tools. Zistíš, ako otvoriť a efektívne využiť tieto nástroje, ako aj rozdiely medzi oboma nástrojmi pre vývoj prehliadačov.
Najdôležitejšie poznatky
Nástroje pre vývoj v Edge ponúkajú takmer identické užívateľské rozhranie ako nástroje pre vývoj v Chrome, pokiaľ ide o základné funkcie. Rozdiely spočívajú hlavne v užívateľskom rozhraní a niekoľkých ďalších funkciách, pričom jadro nástrojov a skratky zostali takmer rovnaké.
Krok za krokom sprievodca
Aby si otvoril nástroje pre vývoj v Edge, máš k dispozícii rôzne možnosti. Jednou možnosťou je stlačiť kláves F12. Na Macu môžeš použiť kombináciu kláves Command + Option + I. Používatelia systému Windows môžu alternatívne použiť kombináciu Control + Shift + I. Ak chceš otvoriť DevTools cez kontextové menu, klikni pravým tlačidlom myši na záhlavie webovej stránky a zvoľ "Skontrolovať".
Ak si už pracoval s nástrojmi pre vývoj v Chrome, rozhranie nástrojov pre vývoj v Edge ti bude okamžite povedomé. Karty sú tu, ikony vyzerajú trochu inak a ďalšie nástroje dosiahneš cez symbol "Plus" v hornom riadku. V Chrome boli tieto ďalšie nástroje dostupné cez hlavné menu.
Ak chceš pridať novú kartu do nástrojov pre vývoj v Edge, jednoducho klikni na symbol Plus. Môžeš napríklad pridať nástroj na animáciu. Tento nástroj sa potom zobrazí hore v záhlavnej lište kariet, podobne ako v Chrome Developer Tools.
Je tu tiež "Welcome" karta, podobne ako stránka "What's New" v Chrome. Môžeš si tu prezrieť prehľad funkcii nástrojov pre vývoj. Odporúčam ti prejsť túto kartu, aby si prípadne objavil užitočné tipy a triky, ktoré sme v kurze ešte nespomínali.
Ďalšou užitočnou funkciou nástrojov pre vývoj v Edge je možnosť presunúť lištu kariet doľava. Toto umožňuje vertikálne usporiadanie kariet. Ikony sa potom zobrazia ako tooltipy, čím sa šetrí miesto a poskytuje sa viac priestoru pre samotné nástroje.
Samotné nástroje na dizajn je možné upravovať pomocou rôznych nastavení podobných nastaveniam v Chrome. Môžeš prispôsobiť rozbaľovacie ponuky, dokumentáciu a aktivity. Tak si zachováš prostredie, na ktoré si zvyknutý.
Medzi málo rozdielmi patrí aj dodatočný symbol pre Azure DevOps v Edge Tools, ktorý v Chrome neexistuje. Toto je obzvlášť užitočné pre vývojárov pracujúcich v prostredí Azure.
Keď sa dostaneš na jednotlivé karty, zistíš, že štruktúra a funkcie v oboch nástrojoch sú takmer identické. Môžeš použiť štýly, vypočítané rozvrhy a všetko ostatné, čo si zvyknutý z Chrome, aj v Edge.
Avšak aktualizácie funkcií sa môžu mierne líšiť. Ak Chrome pridá novú funkciu, môže sa stať, že táto funkcia bude v Edge dostupná neskôr alebo naopak. Preto je dobré pravidelne kontrolovať, aké nové funkcie sú pridané v rôznych nástrojoch.
To je vlastne všetko, čo musíš vedieť o nástrojoch pre vývoj v Edge. Ak si už zvyknutý na nástroje pre vývoj v Chrome, rýchlo sa zorientuješ aj v nástrojoch pre vývoj v Edge.
Zhrnutie
V tomto návode si spoznal podobnosti a rozdiely medzi nástrojmi pre vývoj v Google Chrome a Microsoft Edge. Teraz vieš, ako otvoriť tieto nástroje a aké funkcie máš k dispozícii, aby si účinne pracoval na svojich webových projektoch.
Časté otázky
Ako otvorím nástroje pre vývojárov Microsoft Edge?Stlačte F12 alebo použite kombináciu Control + Shift + I na Windowse.
Sú veľké rozdiely medzi nástrojmi pre vývoj Edge a Chrome?Rozdiely sú malé, hlavne v používateľskom rozhraní a niektorých ďalších funkciách.
Môžem prispôsobiť panel s kartami v Edge?Áno, kliknutím na symbol Plus môžete pridať nové karty a panel s kartami presunúť doľava.
Sú skratky v Edge podobné ako v Chrome?Áno, väčšina skratiek je rovnaká.
Bude Microsoft Edge uvádzať aj budúce aktualizácie?Áno, ale niektoré funkcie sa môžu objaviť s miernym oneskorením oproti Chrome.
