„Chrome DevTools“: kaip filtruoti tinklo užklausas
Kaip „front end“ kūrėjai, didžiąją laiko dalį praleidžiame naršyklėje, kai „DevTools“ yra atidaryti (beveik visada, nebent žiūrime „YouTube“ ... kartais net tada).
Vienas iš pagrindinių „DevTools“ skyrių yra networkskirtukas. networkSkirtuke galite atlikti keletą dalykų , pavyzdžiui:
- Tinklo užklausas raskite tekstu
- Raskite tinklo užklausas pagal regex išraišką
- Filtruokite (neįtraukite) tinklo užklausų
- Norėdami pamatyti tinklo užklausas pagal tam tikrą domeną, naudokite ypatybių filtrą
- Raskite tinklo užklausas pagal išteklių tipą
Šios pamokos tikslais naudoju „freeCodeCamp“ pagrindinį puslapį „ freecodecamp.org/news“ . Tiesiog eikite į puslapį ir atidarykite networkskirtuką.
networkSkirtuką galite pamatyti spustelėdami „ cmd + opt + jMac“ arba ctrl + shift + j„Windows“. Pagal consolenumatytuosius nustatymus jis atidarys „DevTools“ skirtuką.
Atidarius consoleskirtuką, tiesiog spustelėkite networkskirtuką, kad jis būtų matomas.
Atidarę networkskirtuką, galime pradėti savo pamoką.
Pradėkime
Įsitikinkite, kad atidarytas tinkamas puslapis (freecodecamp.org/news), o „DevTools“ yra atidarytas skirtuko „tinklas“ skydas:
- Žaliame laukelyje pavaizduota piktograma, kuri gali paslėpti / parodyti filtro sritį tinklo skydelio skirtuke.
- Raudona dėžutė čia parodo filtro srities langelį. Šiuo langeliu galime filtruoti tinklo užklausas.
Tinklo užklausą raskite tekstu
Įveskite analyticsį teksto laukelį Filtras. Rodomi tik failai, kuriuose yra tekstas analytics.
Raskite tinklo užklausą pagal regex išraišką
Tipas /.*\min.[c]s+$/. „DevTools“ filtruoja visus išteklius su failų pavadinimais, kurie baigiasi min.c1 ar daugiau ssimbolių.
Filtruokite (neįtraukite) tinklo užklausos
Tipas -min.js. „DevTools“ filtruoja visus failus, kuriuose yra min.js. Jei bet kuris kitas failas atitinka šabloną, jie taip pat bus filtruojami ir nebus matomi tinklo skydelyje.
Norėdami pamatyti tinklo užklausą pagal tam tikrą domeną, naudokite nuosavybės filtrą
Įveskite domain:code.jquery.comį filtro sritį. Bus rodomos tik tinklo užklausos, priklausančios URL code.jquery.com.
Raskite tinklo užklausą pagal išteklių tipą
Jei norite pamatyti tik kurį (-ius) šrifto (-ų) failą naudojate tam tikrame puslapyje, spustelėkite Font:
Arba, jei norite tik pamatyti interneto lizdas failus pakraunant į tam tikrą puslapio paspaudimu WS:
Taip pat galite žengti dar vieną žingsnį ir peržiūrėti abu failus Fontir WSfailus kartu. Tiesiog pirmiausia spustelėkite, Fonttada cmdspustelėkite, jei WSnorite pasirinkti kelis skirtukus. (Jei naudojate „Windows“ kompiuterį, galite kelis pasirinkti ctrlspustelėdami).
Tai šiai pamokai. Jei manote, kad tai naudinga, pasidalykite ja su savo kolegomis ir praneškite man, ką taip pat manote, adresu twitter.com/adeelibr .
