Microsoftin uudella Chromium-selaimella on äskettäin ollut toinen julkinen vakaa julkaisu, joka esitteli Edge 80: n täydellä ARM64-tuella sekä parannetuilla työkaluilla, jotka auttavat sinua rakentamaan ja käsittelemään verkkosisältöä. Kuten vanhan Edgen aiemmat versiot, Microsoftin uusi selain pitää tutun F12-pikakuvakkeen kehittäjän työkalujen käynnistämiseksi joko selaimeen liitettynä tai erillisessä ruudussa.
Kannattaa tutustua uusiin juttuihin, koska vaikka vanhan Edgen kanssa on yhtäläisyyksiä, työskentelet nyt Chromium-maailmassa, ja Chromella ja muilla Chromium-pohjaisilla selaimilla on paljon enemmän yhteistä. Se ei ole huono asia. Taitojen siirtäminen selainten välillä on helpompaa, ja jos olet käyttänyt Chromea kehitysselaimena, on helppo aloittaa työskentely uudessa Edgessä. Microsoft on kuitenkin tehnyt joitain omia muutoksia ja pyrkii laajentamaan Edgen kehittäjäkokemuksen Visual Studio -koodiksi, jotta voit kehittää ja testata JavaScript-sovelluksia yhdessä ympäristössä.
Alustojen välinen kehittäjäkokemus
Kun uusi Edge on saatavana Windows 7: ssä ja macOS: ssa sekä kehitteillä oleva Linux-versio, samat kehitystyökalut ovat käytettävissä eri alustoilla. Saat samat tarkastajat, virheenkorjaajat ja konsolit, joten on helppo suorittaa samat testit missä tahansa ja missä tahansa käyttöjärjestelmässä. Kehittäjän, joka tuntee Edgen Windows-käyttöjärjestelmässä, pitäisi pystyä vaihtamaan Maciin testaamaan koodia odottamatta Mac-kehittäjän apua.
Legacy Edgen tavoin uudet Chromium-pohjaiset Edge-kehitystyökalut auttavat sinua tutkimaan sivustosi HTML-, CSS- ja JavaScriptiä JavaScript-virheenkorjaimen ja konsolin avulla, jotta voit tarkastella konsolin lokitiedostoja JavaScriptiä käytettäessä. Työkalujen avulla voit käynnistää nopeasti selaimen työkalupalkin, joka lisää laitteen näkymän tilat, jolloin voit testata reagoivan suunnittelun poistumatta kehitystietokoneesta.
Edge-kehittäjän työkalujen käyttäminen
Edgen kehittäjätyökalut löytyvät yhdeksästä eri ruudusta, joista jokainen antaa sinulle erilaisia oivalluksia verkkosovelluksestasi. Käytät todennäköisesti ensimmäistä: Elementit-näkymää.
Tämä porautuu HTML- ja CSS-tiedostoihisi, mikä osoittaa, mitkä sivun elementit luodaan minkä koodin osien avulla. Osoittamalla selainikkunan elementtiin korostetaan asianmukainen koodi, mikä auttaa eristämään HTML- tai CSS-virheen, jonka haluat selvittää. Yhdessä ruudussa näkyy HTML; toinen näyttää nykyisen CSS: n, tällä hetkellä käytetyt tyylit ja tapahtumakuuntelijat, joita käytetään. Näet mitä CSS-sääntöjä käytetään ja mitkä ohitetaan.
Elementit-ruutu on saatavana myös Visual Studio Code -laajennuksena, joka tuo ulkoasutarkastuksen HTML-muokkauksesi rinnalle. Se on hyödyllinen tapa nähdä nopeasti, miten koodisi muutokset vaikuttavat sivun asetteluihin. Voit jopa liittää koodin selaininstanssiin, jolloin pääset suoraan kaikkiin avoimiin HTML-asiakirjoihin.
Valmistautuminen PWA: hin
Yksi hyödyllisimmistä työkaluista on Suorituskyky-paneeli. Täältä voit tallentaa selaimesi toiminnan. Kun testisarja on valmis, voit profiloida sovelluksesi käyttämiä resursseja työkalun aikajanalla. Sitä käytetään parhaiten verkko- ja muistityökalujen kanssa, varsinkin jos käytät paljon JavaScriptiä. Verkkosovelluksen toiminnan ymmärtäminen on erityisen tärkeää, jos aiot käyttää sitä PWA: na (progressiivinen verkkosovellus), ja tässä sovelluspaneeli lisää työkalut PWA: n tärkeimpien komponenttien, mukaan lukien paikalliset varastointi- ja huoltotyöntekijät, tutkimiseen.
Edge helpottaa PWA: iden tunnistamista ja asentamista, joten kannattaa tutustua näihin työkaluihin, erityisesti Sovellusruutuun. Hallintapaneelimaisella ulkonäöllä ja tuntumalla se on nopea tapa saada perusteellinen katsaus siihen, mitä sovelluksissasi tapahtuu ja miten ne toimivat selaimen ulkopuolella. Sovellustyökalun avulla voit tutkia, miten Edgen sisäiset palvelut, kuten maksujen käsittelijä, toimivat.
Laajennusten käyttäminen Edge DevTools -sovelluksessa
Toinen ominaisuus Chromium-pohjaiseen kehittäjäkokemukseen siirtymisessä on tuki kolmansien osapuolten laajennuksille. Jotkut niistä ovat jo saatavilla Edgen omassa lisäkaupassa (tosin tällä hetkellä vain yksityisten syvälinkkien kautta kauppaan). Laajempaa valintaa varten, jos olet ottanut kolmannen osapuolen myymälän tuen käyttöön Edge-palvelussa, sinulla on pääsy kaikkiin Chrome Web Storen laajennuksiin. Tässä on paljon, mukaan lukien työkalut, jotka lisäävät kohdennettua tukea tietyille JavaScript-kehyksille tai auttavat virheenkorjauksessa. Näitä ovat Facebookin React, avoimen lähdekoodin gRPC, työkalut, jotka auttavat työskentelemään GraphQL-sovellusliittymien kanssa, ja tuki langoille, kuten webhint.
Chromiumin kehittäjien laajennusten määrittely on julkinen, ja kuka tahansa voi rakentaa ja julkaista omia kehittäjän työkalujaan joko sisäisesti tai koko maailman käytettäväksi. Koska Edgen laajennuksilla on yhteinen muoto muiden Chromium-selainten kanssa, sama laajennus voidaan toimittaa muiden selainliikkeiden kautta, mikä yksinkertaistaa työkalujen kehittämistä.
Laajennuksen lisääminen kehittäjätyökaluihin on kuin laajennuksen lisääminen selaimeen. Siirry kauppaan, napsauta työkalua, jonka haluat lisätä, ja anna sen ladata ja asentaa. Se asennetaan selaimeen, ja haluat ehkä piilottaa laajennuskuvakkeen selainvalikossa ennen kuin avaat kehittäjätyökalut nähdäksesi uuden välilehden. Webhintin suorittaminen sivuston päällä näyttää joukon tärkeitä mittareita, jotka antavat sinulle vihjeitä tärkeistä ominaisuuksista, kuten esteettömyydestä, tai PWA-ominaisuuksien tuesta.
On hyvä nähdä räätälöinti vihdoin osa Edgen työkaluja. Me kaikki käytämme erilaisia työkaluketjuja, ja antamalla sinulle tarvitsemasi tekniikan tuet on erittäin kehittäjäystävällinen lähestymistapa. Kun Microsoft ilmoitti siirtymisestä Chromiumiin selaimessaan, se ilmoitti, että yksi sen syistä oli antaa kehittäjille tarvittavat ominaisuudet haluamiensa sovellusten rakentamiseen. Tämä on saattanut tarkoittaa vain HTML5: n, CSS: n ja JavaScriptin selaintuen parantamista, joten kaikkien Chromium-kehitystyökalujen tuominen Edgeen kaikissa tuetuissa käyttöjärjestelmissä on tervetullutta.
Microsoftin muutokset Chromiumin kehittäjäkokemukseen
On tärkeää muistaa, että Microsoft on edelleen suhteellisen nuorempi kumppani Googlelle Chromium-kehityksessä. Siitä huolimatta se on onnistunut antamaan huomattavan määrän panoksia sen jälkeen, kun se liittyi projektiin, mukaan lukien lisäys esteettömyysominaisuuksille, jotta kehittäjien työkalut olisivat mahdollisimman laajan yhteisön käytettävissä. Kun noin 170 muutosta lisää tukea työkaluille, kuten näytönlukuohjelmille, täällä on paljon pidettävää, koska käytettävissä olevat kehittäjän työkalut johtavat helppokäyttöisten verkkosovellusten ja -palveluiden kehittämiseen.
Muut uudet ominaisuudet ovat tällä hetkellä piilossa kokeellisten lippujen takana Edgen asetuksissa, mukaan lukien tuki muille kielille. Jos otat tämän ominaisuuden käyttöön ja käytät jotakin 10 tuetusta kielestä, kehittäjän työkalujen lokalisointi vastaa selaimesi lokalisointia.
