Silumine võib olla tüütu ja veelgi masendavam, kui te ei leia vea asukohta kergesti. Chrome 106 arendaja tööriistad (devtools) on seatud silumisprotsessi lihtsustamiseks, muutes selle lihtsamaks ja kiiremaks.

Nüüd saate hõlpsalt faile sortida, optimeerida otsingut, peita kolmanda osapoole skripte, pääseda juurde põhjalikele toimivusaruannetele ja palju muud, mida selles artiklis käsitletakse. Need arendustööriistad on olulised, eriti arendajatele, kes töötavad JavaScripti raamistikega, nagu Angular, React ja Vue.js, millel on nüüd interaktiivne ja lihtsustatud konsool visualiseerimiseks ja silumiseks nende kood.

Vaatame mõnda neist uutest funktsioonidest lähemalt.

Chrome 106 uutest värskendustest täielikuks kasu saamiseks laadige alla Chrome Kanaar, arendaja, või Beeta versioonid teie vaikearendusbrauserina. Teil on juurdepääs uusimatele arendaja tööriistadele, mis võimaldavad testida veebiplatvormi API-sid ja kiiresti tuvastada saidil olevad probleemid või vead, et tagada kasutajatele parim kliendikogemus.

1. Failid rühmitatud autorite/juurutatud

Nüüd saate navigeerida otse oma rakenduse komponentide juurde, rühmitades failid aadressil autor/kasutatud peal allikas paneel. Minema Allikas > 3-punktiline menüü > Rühmita autori/juurutuse alusel. Nüüd, kui avate failid, näete paneelil ainult juurutatud faile.

Eelmistes Chrome'i versioonides olid kõik lähtekoodi failid nähtavad navigeerimine paneel, muutes ühe faili leidmise keeruliseks.

2. Lihtsustatud failiotsing

Saate piirata otsingut allikapaneelil ainult asjakohaste failidega. Chrome'i eelmistes versioonides kuvati otsingutulemustes raamistiku ja muude kolmandate osapoolte loodud failid, mistõttu oli otsinguüksuse tuvastamine raskendatud.

See värskendus on devtoolsi versioon teie veebibrauserites otsingu optimeerimiseks Google'i otsingu petulehed. Selle sätte konfigureerimiseks minge lehele 3-punktimenüü > Peida ignoreerimisloendi allikad.

Kas teie konsooli täidavad kolmanda osapoole skriptid? Chrome 106 lisas allikakaardile ignoreerimisloendi laienduse, mis võimaldab peita raamistike ja muude kolmandate osapoolte automaatselt loodud skripte.

Selle funktsiooni aktiveerimiseks minge aadressile Seaded > Ignoreeri loend > Lisage automaatselt teadaolevad kolmanda osapoole skriptid ignoreerimise loendisse. Kui avate failid uuesti, kuvab konsool ainult teie rakendusega seotud asjakohaseid faile. Nüüd näete oma koodi segamatult.

4. Üksikasjalikud virna jäljed

Tänu Chrome 106 uuele funktsioonile kulub konsooli vea tuvastamiseks vähem aega. Chrome'i arendaja tööriistad annavad teile üksikasjaliku ülevaate asünkroonsetest operatsioonidest ja nende algpõhjustest. Varasemates versioonides olid nähtavad ainult operatsioonini viinud sündmused. Uusimad devTools näitavad kogu toimingute ahelat ja nende algpõhjuseid.

Google on konfigureerinud a console.createTask() meetod Chrome 106-s. See meetod võimaldab raamistikel teha konsoolil virnajälgi. JavaScripti silumine devtoolsi abil on sama lihtne kui CSS-i silumine Chrome'i abil.

5. Jälgige toimivuspaneelil interaktsioone

Jälgige rakenduses uusi interaktsioone Esitus paneel, et tuvastada võimalikud reageerimisprobleemid teie rakendusele. Chrome 106-s kuvatakse pärast toimingut kõik interaktsioonid interaktsioonide rajal. Rada näitab interaktsioonide allikat ja nende ID-sid. Jälgimine aitab tuvastada allika ja selle vastavalt pealtkuulamisele.

6. LCP ajastuse ülevaade jõudluspaneelil

The Suurim sisurikas värv (LCP) ajastuse üksikasjad on nüüd saadaval saidil toimivuse ülevaate paneel. LCP on oluline veebi toimivuse mõõdik, mis annab aru piltide või tekstiplokkide renderdusajast, mis kulub veebilehele laadimiseks. 2,5 sekundit või alla selle on hea jõudlusskoor.

Statistika nägemiseks navigeerige aadressile jõudluspaneel>3-punktiline menüü-rohkem tasusid>jõudluse ülevaade. Salvestise taasesitamisel kuvatakse Üksikasjad paneel näitab laadimisaegu.

Täiendavad värskendused versioonis Chrome 106

Muud Chrome 106 täiustused hõlmavad järgmist:

  • Saate oma skripti salvestusi probleemideta eksportida rakendusest Salvesti paneel. Ekspordinupul oli eelmistes versioonides probleem.
  • Nüüd on teil värvivalija Stiilid paani SVG elemendid.
  • Saate tuvastada skriptid, mis moonutavad teie paigutust Performance Insights paneel.
  • Saate kuvada LCP veebifondide teid jaotises Performance Insights paneel.

Need funktsioonid võivad parandada teie brauseri arendustööriistade kasutamist.

Mida saate Chrome 106-st

Chrome 106 arendajatööriistade uusimad täiustused muudavad silumisprotsessi kiiremaks. Uued värskendused muudavad toimingute visualiseerimise lihtsamaks läbi lihtsustatud ja dünaamilise konsooli, mis võimaldab teil faile peita, skripte keelata, salvestada ja oma rakendust põhjalikult vaadata, kui silumine.

Chrome 106 täiendused võimaldavad teil oma rakendust hallata ja selle toimivust optimeerida. Jätkake ja nautige neid eeliseid, värskendades Chrome 106 uusimale versioonile.