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

Consejos sobre las herramientas de desarrollo de Chrome

Hay muchos trucos ocultos y desconocidos de Chrome Dev Tools y vamos a buscar los trucos más útiles entre ellos. Para abrir las herramientas de desarrollo en Chrome , presione F12 en su teclado y pruebe los siguientes trucos.

1. Encuentra y abre cualquier archivo

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

2. Busque 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 una línea en particular

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

4. Selección de elementos DOM en la pestaña Consola^(Console)

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

• $() – devuelve^(Returns) la primera aparición del selector de CSS coincidente.^(CSS)
• $$() – devuelve la matriz de elementos que coinciden con el selector CSS dado.^(CSS)

Para obtener más comandos de consola, diríjase a esta publicación.^{(this post.)}

5. Haz uso de múltiples símbolos de intercalación

A veces, desea configurar varios símbolos de intercalación en diferentes lugares y puede hacerlo fácilmente en las herramientas de Chrome Dev manteniendo presionada la tecla ^{(Chrome Dev)}Ctrl y haciendo clic donde desee colocarlos. Luego empieza a escribir y verás que se coloca en varios lugares seleccionados.

6. Conservar registro

Conservar^(Preserve) registro lo ayuda a conservar el registro incluso si se carga la página. Marque la opción junto a Conservar registro^{(Preserve log )} en el registro de la consola^(Console) y se conservará el registro. Esto muestra el registro antes de que la página se descargue y es útil para investigar los errores.

7. Use un embellecedor de código incorporado

Chrome Dev Tools tiene el embellecedor de código incorporado llamado pretty print “{}” . La herramienta de desarrollo muestra el código minimizado y no es tan fácil de leer. Haga clic^(Click) en el bonito botón de impresión que se muestra en la parte inferior izquierda del archivo de origen abierto, para mostrar el archivo de origen en el formato legible por humanos.

8. ¿Su sitio web es compatible con dispositivos móviles? Compruébalo aquí

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

Para obtener más información, echa un vistazo al siguiente vídeo.

9. Emular sensores y ubicación geográfica^{(Geographical Location)}

Incluso puede emular sensores como pantallas táctiles y acelerómetros. Incluso puedes emular la ubicación geográfica. Para hacer esto, dirígete a Emulation -> Sensors.

10. Seleccione la siguiente ocurrencia de la palabra actual

Si desea reemplazar la palabra en todas sus apariciones, seleccione la palabra y presione Ctrl + D para seleccionar la siguiente aparición de la palabra seleccionada. Luego, puede editar esa palabra en todas sus apariciones de una sola vez.

11. Alterar formato de color

Simplemente use Shift + Click en la vista previa de color para cambiar los cambios entre formato rgba, hexadecimal y hsl.

12. Agregue^(Add) cambios a los archivos locales a través del espacio de trabajo

Podemos editar archivos fuente y hacer algunos cambios en CSS , JavaScript y otros archivos en las herramientas de Chrome Dev . Para agregar estos cambios a los archivos locales, no es necesario copiar y pegar los cambios del espacio de trabajo a los archivos en el disco. Las herramientas de Chrome Dev^{(Chrome Dev)} le permiten hacer coincidir archivos y actualizar el archivo local con los cambios que ha realizado en las herramientas de desarrollo. Para hacer esto, haga clic con el botón derecho en el archivo de origen en el lado izquierdo de la pestaña Fuentes y seleccione ^{(Sources )}Agregar carpeta al espacio de trabajo.^{(Add Folder to workspace.)}

Espero que esto ayude.

Chrome Development Tools Tutorials, Tips, Tricks

Google Сhrome is onе of the popular web browsеrs for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Mejor Google Chrome Tips and Tricks para usuarios de Windows PC

• 3 consejos y trucos útiles para usar notas adhesivas

• Cómo descargar un Font de un Website usando Developer Tools

• Restart Chrome, Edge or Firefox sin perder pestañas en Windows 11/10

• Consejos para usar el Inspect Element de Google Chrome browser

• Solucionar problema: Google Chrome usa mucho procesador (CPU) cuando visito un sitio web

• Go incognito con un shortcut key en Chrome, Edge, Firefox, y Opera

• Cómo configurar un servidor proxy en Chrome, Firefox, Edge y Opera

• Cómo poner Google Chrome en Dark Mode

• Put Chrome y otros navegadores en pantalla completa (Edge, Firefox y Opera)

• Cómo enviar un texto desde la computadora con mensajes Android

• Cómo corregir 403 Forbidden Error en Google Chrome

• Habilitar Flash para Specific Websites en Chrome

• Cómo reparar el código de error de Netflix M7111-1101

• Cómo ir de incógnito en Chrome, Firefox, Edge y Opera

• Cómo borrar las cookies de Chrome: Todo lo que necesitas saber

• ¿Dónde están las cookies almacenadas en Windows 10 para todos los mejores navegadores?

• Cómo silenciar una pestaña en Chrome, Firefox, Microsoft Edge, y Opera

• Cómo bloquear las cookies de terceros en Chrome, Firefox, Edge, y Opera

• Cómo imprimir un artículo sin anuncios en todos los navegadores principales