Herramientas de desarrollo de Chrome Tutoriales, sugerencias, trucos

Google Chrome es uno de los buscadores web populares para desarrollo web, debido a sus funciones avanzadas. Herramientas de desarrollo de Chrome puede ser muy útil durante la depuración. La mayoría de nosotros ya sabemos que podemos editar el CSS en vivo usando las herramientas de desarrollo de Chrome, pero hay más consejos que compartiremos hoy.

Herramientas de desarrollo de Chrome consejos

Hay muchos trucos desconocidos y ocultos de Chrome Dev Herramientas y estaremos buscando los trucos más útiles entre ellos. Para abrir las herramientas de desarrollador en Chrome, presione F12 en su teclado y pruebe los siguientes trucos.

1. Buscar y abrir cualquier archivo

Cuando estamos haciendo desarrollo web, trabajamos con muchos HTML, CSS, JS y otros archivos. Cuando queremos depurar algo, abrimos herramientas de Chrome Dev. Puede buscar rápidamente y encontrar el archivo particular para facilitar su trabajo. Simplemente, presione Ctrl + P y comience a escribir el nombre del archivo. Esto le ayuda a encontrar el archivo particular de la lista de archivos.

2. Buscar dentro del archivo fuente

En el truco anterior, llegamos a saber cómo buscar un archivo en particular. Incluso puede buscar una cadena en particular en todos los archivos cargados. Presione Ctrl + Shift + F para buscar una cadena en los archivos. También admite expresiones regulares.

3. Ir a la línea particular

Una vez que haya abierto cualquier archivo de origen y desee pasar a una línea en particular, presione Ctrl + G e ingrese el número de línea y presione enter.

4. Seleccionar elementos DOM en la pestaña Consola

Dev Tools también le permite seleccionar elementos en la consola.

• $ () - Devuelve la primera aparición del selector CSS correspondiente.
• $$ () - Devuelve la matriz de elementos que coinciden con el selector CSS dado.

Para obtener más comandos de consola, dirígete a esta publicación.

5. Utilice múltiples caretas

A veces, desea configurar múltiples caret en diferentes lugares y puede hacerlo fácilmente en las herramientas de desarrollo de Chrome manteniendo presionada la tecla Ctrl y haciendo clic donde desee ubicarlas. Luego comience a escribir y verá que se coloca en varios lugares seleccionados.

6. Conservar registro

Conservar registro lo ayuda a conservar el registro incluso si la página está cargada. Marque la opción al lado de Conservar registro en el registro de la Consola y se conserva el registro. Esto muestra el registro antes de la página en descarga y es útil para investigar los errores.

7. Use el embellecedor de código incorporado

Chrome Dev Tools tiene el embellecedor de código incorporado llamado pretty print "{}". Developer Tool muestra el código minimizado y no es tan fácil de leer. Haga clic en el botón de impresión bonita que se muestra en la parte inferior izquierda del archivo de código abierto, para mostrar el archivo de origen en el formato legible para humanos.

8. ¿Tu sitio web es compatible con dispositivos móviles? Verifíquelo aquí

Chrome Dev Tools también nos permite verificar si un sitio web es compatible con dispositivos móviles o no. Puede verificar cómo se ve su sitio web en varios dispositivos. Dirígete a las herramientas de Chrome Dev y en la pestaña Emulación , puedes archivar varios dispositivos. Seleccione el dispositivo que desea y pruebe cómo se ve su sitio web en ese dispositivo.

Para obtener más información, consulte el siguiente video.

9. Emular sensores y ubicación geográfica

Incluso puede emular los sensores como la pantalla táctil y los acelerómetros. Incluso puedes emular la ubicación geográfica. Para hacer esto, vaya a Emulación -> Sensores.

10. Seleccione la siguiente aparición de la palabra actual

Si desea reemplazar la palabra en todo lo que ocurre, seleccione la palabra y presione Ctrl + D para seleccionar la siguiente aparición de la palabra seleccionada. El, puede editar esa palabra en todas sus ocurrencias en una toma.

11. Alter Color Format

Simplemente use Shift + Click en la vista previa del color para cambiar las alteraciones entre los formatos rgba, hexadecimal y hsl.

12. Agregar cambios a los archivos locales a través del área de trabajo

Podemos editar archivos de origen y hacer algunos cambios en CSS, Java Script y en otros archivos en las herramientas de desarrollo de Chrome. Para agregar estos cambios a los archivos locales, aquí no es necesario copiar y pegar los cambios desde el espacio de trabajo a los archivos en el disco. Las herramientas de Chrome Dev le permiten hacer coincidir los archivos y actualizar el archivo local con los cambios que ha realizado en las herramientas de desarrollo. Para hacer esto, haga clic derecho en el archivo fuente en el lado izquierdo en la pestaña Fuentes y seleccione Agregar carpeta al área de trabajo.

Para obtener más información sobre espacios de trabajo, diríjase a Chrome.com.