Programmēšana

Izstrādātāja rīki jaunajā Microsoft Edge

Microsoft jaunajam pārlūkam, kura pamatā ir Chromium, nesen bija otrais publiskais stabilais laidiens, kurā tika parādīts Edge 80 ar pilnu ARM64 atbalstu, kā arī uzlaboti rīki, kas palīdz veidot un strādāt ar tīmekļa saturu. Tāpat kā iepriekšējās tagad mantotās Edge iepriekšējās versijas, arī Microsoft jaunais pārlūks saglabā pazīstamo F12 saīsni, lai palaistu savus izstrādātāja rīkus, kas pievienoti pārlūkam vai atsevišķā rūtī.

Ir vērts iepazīties ar jaunajām lietām, jo, lai gan ir līdzības ar mantoto Edge, jūs tagad strādājat Chromium pasaulē, un ir daudz vairāk kopīga ar Chrome un citām pārlūkprogrammām, kuru pamatā ir Chromium. Tas nav nekas slikts. Ir vieglāk nodot prasmes starp pārlūkprogrammām, un, ja jūs izmantojat pārlūku Chrome kā attīstības pārlūku, būs viegli sākt strādāt jaunajā Edge. Tomēr korporācija Microsoft ir veikusi dažas izmaiņas un strādā, lai paplašinātu Edge izstrādātāju pieredzi Visual Studio kodā, lai jūs varētu izstrādāt un pārbaudīt JavaScript lietojumprogrammas vienā vidē.

Starpplatformu izstrādātāju pieredze

Tā kā jaunā Edge ir pieejama operētājsistēmā Windows 7 un macOS, kā arī izstrādājot Linux versiju, dažādās platformās ir pieejami vieni un tie paši izstrādes rīki. Jūs saņemat tos pašus inspektorus, atkļūdotājus un konsoles, tāpēc ir viegli izpildīt vienus un tos pašus testus neatkarīgi no tā, kur strādājat, un uz jebkuras operētājsistēmas, kuru izmantojat. Izstrādātājam, kurš pārzina Edge operētājsistēmā Windows, vajadzētu būt iespējai pārslēgties uz Mac, lai pārbaudītu kodu, negaidot, kamēr Mac izstrādātājs palīdzēs.

Tāpat kā mantotais Edge, arī jaunie, uz Chromium balstītie Edge izstrādes rīki palīdz jums pārbaudīt HTML, CSS un JavaScript jūsu vietnē, izmantojot JavaScript atkļūdotāju un konsoli, lai skatītu konsoles reģistrēšanas izvadi, izmantojot JavaScript. Varat izmantot rīkus, lai ātri ieslēgtu pārlūkprogrammas rīkjoslu, kas papildina ierīces skata režīmus, dodot iespēju pārbaudīt adaptīvo dizainu, neatstājot izstrādes datoru.

Izmantojot Edge izstrādātāja rīkus

Edge izstrādātāja rīki ir atrodami deviņās dažādās rūtīs, no kurām katra sniedz atšķirīgu ieskatu jūsu tīmekļa lietojumprogrammā. Visticamāk, ka izmantosit pirmo: skatu Elementi.

Tas padziļināti iekļauj jūsu HTML un CSS, parādot, kurus lapas elementus ģenerē kādas koda sadaļas. Norādot uz elementu pārlūkprogrammas logā, tiek izcelts attiecīgais kods, palīdzot izolēt HTML vai CSS, kuru vēlaties atkļūdot. Vienā rūtī tiek parādīts HTML; otrs parāda pašreizējo CSS ar pašreiz lietotajiem stiliem un izmantoto notikumu klausītājiem. Jūs varat redzēt, kādi CSS noteikumi pašlaik tiek izmantoti un kuri tiek ignorēti.

Rūts Elementi ir pieejams arī kā Visual Studio koda paplašinājums, nodrošinot izkārtojuma pārbaudi līdzās HTML rediģēšanai. Tas ir noderīgs veids, kā ātri uzzināt, kā izmaiņas jūsu kodā ietekmē jūsu lapu izkārtojumu. Jūs pat varat pievienot kodu pārlūkprogrammas instancei, dodot jums tiešu piekļuvi visiem atvērtajiem HTML dokumentiem.

Gatavošanās PWA

Viens no noderīgākajiem rīkiem ir panelis Performance. Šeit varat ierakstīt pārlūkprogrammas darbības. Kad testa secība ir pabeigta, varat izmantot rīka laika skalu, lai profilētu lietotnes izmantotos resursus. Vislabāk to izmantot kopā ar tīkla un atmiņas rīkiem, īpaši, ja izmantojat daudz JavaScript. Izpratne par tīmekļa lietotnes veiktspēju ir īpaši svarīga, ja plānojat to izmantot kā PWA (progresīvā tīmekļa lietojumprogramma), un šeit lietojumprogrammu panelis pievieno rīkus PWA galveno komponentu, tostarp vietējo krātuves un pakalpojumu darbinieku, pārbaudei.

