Programavimas

Kūrėjo įrankiai naujajame „Microsoft Edge“

Neseniai „Microsoft“ naujojoje „Chromium“ pagrįstoje naršyklėje buvo antrasis viešas stabilus leidimas, pristatantis „Edge 80“ su visišku ARM64 palaikymu, taip pat patobulintais įrankiais, kurie padės kurti ir dirbti su žiniatinklio turiniu. Kaip ir ankstesnės dabar pasenusios „Edge“ versijos, naujoji „Microsoft“ naršyklė išlaiko pažįstamą F12 spartųjį klavišą, kad paleistų savo kūrėjo įrankius, arba prie naršyklės, arba atskiroje srityje.

Verta susipažinti su naujais dalykais, nes, nors ir yra panašumų su „Old Edge“, dabar dirbate „Chromium“ pasaulyje, o „Chrome“ ir kitose „Chromium“ pagrįstose naršyklėse yra daug daugiau bendro. Tai nėra blogai. Lengviau perkelti įgūdžius tarp naršyklių, o jei „Chrome“ naudojate kaip kūrimo naršyklę, bus lengva pradėti dirbti naujojoje „Edge“. Tačiau „Microsoft“ atliko keletą savo pakeitimų ir stengiasi išplėsti „Edge“ kūrėjų patirtį į „Visual Studio“ kodą, kad galėtumėte kurti ir išbandyti „JavaScript“ programas vienoje aplinkoje.

Kelių platformų kūrėjų patirtis

Su naujuoju „Edge“, prieinamu „Windows 7“ ir „MacOS“, bei kuriant „Linux“ versiją, yra prieiga prie tų pačių kūrimo įrankių skirtingose ​​platformose. Gaunate tuos pačius inspektorius, derintuvus ir konsoles, todėl lengva atlikti tuos pačius testus, kad ir kur dirbtumėte, ir naudodami bet kokią OS. Kūrėjas, susipažinęs su „Edge“ sistemoje „Windows“, turėtų galėti pereiti prie „Mac“, kad išbandytų kodą, nelaukdamas, kol „Mac“ kūrėjas padės.

Kaip ir senasis „Edge“, naujieji „Chromium“ pagrindu sukurti „Edge“ kūrimo įrankiai padeda jums ištirti HTML, CSS ir „JavaScript“ savo svetainėje su „JavaScript“ derintuvu ir konsole, skirta peržiūrėti konsolės registravimo išvestį iš „JavaScript“. Naudodami įrankius galite greitai įjungti naršyklės įrankių juostą, kuri prideda įrenginio peržiūros režimus, suteikdama galimybę išbandyti reaguojantį dizainą nepaliekant kūrimo kompiuterio.

„Edge“ kūrėjo įrankių naudojimas

„Edge“ kūrėjo įrankiai yra devyniose skirtingose ​​srityse, kiekviena iš jų suteikia jums skirtingų įžvalgų apie jūsų žiniatinklio programą. Greičiausiai naudosite pirmąjį: rodinį „Elementai“.

Tai gilinasi į jūsų HTML ir CSS, parodydami, kuriuos puslapio elementus sugeneruoja kokios kodo skiltys. Nurodžius elementą naršyklės lange, paryškinamas atitinkamas kodas, kuris padeda izoliuoti HTML ar CSS, kurį norite derinti. Vienoje srityje rodomas HTML; kitas rodo dabartinį CSS su šiuo metu naudojamais stiliais ir naudojamais renginių klausytojais. Galite pamatyti, kokios CSS taisyklės šiuo metu naudojamos ir kurios ignoruojamos.

Elementų sritis taip pat galima kaip „Visual Studio Code“ plėtinį, kartu su HTML redagavimu pateikiant išdėstymo patikrinimą. Tai naudingas būdas greitai sužinoti, kaip kodo pakeitimai veikia jūsų puslapio išdėstymą. Jūs netgi galite pridėti kodą prie naršyklės egzemplioriaus, suteikdami tiesioginę prieigą prie visų atidarytų HTML dokumentų.

Pasiruošimas PWA

Vienas iš naudingesnių įrankių yra „Performance“ skydelis. Čia galite įrašyti savo naršyklės veiklą. Kai bandymo seka bus baigta, įrankio laiko juostoje galėsite peržiūrėti programos naudojamus išteklius. Tai geriausia naudoti kartu su tinklo ir atminties įrankiais, ypač jei naudojate daug „JavaScript“. Suprasti, kaip veikia žiniatinklio programa, ypač svarbu, jei planuojate ją naudoti kaip PWA (progresyvioji žiniatinklio programa), o čia „Application“ skydelis prideda įrankius, skirtus pagrindiniams PWA komponentams, įskaitant vietos saugyklos ir paslaugų darbuotojus, nagrinėti.

