Como desarrolladores front-end, pasamos la mayor parte del tiempo en el navegador con DevTools abierto (casi siempre, a menos que estemos viendo YouTube ... a veces incluso entonces).
Una de las secciones principales de DevTools es la networkpestaña. Hay un par de cosas que puede hacer en la networkpestaña, como las siguientes:
- Buscar solicitudes de red por mensaje de texto
- Buscar solicitudes de red por expresión de expresiones regulares
- Filtrar (excluir) las solicitudes de red
- Utilice el filtro de propiedades para ver las solicitudes de red de un dominio determinado
- Encuentra solicitudes de red por tipo de recurso
Para los propósitos de este tutorial, estoy usando la página de inicio de freeCodeCamp , freecodecamp.org/news . Simplemente vaya a la página y abra la networkpestaña.
Puede ver la networkpestaña presionando cmd + opt + jen su Mac o ctrl + shift + jen Windows. consoleAbrirá la pestaña en DevTools de forma predeterminada.
Una vez que la consolepestaña esté abierta, simplemente haga clic en la networkpestaña para hacerla visible.
Una vez que la networkpestaña está abierta podemos comenzar nuestro tutorial.
Vamos a empezar
Asegúrese de que la página correcta esté abierta (freecodecamp.org/news) y que el panel de pestañas "red" esté abierto en DevTools:
- El cuadro verde aquí ilustra el icono que puede ocultar / mostrar el área de filtro en la pestaña del panel de red.
- El cuadro rojo aquí ilustra el cuadro del área de filtro. Con este cuadro podemos filtrar las solicitudes de red.
Buscar solicitud de red por mensaje de texto
Escriba analyticsen el cuadro de texto Filtro. Solo analyticsse muestran los archivos que contienen el texto .
Buscar solicitud de red por expresión regular
Escriba /.*\min.[c]s+$/. DevTools filtra los recursos con nombres de archivo que terminan con un min.cseguido de 1 o más scaracteres.
Filtrar (excluir) la solicitud de red
Escriba -min.js. DevTools filtra todos los archivos que contienen min.js. Si cualquier otro archivo coincide con el patrón, también se filtrará y no será visible en el panel de red.
Utilice el filtro de propiedad para ver la solicitud de red de un dominio determinado
Escriba domain:code.jquery.comen el área de filtro. Solo mostrará las solicitudes de red que pertenecen a la URL code.jquery.com.
Buscar solicitud de red por tipo de recurso
Si solo desea ver qué archivo (s) de fuente se está utilizando en una página determinada, haga clic en Font:
O si solo desea ver los archivos de socket web que se cargan en una determinada página, haga clic en WS:
También puede ir un paso más allá y ver ambos archivos Font& WSjuntos. Simplemente haga clic en Fontprimero y luego cmdhaga clic en WSpara seleccionar varias pestañas. (Si está en una máquina con Windows, puede realizar una selección múltiple haciendo ctrlclic).
Eso es todo por este tutorial. Si lo encontró útil, compártalo con sus colegas y háganme saber lo que piensa también en twitter.com/adeelibr .