Chrome DevTools: A hálózati kérelmek szűrése

Mint front end fejlesztők, időnk nagy részét a böngészőben töltjük, nyitva a DevTools (szinte mindig, hacsak nem a YouTube-ot nézzük ... néha akkor is).

A DevTools egyik fő szakasza a networkfül. A networklapon néhány dolgot megtehet , például a következőket:

  • Keresse meg a hálózati kéréseket szöveggel
  • Keresse meg a hálózati kéréseket regex kifejezéssel
  • A hálózati kérelmek kiszűrése (kizárása)
  • A tulajdonságszűrő segítségével megtekintheti a hálózati kérelmeket egy adott tartomány alapján
  • Keresse meg a hálózati kéréseket erőforrástípus szerint

A bemutató céljaira a freeCodeCamp honlapját, a freecodecamp.org/news címet használom . Egyszerűen lépjen az oldalra, és nyissa meg a networklapot.

A networklapot úgy érheti el, ha megüt cmd + opt + jegy Mac vagy ctrl + shift + jWindows operációs rendszert. Ez megnyitja a consolelapot a DevTools alapértelmezés szerint.

Miután a consolefül megnyílt, egyszerűen kattintson a networkfülre, hogy láthatóvá váljon.

Amint networkmegnyílik a fül, elkezdhetjük az oktatóanyagot.

Kezdjük

Győződjön meg arról, hogy a megfelelő oldal nyitva van (freecodecamp.org/news), és a "hálózat" fül panel nyitva van a DevTools alkalmazásban:

  • A zöld mező itt azt az ikont szemlélteti, amely elrejtheti / megjelenítheti a szűrőterületet a hálózati panel lapján.
  • A piros négyzet itt szemlélteti a szűrőterület mezőjét. Ezzel a mezővel kiszűrhetjük a hálózati kéréseket.

Keresse meg a hálózati kérelmet szöveggel

Írja analyticsbe a Szűrő szövegmezőbe. Csak a szöveget tartalmazó fájlok analyticsjelennek meg.

Keresse meg a hálózati kérelmet regex kifejezéssel

Típus /.*\min.[c]s+$/. A DevTools kiszűri az összes erőforrást olyan fájlnevekkel, amelyek végén egy min.cvagy több skarakter szerepel.

A hálózati kérelem kiszűrése (kizárása)

Típus -min.js. A DevTools kiszűri az összes fájlt, amely tartalmazza min.js. Ha bármely más fájl megegyezik a mintával, azokat is kiszűrjük, és nem lesz látható a hálózati panelen.

A tulajdonságszűrő használatával megtekintheti a hálózati kéréseket egy adott tartomány szerint

Írja domain:code.jquery.combe a szűrő területére. Csak az URL-hez tartozó hálózati kéréseket jeleníti meg code.jquery.com.

Keresse meg a hálózati kérelmet erőforrástípus szerint

Ha csak azt szeretné megnézni, hogy mely betűtípus (ok) fájlokat használja egy adott oldalon, kattintson Font:

Vagy ha csak azt szeretné, hogy a webaljzat fájljai egy bizonyos oldalra kerüljenek, kattintson WS:

Akkor is megy egy lépéssel tovább, és tekintse meg a két Fontés WSfájlokat együtt. Egyszerűen kattintson az Fontelsőre, majd cmdkattintson a WStöbbszörös kijelöléshez. (Ha Windows gépet használ, akkor a ctrlkattintással többször is kiválaszthatja ).

Ez az oktatóanyag. Ha hasznosnak találta, ossza meg kollégáival, és tudassa velem a véleményét a twitter.com/adeelibr oldalon is .