Tee Microsoft Edge DevToolsista omasi

Nykyään verkkoteknologioilla ei ole paljonkaan tekemistä. Verkkoalusta on kehittynyt niin paljon, että esimerkiksi elementtien animointi, median toistaminen tai tallennus, tiedostojen tai tallennustilan käyttö, verkkopyyntöjen sieppaaminen ja välimuistin käyttö, monimutkaisten CSS-asettelujen tekeminen tai alkuperäisen koodin kirjoittaminen ovat kaikki mahdollisia nykyään.

Koska oppimista ja käyttöä on niin paljon, verkkokehittäjät tarvitsevat täydellisen joukon työkaluja, joihin he voivat luottaa.

Onneksi Microsoft Edgen mukana tulee kehitystyökaluja, joiden avulla verkkokehittäjät voivat olla tuottava verkkoominaisuuksien ja sovellusliittymien avulla. Riippumatta siitä, mitä olet tekemässä, sinulla on todennäköisesti erityinen työkalu, joka voi auttaa sinua.

Kääntöpuolena on kuitenkin, että DevTools on yleensä melko monimutkainen. Ne sisältävät yli 30 erilaista työkalua, ja käyttöliittymä on kasvanut ajan myötä vastaamaan niitä. Lisäksi uusia ominaisuuksia lisätään jatkuvasti käyttäjien palautteen perusteella.

Tässä viestissä esittelemme sinulle Microsoft Edge DevToolsin uusia ominaisuuksia, jotka auttavat tekemään työkaluja helpommin lähestyttävä ja personoitavissa, joten voit alkaa tarttua haasteeseen, jonka mukaan käytettävissäsi on niin monia erilaisia ​​työkaluja. Saat lisätietoja näistä ominaisuuksista myös alla olevasta videosta.

DevTools kehittyy nopeasti eri selaimissa – pysy ajan tasalla muiden selainten viimeisimmistä asioista, tutustu artikkeliini Smashing Magazinessa kattaa uudet DevTools-ominaisuudet Microsoft Edgessä, Google Chromessa, Mozilla Firefoxissa ja Safarissa.

Työkalujen avaaminen, sulkeminen ja siirtäminen

Vaikka DevToolsissa on noin 30 erillistä työkalua, on epätodennäköistä, että tarvitset useampaa kuin kourallista niitä samanaikaisesti – puhumattakaan 30:stä. On siis erittäin tärkeää, että voit helposti avata työkaluja tarvittaessa ja sulkea ne, kun et tarvitse.

Samaan aikaan voi olla työkaluja, joita et ole koskaan käyttänyt ja jotka voivat olla erittäin käteviä. Jos ne ovat oletuksena suljettuja, et ehkä löydä niitä ollenkaan.

Lisäsimme kolme pientä, mutta erittäin tehokasta DevTools-ominaisuutta korjaamaan tämän.

Sulkemistyökalut

Microsoft Edge DevToolsin välilehdissä on nyt sulkemispainike, joka voidaan piilottaa ne, joita et enää tarvitse. Voit siis pitää käyttöliittymän puhtaana ja yksinkertaisena, ja vain tällä hetkellä tarvitsemasi työkalut ovat helposti saatavilla.

Huomaa, että joissakin työkaluissa ei ole sulkemispainiketta: Elementit, Konsoli ja Lähteet. Näitä työkaluja käytetään paljon enemmän kuin kaikkia muita. Verkkokehittäjät tarvitsevat niitä aina, eikä niiden sulkeminen ole kovin järkevää.

Työkalujen avaaminen

Välipalkin lopussa on nyt + (plus)-painike avata mikä tahansa työkalu, jota ei ole vielä avattu.

Aiemmin kaikkien käytettävissä olevien työkalujen löytämiseksi piti mennä päävalikkoon (…) ja valita sitten Lisää työkaluja tai tietää kuinka käyttää komentovalikko työkalujen nopeaan käyttöön. +-painike helpottaa muiden työkalujen löytämistä ja käyttämistä.

Kehittäjätyökaluissa voi olla kaksi välilehtipalkkia: yksi yläosassa, joka on aina näkyvissä ja jossa Elementit-ja Lähteet-paneelit yleensä sijaitsevat, ja toinen. alareunassa laatikko, jota voi vaihtaa. painamalla näppäimistön Esc-näppäintä. Konsoli on yleensä laatikossa. Molemmissa välilehtipalkeissa on +-painike, joten voit avata uusia työkaluja missä tahansa näistä kahdesta sijainnista.