„Edge“ palengvinant PWA identifikavimą ir diegimą, verta išsamiau išnagrinėti šiuos įrankius, ypač „Application“ sritį. Su prietaisų skydelio išvaizda ir jausmu tai greitas būdas nuodugniai pažvelgti į tai, kas vyksta jūsų programose ir kaip jie veiks ne naršyklėje. Norėdami sužinoti, kaip veikia „Edge“ įmontuotos paslaugos, pvz., Mokėjimo tvarkytuvas, galite naudoti „Application“ įrankį.

Papildinių naudojimas „Edge DevTools“

Dar viena perėjimo prie „Chromium“ pagrindu sukurtų kūrėjų funkcijų ypatybė yra trečiųjų šalių papildinių palaikymas. Kai kuriuos jau galima įsigyti „Edge“ priedų parduotuvėje (nors šiuo metu tik per privačias gilias nuorodas į parduotuvę). Jei norite pasirinkti platesnį pasirinkimą, jei „Edge“ įgalinote trečiųjų šalių parduotuvių palaikymą, turite prieigą prie visų „Chrome“ internetinės parduotuvės plėtinių. Čia yra daug, įskaitant įrankius, kurie prideda tikslinį palaikymą konkrečioms „JavaScript“ sistemoms arba padeda derinti. Tai apima „Facebook“ „React“, atvirojo kodo „gRPC“, įrankius, padedančius dirbti su „GraphQL“ API, ir palaikymą šiukšlėms, tokioms kaip „webhint“.

„Chromium“ kūrėjo papildinių specifikacija yra vieša, ir kiekvienas gali kurti ir paskelbti savo kūrėjo įrankius, naudojamus viduje arba visame pasaulyje. Kadangi „Edge“ papildiniai turi bendrą formatą su kitomis „Chromium“ naršyklėmis, tą patį papildinį galima pateikti per kitas naršyklių parduotuves, supaprastinant įrankių kūrimą.

Plėtinio pridėjimas prie kūrėjo įrankių yra tarsi pridedamas prie naršyklės. Eikite į parduotuvę, spustelėkite įrankį, kurį norite pridėti, ir leiskite jam atsisiųsti ir įdiegti. Jis bus įdiegtas naršyklėje ir galbūt norėsite paslėpti plėtinio piktogramą naršyklės meniu prieš atidarydami kūrėjo įrankius, kad pamatytumėte naują skirtuką. „Webhint“ paleidimas svetainėje rodo pagrindinių metrikų rinkinį, kuriame pateikiamos užuominos apie svarbias funkcijas, pvz., Pritaikymą neįgaliesiems, arba PWA funkcijų palaikymą.

Gera matyti, kad pritaikymas pagaliau yra „Edge“ įrankių dalis. Mes visi naudojame skirtingas įrankių grandines, o tai, ko jums reikia, kad palaikytumėte jūsų naudojamas technologijas, yra labai palankus kūrėjams. Kai „Microsoft“ paskelbė apie savo naršyklės perėjimą prie „Chromium“, ji nurodė, kad viena iš priežasčių buvo suteikti kūrėjams funkcijas, kurių jiems reikia norint sukurti norimas programas. Tai galėjo reikšti tik HTML5, CSS ir „JavaScript“ naršyklės palaikymo gerinimą, todėl visų „Chromium“ kūrėjų įrankių pasirinkimas „Edge“ visose palaikomose OS yra sveikintinas žingsnis.

„Microsoft“ pakeitimai, susiję su „Chromium“ kūrėjų patirtimi

Svarbu prisiminti, kad „Microsoft“ vis dar yra palyginti mažesnė „Google“ partnerė kuriant „Chromium“. Nepaisant to, prisijungus prie projekto, jis sugebėjo nemažai prisidėti, įskaitant prieinamumo funkcijų palaikymą, kad kūrėjų įrankiai būtų prieinami kuo platesnei bendruomenei. Apytiksliai 170 pakeitimų pridėjus tokių įrankių kaip ekrano skaitytuvai palaikymą, čia daug kas patinka, nes prieinami kūrėjo įrankiai padės sukurti prieinamas žiniatinklio programas ir paslaugas.

Kitos naujos funkcijos šiuo metu yra paslėptos už eksperimentinių žymių „Edge“ nustatymuose, įskaitant papildomų kalbų palaikymą. Jei įgalinsite šią funkciją ir naudojate vieną iš 10 palaikomų kalbų, kūrėjo įrankių lokalizacija atitiks jūsų naršyklės lokalizaciją.

$config[zx-auto] not found$config[zx-overlay] not found