Cómo utilizar las herramientas de desarrollo del navegador Chrome de forma más profesional

Como sugiere el nombre, Chrome Dev Tools es una herramienta que permite a los desarrolladores web intervenir y manipular páginas web a través de una aplicación de navegador y depurar y probar páginas web o aplicaciones web a través de la herramienta. Puedes hacer muchas cosas interesantes con esta herramienta:

◆ Depurar problemas de interfaz

◆ Usar puntos de interrupción para depurar código JavaScript

◆ Optimizar tu código

p>

Para abrir las herramientas de desarrollador, solo necesita hacer clic con el botón derecho del mouse en cualquier lugar de la página y seleccionar "Inspeccionar elemento", o seleccionar "Herramientas > Más herramientas > Herramientas de desarrollador en el menú en la esquina superior derecha". .

Las siguientes demostraciones de muestra se realizan en el navegador Canary de Google Chrome.

1. Edite rápidamente elementos HTML

Intente las siguientes operaciones:

◆Seleccione el panel de elementos

◆Seleccione un elemento en el panel de elementos Elemento DOM

◆Haga doble clic en la etiqueta del elemento DOM que desea abrir para editarlo

Una vez completada la edición, la etiqueta se actualizará y cerrará automáticamente. Actualizar y cerrar etiquetas automáticamente

2. Vaya al número de fila especificado

Puede seleccionar el archivo especificado en el panel de origen y utilizar la función ":Filas:Columnas". Intente usar el atajo CMD O.

3. Expandir todos los nodos secundarios

Intente:

◆Seleccionar panel de elementos

◆Seleccione un elemento DOM y luego presione y mantenga presionada la tecla Alt. Haga clic con el botón izquierdo del mouse donde se corta el título para expandir todos los nodos secundarios.

4. Cambiar la ubicación de las herramientas de desarrollo

Las herramientas de desarrollo están ubicadas en diferentes ubicaciones. >Intente usar la tecla de acceso directo: CMD Shift D: Hay tres opciones para configurar las herramientas de desarrollo:

◆ No mostrar herramientas de desarrollo en la ventana

◆ Mostrar herramientas de desarrollo en la lado derecho de la ventana

◆ Muestra las herramientas de desarrollo en la parte inferior de la ventana

5. Busca elementos DOM a través de selectores CSS

Intenta usar las teclas de acceso directo: CMD F / CTRL F e ingresa la clase que necesitas Nombre o nombre ID, busca el selector correspondiente.

6. Material y paleta personalizada

Puedes hacer clic en el pequeño ícono frente al código de color y luego seleccionar:

◆Color de página: este panel puede Generado automáticamente desde su sitio web (en CSS)

◆Material Design: este panel genera automáticamente colores desde el panel Material Design para generar colores automáticamente

7. Cursor múltiple

Mueva el cursor manteniendo presionado CMD y haciendo clic para agregar varios cursores. También puede usar CMD U para deshacer el último cursor seleccionado.

8. Copiar imagen como URI de datos

◆Seleccionar panel de red

◆Seleccionar imagen en panel de recursos

◆ Haga clic derecho en imagen y seleccione Copiar imagen como URI de datos. Imagen como URI de datos"

9. Activar pseudoclase

◆Haga clic derecho en el elemento en el panel izquierdo y seleccione "Forzar estado del elemento"

◆ Seleccione también el ícono para cambiar el estado de la pseudoclase en el panel derecho

◆Seleccione también el ícono para cambiar el estado de la pseudoclase en el panel derecho

.

Icono para cambiar el estado de pseudoclase

10. Seleccione varias columnas arrastrando y soltando

◆Seleccione el panel de origen

◆Seleccione el que desee en el origen editor de panel Archivo

◆Mantenga presionado el mouse en el elemento del panel izquierdo y seleccione Forzar estado del elemento

◆Además, seleccione el ícono para el estado de pseudoclase en el panel derecho

◆ p>

◆Mantenga presionado Alt y arrastre el mouse

11 Use $0 para obtener el elemento actual

◆Seleccione el panel de elementos

◆Seleccione. el elemento DOM en el panel de elementos

◆Haga clic en la consola y escriba $0 para obtener el elemento actual

◆Haga clic en la consola y escriba $0 para obtener el elemento actual

◆Puedes obtener el elemento actual. Escriba $0 para obtener el elemento actual

12. Mostrar en elemento

Seleccione el nodo DOM:

◆Haga clic derecho en el panel de la consola

◆Seleccione para mostrar en el panel de elementos

◆Seleccione para mostrar en el panel de elementos

13. Ver detectores de eventos

◆Seleccione el panel de elementos

p>

◆Seleccione un evento en el menú de escucha de eventos

◆Haga clic derecho en un evento en el panel de la consola

◆Seleccione un evento en el panel de la consola

p>

◆Haga clic derecho en el evento en el panel de la consola

◆Seleccione Mostrar definición de función en el panel de la consola y luego podrá ver el código fuente correspondiente

14 .Vista previa de flexibilización

◆Haga clic en el icono de flexibilización (icono morado) para obtener una vista previa de la flexibilización

◆Puede obtener una vista previa de un evento navegando a su código fuente.

◆ Puedes navegar para seleccionar otra moderación o un modo personalizado.

15. Consultas de medios

◆Haz clic en el ícono del teléfono en la esquina superior izquierda para seleccionar el dispositivo. modo

p>

◆Haga clic en la barra de herramientas del punto de interrupción ("azul", "verde", "naranja") para seleccionar un punto de interrupción

Si puede hacer clic en la barra de herramientas, Puede encontrar la barra de herramientas correspondiente.

16. Web Filmstrip

El "Filmstrip" muestra capturas de pantalla desde el principio hasta el final de la presentación de la página. Puede hacer clic en la captura de pantalla para ver una vista de estilo de línea de tiempo.

◆Seleccione el panel de red

◆Haga clic en el icono de registro

◆Recargar la página

17. >

Puede copiar la respuesta desde un recurso de red.

◆Seleccione el panel Red"

◆Seleccione el archivo que desee en el editor del panel Fuentes"◆ Ingrese el nombre del archivo e ingrese el fragmento de código en el panel derecho

◆Haga clic derecho en el nombre del archivo del fragmento de código y seleccione "Ejecutar"

19 Sensores de simulación de dispositivos

Puede simular sensores de dispositivos móviles:

◆Pantalla táctil

◆Coordenadas geográficas

◆Acelerómetro

Puedes hacer esto:

◆Selecciona el panel "Elementos"

◆Seleccione "Simulación gt; Sensor" y haga clic en "Espacio de trabajo"

◆Seleccione el panel "Fuente"

◆Haga clic derecho en el panel "Fuente" y seleccione "Poner Agregar carpeta al espacio de trabajo". Agregar carpeta al espacio de trabajo"

◆Seleccione el archivo y haga clic derecho, luego seleccione "Asignar a recurso de red"

◆Agregar carpeta al espacio de trabajo. Haga clic y seleccione "Asignar a recursos de red" "

◆Modificar el código del archivo y ver

Lectura ampliada

◆Herramientas de desarrollo del navegador Chrome

◆ Herramientas de desarrollo del navegador Chrome