Nový prehliadač spoločnosti Microsoft založený na chróme nedávno priniesol svoje druhé verejné stabilné vydanie a predstavil Edge 80 s plnou podporou ARM64 a vylepšenými nástrojmi, ktoré vám pomôžu pri vytváraní a práci s webovým obsahom. Rovnako ako predchádzajúce verzie staršej verzie Edge, aj nový prehliadač spoločnosti Microsoft používa známu skratku F12 na spustenie svojich vývojárskych nástrojov, ktoré sú pripojené k prehliadaču alebo sú umiestnené na samostatnom paneli.
Stojí za to sa s novými vecami oboznámiť, pretože aj keď existujú podobné črty so starým Edge, teraz pracujete vo svete Chromium a s Chrome a inými prehliadačmi založenými na Chromium je toho veľa spoločného. To nie je zlá vec. Je jednoduchšie prenášať zručnosti medzi prehľadávačmi a ak ste Chrome používali ako vývojový prehliadač, bude ľahké začať pracovať v novom Edge. Spoločnosť Microsoft však urobila niekoľko vlastných zmien a pracuje na rozšírení skúseností vývojárov Edge do kódu Visual Studio, aby ste mohli vyvíjať a testovať aplikácie JavaScript v jednom prostredí.
Platformová vývojárska skúsenosť
Vďaka novému Edge dostupnému pre Windows 7 a macOS a vyvíjanej verzii pre Linux existuje prístup k rovnakým vývojovým nástrojom na rôznych platformách. Získate rovnakých inšpektorov, debuggerov a konzoly, takže je ľahké spustiť rovnaké testy kdekoľvek pracujete a na akomkoľvek operačnom systéme, ktorý používate. Vývojár, ktorý je oboznámený s Edge v systéme Windows, by mal byť schopný prejsť na Mac na testovanie kódu bez toho, aby musel čakať na pomoc vývojára Macu.
Rovnako ako starší Edge, aj nové vývojové nástroje Edge založené na chróme vám pomôžu preskúmať HTML, CSS a JavaScript na vašom webe pomocou ladiaceho programu JavaScript a konzoly na prezeranie výstupu protokolovania konzoly zo spusteného JavaScriptu. Pomocou týchto nástrojov môžete rýchlo zapnúť panel s nástrojmi prehľadávača, ktorý pridáva režimy zobrazenia zariadenia a dáva vám možnosť testovať responzívny dizajn bez toho, aby ste opustili vývojový počítač.
Pomocou vývojových nástrojov Edge
Vývojárske nástroje Edge sa nachádzajú v deviatich rôznych paneloch, z ktorých každá poskytuje iný prehľad o vašej webovej aplikácii. S najväčšou pravdepodobnosťou použijete prvé: zobrazenie Prvky.
Toto slúži na hĺbkovú analýzu súborov HTML a CSS a ukazuje, ktoré prvky na stránke sa generujú v ktorých sekciách kódu. Ukazovanie na prvok v okne prehliadača zvýrazní príslušný kód, čo pomôže izolovať HTML alebo CSS, ktoré chcete ladiť. Jedna tabla zobrazuje HTML; druhý zobrazuje aktuálny CSS s aktuálne použitými štýlmi a používanými poslucháčmi udalostí. Môžete vidieť, aké pravidlá CSS sa momentálne používajú a ktoré sú ignorované.
Podokno Prvky je k dispozícii aj ako rozšírenie o Visual Studio Code, ktoré spolu s úpravami HTML prináša kontrolu rozloženia. Je to užitočný spôsob, ako rýchlo zistiť, ako zmeny v kóde ovplyvňujú rozloženie stránok. Môžete dokonca pripojiť kód k inštancii prehľadávača, čo vám umožní priamy prístup k otvoreným dokumentom HTML.
Príprava na PWA
Jedným z užitočnejších nástrojov je panel Performance. Odtiaľto môžete zaznamenávať aktivity prehliadača. Po dokončení testovacej sekvencie môžete na časovej osi nástroja vyprofilovať zdroje, ktoré vaša aplikácia používa. Najlepšie sa používa v spojení s nástrojmi Sieť a Pamäť, najmä ak používate veľa JavaScriptu. Pochopenie výkonnosti webovej aplikácie je obzvlášť dôležité, ak ju plánujete používať ako PWA (progresívna webová aplikácia). Panel Aplikácie tu pridáva nástroje na preskúmanie kľúčových komponentov PWA, vrátane miestnych pracovníkov v oblasti ukladania a služieb.
Vďaka Edge, ktorý uľahčuje identifikáciu a inštaláciu PWA, stojí za to preskúmať tieto nástroje podrobnejšie, najmä panel aplikácií. Vďaka vzhľadu a štýlu podobnému palubnej doske je to rýchly spôsob, ako získať podrobný prehľad o tom, čo sa deje vo vašich aplikáciách a ako si budú počínať mimo prehliadača. Môžete použiť aplikačný nástroj na preskúmanie toho, ako fungujú vstavané služby Edge, ako je napríklad spracovateľ platieb.
Používanie doplnkov v Edge DevTools
Ďalšou vlastnosťou prechodu na vývojársku technológiu založenú na technológii Chromium je podpora doplnkov tretích strán. Niektoré sú už k dispozícii vo vlastnom obchode doplnkov Edge (aj keď momentálne iba prostredníctvom súkromných priamych odkazov do obchodu). Ak chcete získať širší výber, ak ste v Edge povolili podporu obchodov tretích strán, máte prístup ku všetkým rozšíreniam v Internetovom obchode Chrome. Je ich veľa, vrátane nástrojov, ktoré pridávajú zameranú podporu pre konkrétne rámce JavaScriptu alebo pomáhajú s ladením. Medzi ne patrí Facebook React, open source gRPC, nástroje na pomoc pri práci s GraphQL API a podpora pre linters, ako je webhint.
Špecifikácia doplnku Chromium pre vývojárov je verejná a ktokoľvek si môže vytvoriť a publikovať svoje vlastné vývojárske nástroje, interne alebo pre celý svet. Pretože doplnky Edge zdieľajú spoločný formát s ostatnými prehliadačmi Chromium, rovnaký doplnok je možné dodať prostredníctvom ďalších obchodov s prehliadačmi, čo zjednodušuje vývoj nástrojov.
Pridanie rozšírenia do nástrojov pre vývojárov je ako pridanie rozšírenia do prehliadača. Prejdite do obchodu, kliknite na nástroj, ktorý chcete pridať, a nechajte ho stiahnuť a nainštalovať. Nainštaluje sa do prehliadača a možno budete chcieť skryť ikonu rozšírenia v ponuke prehliadača pred otvorením nástrojov pre vývojárov, aby sa zobrazila nová karta. Spustenie webhintu na webe zobrazuje množinu kľúčových metrík, ktoré vám poskytujú tipy na dôležité funkcie, ako je prístupnosť alebo podpora funkcií PWA.
Je dobré vidieť, že prispôsobenie je konečne súčasťou nástrojov Edge. Všetci používame rôzne reťazce nástrojov a to, čo potrebujete na podporu technológií, ktoré používate, je veľmi vhodný pre vývojárov. Keď spoločnosť Microsoft ohlásila prechod na prehliadač Chromium, uviedla, že jedným z dôvodov bolo poskytnúť vývojárom funkcie, ktoré potrebujú na zostavenie požadovaných aplikácií. To by mohlo znamenať iba zlepšenie podpory prehliadača HTML5, CSS a JavaScript, takže priniesť celú škálu vývojárskych nástrojov Chromium do Edge vo všetkých podporovaných OS je vítaným krokom.
Zmeny Microsoftu v prostredí vývojárov Chromium
Je dôležité mať na pamäti, že Microsoft je pri vývoji Chromium stále relatívne mladým partnerom spoločnosti Google. Aj napriek tomu však od svojho zapojenia do projektu dokázalo prispieť značným počtom príspevkov, vrátane pridania podpory funkcií prístupnosti, aby boli vývojárske nástroje dostupné čo najširšej komunite. Vďaka asi 170 zmenám, ktoré pridávajú podporu pre nástroje, ako sú čítačky obrazovky, je tu veľa rád, pretože prístupné vývojárske nástroje povedú k vývoju prístupných webových aplikácií a služieb.
Za experimentálnymi príznakmi v nastaveniach Edge sa v súčasnosti skrývajú ďalšie nové funkcie, vrátane podpory ďalších jazykov. Ak povolíte túto funkciu a používate jeden z 10 podporovaných jazykov, bude sa lokalizácia vývojových nástrojov zhodovať s lokalizáciou vášho prehliadača.