Tā kā Edge atvieglo PWA identificēšanu un instalēšanu, ir vērts detalizētāk izpētīt šos rīkus, īpaši lietojumprogrammu rūti. Ar vadības panelim līdzīgu izskatu un izjūtu tas ir ātrs veids, kā padziļināti apskatīt, kas notiek jūsu lietojumprogrammās un kā tās darbosies ārpus pārlūkprogrammas. Varat izmantot lietojumprogrammu, lai izpētītu, kā darbojas Edge iebūvētie pakalpojumi, piemēram, maksājumu apstrādātājs.

Spraudņu izmantošana Edge DevTools

Vēl viena iezīme pārejai uz Chromium balstītu izstrādātāju pieredzi ir atbalsts trešo pušu spraudņiem. Daži no tiem jau ir pieejami paša Edge papildinājumu veikalā (lai gan pašlaik tie ir tikai ar privātu dziļo saišu starpniecību veikalā). Plašākai izvēlei, ja pakalpojumā Edge esat iespējojis trešo pušu veikalu atbalstu, jums ir piekļuve visiem Chrome interneta veikala paplašinājumiem. Šeit ir daudz, ieskaitot rīkus, kas papildina īpašu atbalstu konkrētiem JavaScript ietvariem vai palīdz atkļūdot. Tie ietver Facebook’s React, atvērtā pirmkoda gRPC, rīkus, kas palīdz strādāt ar GraphQL API, un atbalstu tādām šķiedrām kā webhint.

Chromium izstrādātāja spraudņu specifikācija ir publiska, un ikviens var izveidot un publicēt savus izstrādātāja rīkus gan iekšēji, gan visā pasaulē. Tā kā Edge spraudņiem ir kopīgs formāts ar citām Chromium pārlūkprogrammām, to pašu spraudni var piegādāt, izmantojot citus pārlūku veikalus, vienkāršojot rīku izstrādi.

Paplašinājuma pievienošana izstrādātāja rīkiem ir tāda pati kā pievienošana pārlūkprogrammai. Pārejiet uz veikalu, noklikšķiniet uz rīka, kuru vēlaties pievienot, un ļaujiet tam lejupielādēt un instalēt. Tas tiks instalēts pārlūkprogrammā, un, pirms atverat izstrādātāja rīkus, iespējams, vēlēsities paslēpt paplašinājuma ikonu pārlūka izvēlnē, lai redzētu jaunu cilni. Palaidot Webhint vietnei, tiek parādīta galveno metriku kopa, kas dod jums padomus par svarīgām funkcijām, piemēram, pieejamību vai PWA funkciju atbalstu.

Ir patīkami redzēt, ka pielāgošana beidzot ir daļa no Edge rīkiem. Mēs visi izmantojam dažādas rīku ķēdes, un izstrādātājiem draudzīga pieeja ir tas, kas jums nepieciešams, lai atbalstītu jūsu izmantotās tehnoloģijas. Toreiz, kad Microsoft paziņoja par pārlūkprogrammas pāreju uz Chromium, tas norādīja, ka viens no iemesliem bija izstrādātājiem piešķirt nepieciešamās funkcijas, lai izveidotu vēlamās lietojumprogrammas. Tas, iespējams, nozīmēja tikai uzlabot pārlūkprogrammu atbalstu HTML5, CSS un JavaScript, tāpēc visu Chromium izstrādātāju rīku klāsta ieviešana Edge visās atbalstītajās OS ir apsveicams solis.

Microsoft izmaiņas Chromium izstrādātāju pieredzē

Ir svarīgi atcerēties, ka Microsoft joprojām ir salīdzinoši jaunākais Google partneris Chromium izstrādē. Pat ja tā ir pievienojusies projektam, ir izdevies veikt ievērojamu ieguldījumu, tostarp pievienojot atbalstu pieejamības funkcijām, lai izstrādātāju rīki būtu pieejami pēc iespējas plašākai kopienai. Ar aptuveni 170 izmaiņām, pievienojot atbalstu rīkiem, piemēram, ekrāna lasītājiem, šeit ir daudz kas patīk, jo pieejamie izstrādātāja rīki radīs pieejamu tīmekļa lietojumprogrammu un pakalpojumu attīstību.

Edge iestatījumos aiz eksperimentālajiem karodziņiem pašlaik ir paslēptas citas jaunas funkcijas, tostarp papildu valodu atbalsts. Ja iespējojat šo funkciju un izmantojat kādu no 10 atbalstītajām valodām, izstrādātāja rīku lokalizācija atbilst jūsu pārlūkprogrammas lokalizācijai.

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