A hibakeresés fárasztó és még frusztrálóbb lehet, ha nem találja könnyen a hibát. A Chrome 106 fejlesztői eszközei (devtools) a hibakeresési folyamat egyszerűsítésére vannak beállítva, megkönnyítve és gyorsítva azt.

Mostantól könnyedén válogathat a fájlok között, optimalizálhatja a keresést, elrejtheti a harmadik féltől származó szkripteket, hozzáférhet a részletes teljesítményjelentésekhez, és még sok minden mást, amiről ebben a cikkben tárgyalunk. Ezek a fejlesztői eszközök elengedhetetlenek, különösen a JavaScript keretrendszerekkel dolgozó fejlesztők számára, mint pl Az Angular, a React és a Vue.js, amelyek immár interaktív és egyszerűsített konzollal rendelkeznek a megjelenítéshez és a hibakereséshez kódjukat.

Nézzünk meg közelebbről néhány új funkciót:

A Chrome 106 új frissítéseinek teljes kihasználásához töltse le a Chrome-ot Kanári, Dev, vagy Beta verziók alapértelmezett fejlesztői böngészőjeként. Hozzáférhet a legújabb fejlesztői eszközökhöz, amelyek lehetővé teszik a webes platform API-k tesztelését, valamint a webhelyen lévő problémák és hibák gyors azonosítását, hogy a felhasználók a legjobb ügyfélélményt biztosítsák.

instagram viewer

1. Fájlok csoportosítása szerző/telepített

Mostantól közvetlenül navigálhat az alkalmazás összetevőihez a fájlok csoportosításával a címen szerző/telepített a forrás panel. Menj Forrás > 3 pontos menü > Csoportosítás szerző/telepítés szerint. Most, amikor megnyitja a fájlokat, csak a telepített fájlokat láthatja a panelen.

A Chrome korábbi verzióiban az összes forráskódfájl látható volt a navigáció panel, ami megnehezíti egyetlen fájl megtalálását.

2. Egyszerűsített fájlkeresés

A forráspanelen végzett keresést csak a releváns fájlokra korlátozhatja. A Chrome korábbi verzióiban a keretrendszer és más harmadik felek által generált fájlok megjelentek a keresési eredmények között, ami megnehezítette a keresett elem azonosítását.

Ez a frissítés a devtools verziója a webböngészőkben történő keresés optimalizálásának Google kereső csalólapok. A beállítás konfigurálásához lépjen a 3 pontos menü > A figyelmen kívül hagyó lista forrásainak elrejtése.

Harmadik féltől származó szkriptek töltik ki a konzolt? A Chrome 106 egy figyelmen kívül hagyó lista-bővítményt adott a forrástérképhez, amely lehetővé teszi a keretrendszerek és más harmadik felek által automatikusan generált szkriptek elrejtését.

A funkció aktiválásához lépjen a következőre: Beállítások > Figyelmen kívül hagyó lista > Ismert harmadik féltől származó szkriptek automatikus hozzáadása a figyelmen kívül hagyó listára. Amikor újra megnyitja a fájlokat, a konzol csak az alkalmazáshoz kapcsolódó releváns fájlokat jeleníti meg. Mostantól figyelemelvonás nélkül láthatja a kódját.

4. Részletes veremnyomok

A Chrome 106 új funkciójának köszönhetően kevesebb időbe telik a hiba azonosítása a konzolon. A Chrome fejlesztői eszközei részletes áttekintést nyújtanak az aszinkron műveletekről és azok kiváltó okairól. A korábbi verziókban csak azok az események voltak láthatóak, amelyek a művelethez vezettek. A legújabb devTools bemutatja a műveletek teljes láncolatát és azok kiváltó okait.

A Google konfigurálta a console.createTask() módszer a Chrome 106-ban. Ez a módszer lehetővé teszi a keretrendszerek számára, hogy veremkövetést hajtsanak végre a konzolon. A JavaScript hibakeresése a devtools segítségével ugyanolyan egyszerű, mint CSS hibakeresés chrome segítségével.

5. Kövesse nyomon az interakciókat a Teljesítmény panelen

Kövesse nyomon az új interakciókat a Teljesítmény panelt, hogy azonosítsa az alkalmazással kapcsolatos lehetséges válaszadási problémákat. A Chrome 106-ban minden interakció megjelenik az Interakciók sávban egy művelet után. A pálya mutatja az interakciók forrását és azok azonosítóit. A követés segít azonosítani a forrást és ennek megfelelően elfogni.

6. LCP Timing Insights a Teljesítménypanelen

A A legnagyobb tartalmat tartalmazó festék Az (LCP) időzítés részletei már elérhetők a következő oldalon teljesítménybetekintési panel. LCP egy létfontosságú webes teljesítménymutató, amely jelentést készít a képek vagy szövegblokkok megjelenítési idejéről, amíg betöltődik a weboldalon. A 2,5 másodperc vagy az alatti jó teljesítménymutató.

A statisztikák megtekintéséhez navigáljon ide teljesítménypanel>3-pont-menü-több útdíj>teljesítmény-betekintés. Amikor újrajátsz egy felvételt, a Részletek panel mutatja a betöltési időket.

További frissítések a Chrome 106-ban

A Chrome 106 további fejlesztései a következők:

  • A szkriptfelvételeket probléma nélkül exportálhatja a Felvevő panel. A korábbi verziókban probléma volt az exportálás gombbal.
  • Most már van egy színválasztó a Stílusok panel SVG elemek.
  • Az elrendezést torzító szkripteket a Performance Insights panel.
  • Megjelenítheti az LCP webes betűtípusok elérési útját a Performance Insights panel.

Ezek a funkciók javíthatják a böngésző fejlesztői eszközeinek használatát.

Mit kaphat a Chrome 106-ból

A Chrome 106 fejlesztői eszközeinek legújabb fejlesztései gyorsabbá teszik a hibakeresési folyamatot. Az új frissítések megkönnyítik a műveletek megjelenítését egy egyszerűsített és dinamikus konzolon keresztül lehetővé teszi a fájlok elrejtését, a szkriptek letiltását, a rögzítést és az alkalmazás alapos áttekintését, amikor hibakeresés.

A Chrome 106 kiegészítései lehetővé teszik az alkalmazás kezelését és teljesítményének optimalizálását. Ha frissít a Chrome 106 legújabb verziójára, élvezze ezeket az előnyöket.