Odpravljanje napak je lahko dolgočasno in še bolj frustrirajoče, če hrošča ne morete zlahka najti. Orodja za razvijalce Chrome 106 (devtools) so nastavljena tako, da poenostavijo postopek odpravljanja napak, zaradi česar je lažji in hitrejši.

Zdaj lahko preprosto razvrščate datoteke, optimizirate svoje iskanje, skrijete skripte tretjih oseb, dostopate do poglobljenih poročil o uspešnosti in še veliko več, o čemer razpravljamo v tem članku. Ta orodja za razvoj so bistvena, zlasti za razvijalce, ki delajo z okviri JavaScript, kot je npr Angular, React in Vue.js, ki imajo zdaj interaktivno in poenostavljeno konzolo za vizualizacijo in odpravljanje napak njihovo kodo.

Oglejmo si podrobneje nekatere od teh novih funkcij:

Če želite v celoti izkoristiti nove posodobitve za Chrome 106, prenesite Chrome Kanarček, Dev, oz Beta različice kot vaš privzeti razvojni brskalnik. Imeli boste dostop do najnovejših orodij za razvijalce, ki omogočajo testiranje API-jev spletne platforme in hitro prepoznavanje težav ali hroščev na vašem spletnem mestu, da svojim uporabnikom zagotovite najboljšo uporabniško izkušnjo.

instagram viewer

1. Datoteke razvrščene po avtorju/razmeščenem

Zdaj se lahko pomaknete neposredno do komponent svoje aplikacije tako, da združite datoteke na avtorsko/razporejeno na vir panel. Pojdi do Vir > Meni s tremi pikami > Združi po avtorju/razmeščenem. Zdaj, ko odprete datoteke, lahko na plošči vidite le svoje nameščene datoteke.

V prejšnjih različicah Chroma so bile vse datoteke izvorne kode vidne v navigacijo ploščo, zaradi česar je težko najti posamezno datoteko.

2. Poenostavljeno iskanje datotek

Iskanje na izvorni plošči lahko omejite samo na ustrezne datoteke. V prejšnjih različicah Chroma so se datoteke, ki jih ustvarijo ogrodje in druge tretje osebe, prikazale v rezultatih iskanja, zaradi česar je bilo težko prepoznati iskalni element.

Ta posodobitev je različica orodij za razvijalce za optimizacijo iskanja v spletnih brskalnikih Goljufije za iskanje Google. Če želite konfigurirati to nastavitev, pojdite na Meni s tremi pikami > Skrij vire seznama prezrtih.

Skripti tretjih oseb polnijo vašo konzolo? Chrome 106 je v izvorni zemljevid dodal razširitev seznama prezrtih, da lahko skrijete skripte, ki so jih samodejno ustvarila ogrodja in druge tretje osebe.

Če želite aktivirati to funkcijo, pojdite na Nastavitve > Seznam prezrtih > Samodejno dodaj znane skripte tretjih oseb na seznam prezrtih. Ko znova odprete datoteke, bo konzola prikazala samo ustrezne datoteke, povezane z vašo aplikacijo. Zdaj lahko vidite svojo kodo brez motenj.

4. Podrobne sledi sklada

Zahvaljujoč novi funkciji v Chromu 106 boste porabili manj časa za prepoznavanje napake na konzoli. Orodja za razvijalce Chrome vam nudijo podroben pregled asinhronih operacij in njihovih temeljnih vzrokov. V prejšnjih različicah so bili vidni le dogodki, ki so vodili do operacije. Najnovejša orodja za razvijalce prikazujejo celotno verigo operacij in njihove temeljne vzroke.

Google je konfiguriral a console.createTask() metoda v Chromu 106. Ta metoda omogoča ogrodjem izvajanje sledenja skladov na konzoli. Odpravljanje napak v JavaScriptu z orodji za razvijalce je prav tako enostavno kot odpravljanje napak CSS z uporabo Chroma.

5. Sledite interakcijam na plošči z zmogljivostjo

Sledite novim interakcijam v Izvedba ploščo za prepoznavanje morebitnih težav z odzivnostjo na vašo aplikacijo. V Chromu 106 so vse interakcije po operaciji prikazane na sledi Interakcije. Sled prikazuje vir interakcij in njihove ID-je. Sledenje pomaga prepoznati vir in ga ustrezno prestreči.

6. LCP Timing Insights na plošči Performance

The Največja slika z vsebino (LCP) časovne podrobnosti so zdaj na voljo na plošča z vpogledi v uspešnost. LCP je pomembna meritev spletne uspešnosti, ki poroča o času upodabljanja slik ali blokov besedila, ki je potreben za nalaganje na spletno stran. 2,5 sekunde ali manj je dobra ocena zmogljivosti.

Če si želite ogledati vpoglede, pojdite na plošča z zmogljivostjo>3-točkovni meni-več cestnin>vpogled v zmogljivost. Ko ponovno predvajate posnetek, se Podrobnosti plošča bo prikazala čase nalaganja.

Dodatne posodobitve v Chromu 106

Druge izboljšave Chroma 106 vključujejo:

  • Svoje posnetke scenarijev lahko brez težav izvozite iz Snemalnik panel. Gumb za izvoz je imel težave v prejšnjih različicah.
  • Zdaj imate izbirnik barv v Slogi elementi podokna SVG.
  • Skripte, ki izkrivljajo vašo postavitev, lahko prepoznate v Vpogled v uspešnost panel.
  • Poti za spletne pisave LCP lahko prikažete v Vpogled v uspešnost panel.

Te funkcije lahko izboljšajo vašo uporabo razvojnih orodij brskalnika.

Kaj dobite od Chroma 106

Najnovejše izboljšave orodij za razvijalce v Chromu 106 pospešijo postopek odpravljanja napak. Nove posodobitve olajšajo vizualizacijo operacij prek poenostavljene in dinamične konzole, ki vam omogoča skrivanje datotek, onemogočanje skriptov, snemanje in poglobljen vpogled v vašo aplikacijo, ko odpravljanje napak.

Dodatki v Chromu 106 vam bodo omogočili upravljanje vaše aplikacije in optimizacijo njene učinkovitosti. Izkoristite te ugodnosti s posodobitvijo na najnovejšo različico Chroma 106.