Problemas con el código de depuración de Chrome
A muchos desarrolladores front-end web les gustan las herramientas de desarrollo que vienen con este navegador, que es muy útil para el diseño front-end y la depuración de código.
Gracias a su excelente intérprete V8, el navegador Chrome tiene una excelente velocidad de ejecución de JavaScript y uso de memoria. Para el aprendizaje o desarrollo de la tecnología front-end html + css + javascript, el uso de herramientas de desarrollo de navegadores es esencial y también puede mejorar en gran medida la eficiencia del aprendizaje o desarrollo. Este artículo está basado en la versión 23.0.1271.10. Debajo de la ventana, la tecla de acceso directo para abrir las herramientas de desarrollador es F12.
1 Estructura funcional de la herramienta de desarrollador
La herramienta de desarrollador tiene ocho barras de funciones, a saber, etiqueta, recurso, red, código fuente, línea de tiempo, rendimiento, monitoreo y visualización (comando OK).
Panel binario
2.1 Funciones básicas del panel de control de elementos
El panel de control de elementos permite visualizar todo el contenido del árbol DOM, en función del contenido html o la página Las etiquetas de posicionamiento encuentran elementos en la página mientras cambian el contenido DOM. Las etiquetas generadas por código javascript solo se pueden ver de esta manera (no en su IDE).
Panel de control de componentes
Como se muestra arriba, seleccioné la etiqueta
y se seleccionarán los elementos correspondientes que se muestran en la página. Si quiero ubicar a Baidu ahora, puedo usar la lupa en la esquina inferior izquierda para seleccionar Baidu en la página, y encontrará la etiqueta correspondiente en el DOM. Esta característica es definitivamente una herramienta útil a la hora de depurar. La parte inferior muestra la relación jerárquica de la etiqueta actualmente seleccionada en el DOM.
Seleccione elementos para buscar funciones de etiquetas
También podemos realizar modificaciones temporales en el contenido, como cambiar el valor en la etiqueta Baidu que acabamos de encontrar para que aparezca "Depurar". página inmediatamente.
Modificar contenido temporalmente
2.2 Barra de funciones derecha
2.2.1 Vista de estilo
Al usar CSS, aparecerán algunas anulaciones de estilo A veces el estilo mostrado puede ser inesperado o el tamaño y la posición de los elementos (especialmente las ventanas) pueden ser visibles. Al mismo tiempo, también podemos realizar modificaciones temporales aquí y reflejarlas en la página (lo que ve es lo que obtiene y no será reemplazado por otros IDE).
Modificar estilo o tamaño
2.2.2 Vista de evento de registro de etiqueta
Si desea saber qué funciones están registradas para el botón "Baidu click", o ejecutar cuando el mouse hace clic. Cualquier función de JavaScript que se utilice se puede implementar a través de esta función.
Seleccione la etiqueta Baidu, ubique el evento de pulsación de tecla y busque la función de ejecución correspondiente.
2.2.3 Función de búsqueda
Ctrl+F puede abrir la búsqueda y encontrar lo que deseas, lo cual es muy práctico.
3 Panel de control de recursos
El Panel de control de recursos incluye todos los recursos descargados desde esta página, así como cookies locales y funciones avanzadas como el almacenamiento local en HTML5.
Panel de vista de recursos
4 Panel de control de red
El panel de control de red sigue siendo muy útil en dos aspectos. Una es encontrar que la imagen (css, js, etc.) no se puede cargar y puede consultar la ubicación solicitada a través de la red. En segundo lugar, al depurar ajax, puede ver sus solicitudes y adquisiciones. Por ejemplo, en el cuadro de entrada de Baidu, después de ingresar palabras clave, se mostrará automáticamente contenido interesante. Esto obviamente es un uso de ajax.
Visualización de carga de red
view/html/19114_1.html.