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 .