Programování

Nástroje pro vývojáře v novém Microsoft Edge

Nový prohlížeč společnosti Microsoft založený na chromu má nedávno své druhé veřejné stabilní vydání, které představuje Edge 80 s plnou podporou ARM64 a vylepšenými nástroji, které vám pomohou vytvářet a pracovat s webovým obsahem. Stejně jako dřívější verze nyní starší verze Edge, i nový prohlížeč společnosti Microsoft zachovává známou klávesovou zkratku F12 pro spuštění svých vývojářských nástrojů, buď připojených k prohlížeči, nebo v samostatném podokně.

Stojí za to seznámit se s novými věcmi, protože i když existují starší verze Edge, nyní pracujete ve světě Chromia a s Chrome a dalšími prohlížeči založenými na Chromu je toho spojeno mnohem více. To není špatná věc. Přenášení dovedností mezi prohlížeči je snazší, a pokud používáte Chrome jako vývojový prohlížeč, bude snadné začít pracovat v novém Edge. Společnost Microsoft však provedla několik vlastních změn a pracuje na rozšíření zkušeností vývojářů Edge do kódu Visual Studio, abyste mohli vyvíjet a testovat aplikace JavaScriptu v jediném prostředí.

Zkušenosti vývojářů napříč platformami

S novým Edge dostupným pro Windows 7 a macOS a s vyvíjenou verzí Linuxu je přístup ke stejným vývojovým nástrojům na různých platformách. Získáte stejné inspektory, debuggery a konzoly, takže je snadné spouštět stejné testy kdekoli pracujete a na jakémkoli operačním systému, který používáte. Vývojář obeznámený s Edge ve Windows by měl být schopen přejít na Mac a testovat kód, aniž by musel čekat na pomoc vývojáře Mac.

Stejně jako starší Edge, i nové vývojové nástroje Edge založené na chromu vám pomohou prozkoumat HTML, CSS a JavaScript na vašem webu, s debuggerem JavaScript a konzolou pro zobrazení výstupu protokolování konzoly ze spuštěného JavaScriptu. Pomocí těchto nástrojů můžete rychle zapnout panel nástrojů prohlížeče, který přidává režimy zobrazení zařízení, což vám dává možnost testovat responzivní design, aniž byste museli opustit vývojové PC.

Pomocí vývojových nástrojů Edge

Vývojářské nástroje Edge se nacházejí v devíti různých podoknech, z nichž každá poskytuje různé informace o vaší webové aplikaci. Pravděpodobně použijete první: zobrazení Prvky.

Toto přejde dolů do vašeho HTML a CSS, což ukazuje, které prvky na stránce jsou generovány jakými částmi kódu. Ukazování na prvek v okně prohlížeče zvýrazňuje příslušný kód a pomáhá izolovat HTML nebo CSS, které chcete ladit. Jeden panel zobrazuje HTML; druhá ukazuje aktuální CSS s aktuálně použitými styly a používanými posluchači událostí. Můžete vidět, jaká pravidla CSS se aktuálně používají a která jsou ignorována.

Podokno Prvky je také k dispozici jako rozšíření Visual Studio Code, které přináší kontrolu rozložení vedle vašich úprav HTML. Je to užitečný způsob, jak rychle zjistit, jak změny v kódu ovlivňují rozložení stránky. Můžete dokonce připojit kód k instanci prohlížeče, což vám umožní přímý přístup ke všem otevřeným dokumentům HTML.

Příprava na PWA

Jedním z užitečnějších nástrojů je panel Výkon. Odtud můžete zaznamenávat aktivity svého prohlížeče. Po dokončení testovací sekvence můžete pomocí časové osy nástroje profilovat zdroje, které vaše aplikace používá. Nejlépe se používá ve spojení s nástroji Síť a Paměť, zvláště pokud používáte hodně JavaScriptu. Pochopení toho, jak si webová aplikace vede, je obzvláště důležité, pokud ji plánujete používat jako PWA (progresivní webová aplikace), a zde panel Aplikace přidává nástroje pro zkoumání klíčových komponent PWA, včetně místního úložiště a servisních pracovníků.

