Ca dezvoltatori front-end, cea mai mare parte a timpului nostru o petrecem în browser cu DevTools deschis (aproape întotdeauna, cu excepția cazului în care urmărim YouTube … uneori chiar și atunci).

Una dintre secțiunile majore din DevTools este network filă. Există câteva lucruri pe care le puteți face în network filă, precum următoarele:

  • Găsiți cereri de rețea după text
  • Găsiți cereri de rețea prin expresie regex
  • Filtrează (exclude) solicitările de rețea
  • Utilizați filtrul de proprietăți pentru a vedea cererile de rețea de la un anumit domeniu
  • Găsiți cereri de rețea după tipul de resursă

În scopul acestui tutorial, folosesc pagina de pornire Routech, freecodecamp.org/news. Pur și simplu accesați pagina și deschideți fișierul network filă.

Poti vedea network filă prin lovire cmd + opt + j pe Mac sau ctrl + shift + j în Windows. Se va deschide console filă în DevTools în mod implicit.

Chrome DevTools Cum se filtreaza solicitarile de retea
Dând clic pe „cmd + opt + j” se deschide panoul consolei în DevTools

Odata ce console fila este deschisă, pur și simplu faceți clic pe network pentru a o face vizibilă.

1612037525 463 Chrome DevTools Cum se filtreaza solicitarile de retea
Dacă faceți clic pe fila „rețea”, veți vedea toate cererile de rețea efectuate pentru o anumită pagină

Odata ce network fila este deschisă, putem începe tutorialul nostru.

Sa incepem

Asigurați-vă că pagina corectă este deschisă (freecodecamp.org/news) și că panoul de file „rețea” este deschis în DevTools:

1612037525 872 Chrome DevTools Cum se filtreaza solicitarile de retea
Ilustrație în care se află bara de filtrare în panoul de rețea.
  • Caseta verde de aici ilustrează pictograma care poate ascunde / afișa zona filtrului în fila panoului de rețea.
  • Caseta roșie de aici ilustrează caseta zonei de filtrare. Cu această casetă putem filtra solicitările de rețea.

Găsiți cererea de rețea prin text

Tip analytics în caseta de text Filtrare. Numai fișierele care conțin textul analytics sunt afișate.

1612037525 794 Chrome DevTools Cum se filtreaza solicitarile de retea

Găsiți cerere de rețea prin expresie regex

Tip /.*min.[c]s+$/. DevTools filtrează orice resurse cu nume de fișiere care se termină cu un min.c urmat de 1 sau mai multe s personaje.

1612037525 767 Chrome DevTools Cum se filtreaza solicitarile de retea

Filtrează (exclude) cererea de rețea

Tip -min.js. DevTools filtrează toate fișierele care conțin min.js. Dacă orice alt fișier se potrivește cu modelul, acestea vor fi filtrate și nu vor fi vizibile în panoul de rețea.

1612037525 980 Chrome DevTools Cum se filtreaza solicitarile de retea

Utilizați filtrul de proprietăți pentru a vedea cererea de rețea de la un anumit domeniu

Tip domain:code.jquery.com în zona filtrului. Acesta va afișa numai solicitările de rețea care aparțin adresei URL code.jquery.com.

1612037525 870 Chrome DevTools Cum se filtreaza solicitarile de retea

Găsiți cererea de rețea după tipul de resursă

Dacă doriți doar să vedeți ce fișier (e) font (e) este utilizat (ă) pe o anumită pagină, dați clic Font:

1612037526 469 Chrome DevTools Cum se filtreaza solicitarile de retea
Filtrarea solicitărilor de rețea numai după fișierele de tip „font”

Sau dacă doriți doar să vedeți fișierele de soclu web încărcate pe o anumită pagină, faceți clic WS:

1612037526 862 Chrome DevTools Cum se filtreaza solicitarile de retea
Filtrarea cererilor de rețea numai prin fișiere de tip „socket web”

De asemenea, puteți face un pas mai departe și le puteți vedea pe ambele Font & WS dosare împreună. Pur și simplu faceți clic pe Font mai întâi și apoi cmd Click pe WS pentru a selecta file multiple. (Dacă vă aflați pe o mașină Windows, puteți selecta mai multe utilizând ctrl clic).

1612037526 990 Chrome DevTools Cum se filtreaza solicitarile de retea
Selectarea multiplă a mai multor tipuri de resurse făcând clic pe “cmd” pe tipuri

Asta este pentru acest tutorial. Dacă ți s-a părut util, împărtășește-l cu colegii tăi și spune-mi ce părere ai și tu twitter.com/adeelibr.