Microsoftov novi brskalnik, ki temelji na Chromiumu, je pred kratkim izdal drugo javno stabilno izdajo, ki je predstavila Edge 80 s popolno podporo za ARM64 in izboljšana orodja za pomoč pri izdelavi in delu s spletno vsebino. Tako kot prejšnje različice zdaj starega Edgea tudi novi Microsoftov brskalnik ohranja znano bližnjico F12 za zagon svojih orodij za razvijalce, bodisi pritrjenih na brskalnik bodisi v ločenem podoknu.
Vredno se je seznaniti z novimi stvarmi, saj čeprav obstajajo podobnosti z zapuščino Edge, zdaj delate v svetu Chromium in s Chromom in drugimi brskalniki, ki temeljijo na Chromiumu, je veliko več skupnega. To ni slabo. Prenašanje spretnosti med brskalniki je lažje in če Chrome uporabljate kot razvojni brskalnik, bo delo v novem Edgeu enostavno. Vendar je Microsoft naredil nekaj lastnih sprememb in si prizadeva razširiti izkušnjo razvijalca Edge v kodo Visual Studio, tako da lahko razvijate in preizkušate aplikacije JavaScript v enem okolju.
Izkušnja razvijalcev za več platform
Z novim Edgeom, ki je na voljo v operacijskih sistemih Windows 7 in macOS, in z različico Linuxa, ki je v razvoju, je dostop do istih razvojnih orodij na različnih platformah. Na voljo so vam enaki inšpektorji, razhroščevalniki in konzole, zato je mogoče iste preizkuse izvajati kjer koli delate in v katerem koli OS, ki ga uporabljate. Razvijalec, ki pozna Edge v operacijskem sistemu Windows, bi moral imeti možnost, da za preskus kode preklopi na Mac, ne da bi mu bilo treba čakati, da mu pomaga Mac.
Tako kot zapuščeni Edge, tudi nova orodja za razvoj Edge, ki temeljijo na Chromiumu, pomagajo preučiti HTML, CSS in JavaScript na vašem spletnem mestu z razhroščevalnikom JavaScript in konzolo za ogled izpisov dnevnika konzole pri zagonu JavaScript. Z orodji lahko hitro vklopite orodno vrstico brskalnika, ki doda načine pogleda naprave, tako da lahko preizkusite odziven dizajn, ne da bi zapustili razvojni računalnik.
Uporaba orodij za razvijalce Edge
Orodja za razvijalce Edge najdete v devetih različnih podoknih, od katerih ima vsak vpogled v vašo spletno aplikacijo. Najverjetneje boste uporabili prvega: pogled Elementi.
To se podrobno razčleni v HTML in CSS ter prikaže, katere elemente na strani generirajo kateri odseki kode. S kazanjem na element v oknu brskalnika se poudari ustrezna koda in pomaga izolirati HTML ali CSS, ki ga želite odpraviti. V enem podoknu je prikazan HTML; drugi prikazuje trenutni CSS s trenutno uporabljenimi slogi in poslušalci dogodkov, ki se uporabljajo. Vidite lahko, katera pravila CSS se trenutno uporabljajo in katera se prezrejo.
Podokno Elementi je na voljo tudi kot razširitev Visual Studio Code, ki poleg urejanja HTML vključuje pregled postavitve. To je koristen način za hiter pregled, kako spremembe kode vplivajo na postavitve strani. Primerku lahko celo priložite kodo brskalnika in tako omogočite neposreden dostop do vseh odprtih dokumentov HTML.
Priprava na PWA
Eno bolj uporabnih orodij je plošča Performance (Zmogljivost). Od tu lahko beležite dejavnosti brskalnika. Ko je testno zaporedje končano, lahko s časovno osjo orodja profilirate vire, ki jih uporablja vaša aplikacija. Najbolje ga je uporabiti v povezavi z orodji za omrežje in pomnilnik, še posebej, če uporabljate veliko JavaScript. Razumevanje, kako deluje spletna aplikacija, je še posebej pomembno, če jo nameravate uporabljati kot PWA (progresivno spletno aplikacijo), tukaj pa podokno z aplikacijami dodaja orodja za pregled ključnih komponent PWA, vključno z lokalnimi skladiščniki in servisnimi delavci.
Ker Edge olajša prepoznavanje in namestitev PWA-jev, je vredno podrobneje raziskati ta orodja, zlasti podokno z aplikacijami. Z videzom in občutkom, podobnim armaturni plošči, je hiter način, da poglobljeno pogledate, kaj se dogaja v vaših aplikacijah in kako bodo delovale zunaj brskalnika. Z orodjem za aplikacije lahko raziščete, kako delujejo vgrajene storitve Edge, na primer obdelovalec plačil.
Uporaba vtičnikov v programu Edge DevTools
Druga značilnost prehoda na Chromiumovo izkušnjo za razvijalce je podpora za vtičnike drugih proizvajalcev. Nekateri so že na voljo v Edgeovi lastni trgovini z dodatki (čeprav trenutno le prek zasebnih globokih povezav do trgovine). Če ste v Edge omogočili podporo neodvisnih trgovin, imate za širši izbor dostop do vseh razširitev v spletni trgovini Chrome. Tu jih je veliko, vključno z orodji, ki dodajo osredotočeno podporo za določene okvire JavaScript ali pomoč pri odpravljanju napak. Sem spadajo Facebook React, odprtokodni gRPC, orodja za pomoč pri delovanju z API-ji GraphQL in podpora za povezovalnike, kot je webhint.
Specifikacija vtičnika za Chromium za razvijalce je javna in vsak lahko ustvari in objavi lastna orodja za razvijalce, bodisi interno bodisi za uporabo po vsem svetu. Ker imajo vtičniki Edge skupno obliko z drugimi brskalniki Chromium, je isti vtičnik mogoče dostaviti prek drugih trgovin brskalnikov, kar poenostavi razvoj orodij.
Dodajanje razširitve v orodja za razvijalce je kot dodajanje razširitve v brskalnik. Pomaknite se do trgovine, kliknite orodje, ki ga želite dodati, in pustite, da se prenese in namesti. Namestila se bo v brskalnik in morda boste želeli skriti ikono razširitve v meniju brskalnika, preden odprete orodja za razvijalce in si ogledate nov zavihek. Zagon spletnega namiga na spletnem mestu prikazuje nabor ključnih meritev, ki vam daje namige za pomembne funkcije, kot je dostopnost, ali za podporo funkcij PWA.
Dobro je videti, da je prilagajanje končno del orodij Edge. Vsi uporabljamo različne verige orodij in razvijalcem prijazen pristop k temu, kar potrebujete za podporo tehnologijam, ki jih uporabljate. Ko je Microsoft napovedal prehod na Chromium za svoj brskalnik, je navedel, da je eden od razlogov, da razvijalcem omogoči funkcije, ki jih potrebujejo za izdelavo želenih aplikacij. To bi lahko pomenilo samo izboljšanje podpore brskalnika za HTML5, CSS in JavaScript, zato je približevanje celotne palete orodij za razvijalce Chromium v Edge v vseh podprtih operacijskih sistemih dobrodošla poteza.
Microsoftove spremembe izkušenj za razvijalce Chromium
Pomembno je vedeti, da je Microsoft še vedno relativno mlajši Googlov partner pri razvoju Chromiuma. Kljub temu je od pridružitve projektu uspel prispevati precejšnje število prispevkov, vključno z dodajanjem podpore za funkcije dostopnosti, da je orodje za razvijalce na voljo najširši skupnosti. Z okoli 170 spremembami, ki dodajajo podporo za orodja, kot so bralniki zaslona, je tukaj marsikaj všeč, saj bodo dostopna orodja za razvijalce vodila do razvoja dostopnih spletnih aplikacij in storitev.
Druge nove funkcije so trenutno skrite za poskusnimi zastavicami v nastavitvah Edge, vključno s podporo za dodatne jezike. Če omogočite to funkcijo in uporabljate enega od 10 podprtih jezikov, se lokalizacija orodij za razvijalce ujema z lokalizacijo vašega brskalnika.