Díky Edge, který usnadňuje identifikaci a instalaci PWA, stojí za to prozkoumat tyto nástroje podrobněji, zejména podokno Aplikace. Díky vzhledu a chování na palubní desce je to rychlý způsob, jak získat podrobný pohled na to, co se děje ve vašich aplikacích a jak si budou hrát mimo prohlížeč. Pomocí aplikačního nástroje můžete prozkoumat, jak fungují integrované služby Edge, například obslužný program plateb.

Používání zásuvných modulů v Edge DevTools

Další funkcí přechodu na vývojové prostředí založené na Chromu je podpora modulů plug-in třetích stran. Některé jsou již k dispozici ve vlastním doplňkovém obchodu Edge (i když aktuálně pouze prostřednictvím soukromých přímých odkazů do obchodu). Pro širší výběr, pokud jste v Edge povolili podporu obchodu třetích stran, máte přístup ke všem rozšířením v Internetovém obchodě Chrome. Je jich spousta, včetně nástrojů, které přidávají cílenou podporu pro konkrétní rámce JavaScriptu nebo pomáhají s laděním. Mezi ně patří Facebook React, open source gRPC, nástroje pro práci s API GraphQL a podpora linterů, jako je webhint.

Specifikace doplňku Chromium pro vývojáře je veřejná a kdokoli si může vytvářet a publikovat své vlastní vývojářské nástroje, ať už interně, nebo pro celý svět. Jelikož pluginy Edge sdílejí společný formát s jinými prohlížeči Chromium, lze stejný plug-in dodat prostřednictvím jiných obchodů s prohlížeči, což zjednodušuje vývoj nástrojů.

Přidání rozšíření k nástrojům pro vývojáře je jako přidání rozšíření do prohlížeče. Přejděte do obchodu, klikněte na nástroj, který chcete přidat, a nechte jej stáhnout a nainstalovat. Nainstaluje se do prohlížeče a možná budete chtít skrýt ikonu rozšíření v nabídce prohlížeče před otevřením nástrojů pro vývojáře a zobrazit novou kartu. Spuštění webové nápovědy na webu ukazuje sadu klíčových metrik, které vám poskytnou tipy na důležité funkce, jako je přístupnost, nebo na podporu funkcí PWA.

Je dobré vidět, že přizpůsobení je konečně součástí nástrojů Edge. Všichni používáme různé řetězce nástrojů a poskytnout vám vše, co potřebujete k podpoře technologií, které používáte, je velmi přátelský k vývojářům. Když Microsoft oznámil přechod na Chromium pro svůj prohlížeč, naznačil, že jedním z jeho důvodů bylo poskytnout vývojářům funkce, které potřebují k vytváření požadovaných aplikací. To by mohlo znamenat pouze vylepšení podpory prohlížečů pro HTML5, CSS a JavaScript, takže uvedení celé řady vývojářských nástrojů Chromium do Edge ve všech podporovaných operačních systémech je vítaným krokem.

Změny Microsoftu ve vývoji Chromium pro vývojáře

Je důležité si uvědomit, že Microsoft je ve vývoji Chromia stále relativně mladým partnerem společnosti Google. Přesto se mu od vstupu do projektu podařilo poskytnout značné množství příspěvků, včetně přidání podpory funkcí usnadnění přístupu, aby vývojářské nástroje byly k dispozici co nejširší komunitě. S přibližně 170 změnami, které přidávají podporu pro nástroje, jako jsou čtečky obrazovky, je tu spousta rád, protože přístupné vývojářské nástroje povedou k vývoji přístupných webových aplikací a služeb.

Za experimentálními příznaky v nastavení Edge se aktuálně skrývají další nové funkce, včetně podpory dalších jazyků. Pokud povolíte tuto funkci a používáte jeden z 10 podporovaných jazyků, bude lokalizace vývojářských nástrojů odpovídat vaší lokalizaci prohlížeče.