Virheenkorjaus voi olla työlästä ja vielä turhauttavampaa, kun vian paikantaminen ei ole helppoa. Chrome 106 -kehittäjätyökalut (devtools) on asetettu yksinkertaistamaan virheenkorjausprosessia, mikä tekee siitä helpompaa ja nopeampaa.

Voit nyt helposti lajitella tiedostoja, optimoida hakusi, piilottaa kolmannen osapuolen komentosarjoja, käyttää perusteellisia tehokkuusraportteja ja paljon muuta tässä artikkelissa käsiteltyä. Nämä kehitystyökalut ovat välttämättömiä erityisesti kehittäjille, jotka työskentelevät JavaScript-kehysten, kuten Angular, React ja Vue.js, joilla on nyt interaktiivinen ja yksinkertaistettu konsoli visualisointia ja virheenkorjausta varten heidän koodinsa.

Tarkastellaanpa tarkemmin joitain näistä uusista ominaisuuksista:

Lataa Chrome, jotta saat täyden hyödyn Chrome 106:n uusista päivityksistä Kanaria, Kehittäjä, tai Beeta versiot oletuskehitysselaimeksi. Saat käyttöösi uusimmat kehittäjän työkalut, jotka mahdollistavat verkkoalustan sovellusliittymien testaamisen ja sivustosi ongelmien tai vikojen nopean tunnistamisen varmistaaksesi, että käyttäjilläsi on paras asiakaskokemus.

instagram viewer

1. Tiedostot ryhmitelty tekijän/käyttöönoton mukaan

Voit nyt siirtyä suoraan sovelluksesi osiin ryhmittelemällä tiedostot osoitteessa kirjoittanut/käyttöön otettu päällä lähde paneeli. Mene Lähde > 3-pistevalikko > Ryhmittele tekijän/käyttöönoton mukaan. Nyt kun avaat tiedostot, näet vain käyttöönotetut tiedostot paneelissa.

Aiemmissa Chrome-versioissa kaikki lähdekooditiedostot olivat näkyvissä navigointi paneeli, mikä vaikeuttaa yksittäisen tiedoston löytämistä.

2. Yksinkertaistettu tiedostohaku

Voit rajoittaa haun lähdepaneelissa vain asiaankuuluviin tiedostoihin. Chromen aiemmissa versioissa kehyksen ja muiden kolmansien osapuolien luomat tiedostot näkyivät hakutuloksissa, mikä vaikeutti hakukohteen tunnistamista.

Tämä päivitys on devtools-versio, joka optimoi hakusi verkkoselaimissa Google-haku huijauslehtiä. Voit määrittää tämän asetuksen siirtymällä kohtaan 3-piste-valikko > Piilota ohituslistan lähteet.

Täyttävätkö konsolisi kolmannen osapuolen komentosarjat? Chrome 106 lisäsi lähdekarttaan ohituslistalaajennuksen, jonka avulla voit piilottaa kehysten ja muiden kolmansien osapuolten automaattisesti luomat skriptit.

Ota tämä ominaisuus käyttöön siirtymällä kohtaan Asetukset > Ohita luettelo > Lisää automaattisesti tunnetut kolmannen osapuolen komentosarjat ohituslistalle. Kun avaat tiedostot uudelleen, konsoli näyttää vain asiaankuuluvat sovellukseesi liittyvät tiedostot. Voit nyt nähdä koodisi ilman häiriötekijöitä.

4. Yksityiskohtaiset pinojäljet

Chrome 106:n uuden ominaisuuden ansiosta konsolin virheen tunnistaminen vie vähemmän aikaa. Chromen kehittäjätyökalut antavat sinulle yksityiskohtaisen kuvan asynkronisista toiminnoista ja niiden syistä. Aiemmissa versioissa vain operaatioon johtaneet tapahtumat olivat näkyvissä. Uusimmat devTools näyttävät koko toimintaketjun ja niiden perimmäiset syyt.

Google on määrittänyt a console.createTask() menetelmä Chrome 106:ssa. Tämän menetelmän avulla kehykset voivat suorittaa pinojäljitystä konsolissa. JavaScriptin virheenkorjaus devtoolsin avulla on yhtä helppoa kuin CSS-virheenkorjaus kromilla.

5. Seuraa vuorovaikutuksia suorituskykypaneelissa

Seuraa uusia vuorovaikutuksia Esitys paneeli tunnistaaksesi mahdolliset reagointiongelmat sovellukseesi. Chrome 106:ssa kaikki vuorovaikutukset näkyvät vuorovaikutusraidalla toimenpiteen jälkeen. Raita näyttää vuorovaikutusten lähteen ja niiden tunnukset. Seuranta auttaa tunnistamaan lähteen ja sieppaamaan sen vastaavasti.

6. LCP Timing Insights Performance-paneelissa

The Suurin sisältöä sisältävä maali (LCP) ajoitustiedot ovat nyt saatavilla osoitteessa suorituskykytilastot -paneeli. LCP on tärkeä web-suorituskykymittari, joka raportoi kuvien tai tekstilohkojen renderöintiajasta, joka kestää latautua verkkosivulle. 2,5 sekuntia tai alle on hyvä suoritusarvo.

Katso oivallukset siirtymällä kohtaan suorituskykypaneeli>3 pisteen valikko-lisää tietulleja>suorituskykytiedot. Kun toistat tallenteen uudelleen, Yksityiskohdat paneeli näyttää latausajat.

Lisäpäivitykset Chrome 106:ssa

Muita Chrome 106:n parannuksia ovat:

  • Voit viedä käsikirjoitustallenteet ilman ongelmia Tallennin paneeli. Vientipainikkeessa oli ongelma aiemmissa versioissa.
  • Sinulla on nyt värinvalitsin Tyylit ruudun SVG-elementtejä.
  • Voit tunnistaa asetteluasi vääristävät skriptit Performance Insights paneeli.
  • Voit näyttää polut LCP-verkkokirjasimille Performance Insights paneeli.

Nämä ominaisuudet voivat parantaa selaimen kehitystyökalujen käyttöä.

Mitä saat Chrome 106:sta

Chrome 106:n kehitystyökalujen viimeisimmät parannukset nopeuttavat virheenkorjausprosessia. Uudet päivitykset helpottavat toimintojen visualisointia yksinkertaistetun ja dynaamisen konsolin avulla voit piilottaa tiedostoja, poistaa komentosarjoja käytöstä, tallentaa ja tarkastella sovelluksesi perusteellisesti, kun virheenkorjaus.

Chrome 106:n lisäysten avulla voit hallita sovellustasi ja optimoida sen suorituskykyä. Siirry eteenpäin ja nauti näistä eduista päivittämällä Chrome 106:n uusimpaan versioon.