Kao napredni programeri, većinu svog vremena provodimo u pregledniku s otvorenim DevTools (gotovo uvijek, osim ako ne gledamo YouTube ... ponekad čak i tada).
Jedan od glavnih odjeljaka u DevTools-u je networkkartica. Na networkkartici možete učiniti nekoliko stvari , poput sljedećeg:
- Pronađite mrežne zahtjeve tekstom
- Pronađite mrežne zahtjeve izrazom regularnog izraza
- Filtrirajte (izuzmite) mrežne zahtjeve
- Upotrijebite filtar svojstava da biste vidjeli mrežne zahtjeve određene domene
- Pronađite mrežne zahtjeve prema vrsti resursa
Za potrebe ovog vodiča koristim početnu stranicu freeCodeCampa , freecodecamp.org/news . Jednostavno idite na stranicu i otvorite networkkarticu.
networkKarticu možete vidjeti pritiskom cmd + opt + jna Mac ili ctrl + shift + jWindows. Po consoledefaultu će otvoriti karticu u DevTools.
Jednom kada se consolekartica otvori, jednostavno kliknite networkkarticu da bi bila vidljiva.
Jednom kada se networkkartica otvori, možemo započeti naš vodič.
Započnimo
Provjerite je li otvorena ispravna stranica (freecodecamp.org/news) i je li otvorena kartica "mreža" u DevTools:
- Ovdje zeleni okvir prikazuje ikonu koja može sakriti / prikazati područje filtra na kartici mrežne ploče.
- Crveni okvir ovdje prikazuje okvir područja filtra. Ovim okvirom možemo filtrirati mrežne zahtjeve.
Pronađite mrežni zahtjev tekstom
Upišite analyticsu tekstni okvir Filter. Prikazuju se samo datoteke koje sadrže tekst analytics.
Pronađite mrežni zahtjev izrazom regularnog izraza
Tip /.*\min.[c]s+$/. DevTools filtrira sve resurse s imenima datoteka koji završavaju min.cnakon čega slijedi 1 ili više sznakova.
Filtrirajte (izuzmite) mrežni zahtjev
Tip -min.js. DevTools filtrira sve datoteke koje sadrže min.js. Ako se bilo koja druga datoteka podudara s uzorkom, također će se filtrirati i neće biti vidljive na mrežnoj ploči.
Upotrijebite filtar svojstava da biste vidjeli mrežni zahtjev određene domene
Upišite domain:code.jquery.comu područje filtra. Prikazati će samo mrežne zahtjeve koji pripadaju URL-u code.jquery.com.
Pronađite mrežni zahtjev prema vrsti resursa
Ako samo želite vidjeti koja se datoteka s fontovima koristi na određenoj stranici, kliknite Font:
Ili ako želite vidjeti samo datoteke web utičnice koje se učitavaju na određenoj stranici, kliknite WS:
Također možete ići jedan korak dalje i vidjeti kako Fonti WSdatoteka zajedno. Jednostavno kliknite Fontprvo, a zatim cmdkliknite na WSkartice za višestruki odabir. (Ako ste na Windows računalu, možete višestruko odabrati pomoću ctrlklika).
To je to za ovaj vodič. Ako vam se učini korisnim, podijelite ga sa svojim kolegama i recite mi što mislite i na twitter.com/adeelibr .