Työkalujen siirtäminen

Laatikon avaaminen voi olla erittäin hyödyllistä, kun etsitään virheenkorjausta, joka vaatii useampaa kuin yhtä työkalua samanaikaisesti.

>

Voit esimerkiksi haluta avata sekä Lähteet-että Verkko-paneelit samanaikaisesti varmistaaksesi, että oikeat HTTP-pyynnöt lähetetään JavaScript-koodin vaiheittaisen virheenkorjauksen yhteydessä. Tai haluat ehkä avata sekä Elements-että 3D View-paneelit vierekkäin, jotta voit korjata elementin z-index-ongelman.

Microsoft Edge DevToolsin avulla voit nyt siirtää työkaluja pääalueen ja laatikon välillä avaamalla kontekstivalikon (klikkaa hiiren kakkospainikkeella) välilehti, jonka haluat siirtää, ja valitse Siirrä alas tai Siirrä ylös.

Huomaa, että jos valitset +-painikkeen laatikosta ja valitset luettelosta työkalun, joka on jo avattu pääalueella, tämä työkalu siirretään laatikkoon. Tämä on toinen hyvä tapa siirtää työkaluja ympäriinsä.

Työkaluista oppiminen työkalujen sisältä

+-painike on loistava tapa löytää helposti uusia työkaluja, joita et ehkä ole käyttänyt aiemmin. Joskus työkalun käyttöliittymä voi kuitenkin olla ylivoimainen ensi silmäyksellä. Se helpottaa, että dokumentaatio on saatavilla. Microsoft Edge DevTools-dokumentaatio voi auttaa sinua tässä, mutta ei useinkaan ole ulottuvillasi, kun olet kesken tehtävän.

Lisäsimme äskettäin ominaisuuden, joka helpottaa uuden työkalun kontekstuaalista oppimista: DevTools-työkaluvinkit. DevTools-työkaluvihjeet on peittokuva, joka kattaa työkalut ja sisältää asiayhteyteen perustuvaa dokumentaatiota niistä sekä linkkejä lisätietoihin.

Voit ottaa DevTools-työkaluvinkit käyttöön kolmella eri tavalla:

Siirry Muokkaa ja hallitse kehittäjätyökaluja-painiketta (…) > Ohje > Ota käyttöön DevToolsin työkaluvihjeet. Voit myös käyttää Ctrl+Shift+H-pikanäppäintä (Macissa Cmd+Shift+H). Tai käytä komentovalikkoa ja kirjoita”tooltips”.

Kun se on otettu käyttöön, siirrä hiiren osoitin korostettujen alueiden päälle näyttääksesi työkaluvinkin kyseisestä työkalujen alueesta (voit myös selata työkaluvihjeitä sarkainnäppäimellä). Jotkin työkaluvihjeet sisältävät jopa linkkejä dokumentaatiosivustolta saadaksesi lisätietoja.

Huomaa, että voit myös siirtyä muihin paneeleihin, kun DevTools-työkaluvihjeet ovat aktiivisia. Tällä tavalla voit navigoida DevToolsissa ja oppia uusia asioita ilman, että sinun tarvitsee kääntää ominaisuus pois päältä ja uudelleen käyttöön joka kerta.

Kielen vaihtaminen

Tiedämme, että kehittäjät voivat olla tuottavampia, kun heidän työkalunsa vastaavat heidän kieltään uage mieltymys. Lisäksi muita Microsoftin kehittäjätuotteita, kuten VS-koodia, voidaan käyttää muilla kielillä. Tästä syystä teimme DevToolsin saataville 11 eri kielellä.

Oletusarvoisesti DevTools vastaa selaimen käyttöliittymälle valitsemaasi kieltä, mutta voit määrittää sen itsenäisesti mille tahansa näistä muista kielistä.

Englanti saksa – saksa kiina (yksinkertaistettu) – 中文(简体)（简体） kiina (perinteinen) – 中文(繁體)（繁體） Ranska – Français espanja – espanja – español – 휬日 japani – portugali Venäjä – Pусский

Jos haluat vaihtaa kieltä, siirry DevToolsin asetuksiin (käyttämällä F1-pikanäppäintä tai napsauttamalla työkalupalkin rataskuvaketta) ja valitsemalla Kieli<./strong> avattavasta luettelosta.