Chrome DevToolsEl mejor amigo de un desarrollador web, tiene muchos trucos y algunas características desconocidas.
La mayoría de los desarrolladores conocen los conceptos básicos, como cómo inspeccionar elementos en una página, pero hay muchas más funciones ocultas debajo de la superficie. El propósito de este artículo es desmitificar algunas de las características más útiles pero poco conocidas y mostrarle lo que pueden hacer por su proceso de desarrollo.
Elementos HTML de referencia
Chrome DevToolsUna de las características menos conocidas es la capacidad de hacer referencia a elementos HTML. Esto se puede hacer en dos sencillos pasos:
1. Abra Chrome DevTools y navegue hasta la vista Elementos.
2. Haga clic derecho en el elemento al que desea hacer referencia y seleccione Store as global variable.
Ahora que tiene una referencia al elemento HTML, puede acceder a él e inspeccionarlo en la consola.
punto de registro
Los puntos de registro son una forma de proporcionar información de depuración a la consola sin recurrir a console.log(). He estado usando esta característica desde que escuché sobre ella por primera vez y Logpointsme permiten limpiar la fragmentación de declaraciones en mi código base console.log.
Puede agregar nuevos haciendo clic con el botón derecho en DevToolscualquier sourcesfila de la pestaña y especificando la expresión a registrar Logpoint. Cuando se ejecute la línea, obtendrá su valor en la consola.
expresión en tiempo real
Las expresiones en vivo son una característica que muestra cambios en el valor de una expresión. Esto ayuda a localizar problemas con expresiones complejas (como las utilizadas en animaciones) o expresiones que varían ampliamente (por ejemplo, si está iterando sobre una matriz).
Todo lo que necesita hacer es hacer clic en Create live expressionsel botón (ojo a la izquierda de Filtro) y especificar la expresión que desea monitorear, y automáticamente mostrará su valor cuando cambie.
其他用途:Mostrar las coordenadas del mouse usando Live Expressions
consola.trace()
console.trace()es una utilidad que le permite saber dónde se realiza una llamada específica a una función específica. Imagine que tiene una función interna que se utiliza en diferentes lugares y causa problemas. Para erradicar este problema, primero debe averiguar en qué parte de su código se llama.
Observe cómo nuestro seguimiento de pila muestra innerFunctionuna llamada a y outterFunctionuna llamada a .
Esta es una excelente manera de solucionar problemas y descubrir exactamente en qué parte de su código falla algo.
Utilidades de la consola
Console UtilitiesEs una parte integral de la funcionalidad de las herramientas de desarrollo de Chrome. Console Utilities APIContiene un conjunto de funciones convenientes para tareas comunes.
Dos muy útiles son $()y $$()en lugar de document.querySelector()suma document.querySelectorAll(). devolverá la lista de nodos que espera y convertirá el resultado en una matriz para que pueda usar map()y filter().
en conclusión
Estas son sólo algunas de las características menos conocidas Chrome DevToolsque pueden facilitar su proceso de desarrollo. Con un poco de exploración, podrá encontrar más consejos que le ayudarán a optimizar su flujo de trabajo.
por fin
Compilé un conjunto de "Guías de entrevistas para empresas importantes de front-end", que incluye HTML, CSS, JavaScript, HTTP, protocolo TCP, navegador, VUE, React, estructura de datos y algoritmo. Hay 201 preguntas de entrevista en total. He realizado una respuesta para cada pregunta.Respuesta y análisis.
Los amigos necesitados pueden hacer clic en la tarjeta al final del artículo para recibir este documento y compartirlo de forma gratuita.
Parte de la exhibición del documento:
La extensión del artículo es limitada, por lo que los siguientes contenidos no se mostrarán uno por uno.
Los amigos que lo necesiten pueden hacer clic en la tarjeta a continuación para obtenerla gratis