7 nuevas funciones de Google Chrome que debe conocer

Además de su función como un gran navegador de Internet para el día a día, Google Chrome también es una gran herramienta para el desarrollo web a través de DevTools.

DevTools se actualiza constantemente con nuevas versiones. Por lo tanto, es posible que haya algunas funciones y DevTools que quizás se haya perdido en el camino. Por lo tanto, aquí tienes 7 de las funciones más nuevas de Google Chrome que debes conocer .

Introducción: experimento de Chrome DevTools

Chrome tiene algunas características interesantes experimentales, que están ocultas o deshabilitadas de forma predeterminada. Para activar estas funciones experimentales, acceda a chrome://flags/#enable-devtools-experimentsla barra de direcciones de Chrome, habilite la opción DevTool Experiment y reinicie Chrome .

Después de reiniciar, inicie DevTools y haga clic en el ícono de ajustes en la parte superior derecha del panel DevTools, y debería ver la pestaña “Experimento” en la barra lateral izquierda. Marque las funciones que desee activar.

>1.>

Hoy en día, tener un sitio web optimizado para dispositivos móviles es imprescindible. Con Chrome, puede depurar sitios web en modo móvil a través de la función Mobile Emulator , que ha sido totalmente renovada y agregada con un montón de nuevas capacidades.

>Para>ahora está equipado con reglas para que pueda ver exactamente el tamaño de la ventana gráfica en el que se encuentra el sitio web.

2. Selecciones de cursores múltiples

¿Desea editar varias líneas juntas en un archivo fuente de la manera que puede con Sublime Text? Chrome ahora admite varios cursores y selección en DevTools. Use Ctrl + Click o Cmd + Click para seleccionar varias líneas a la vez.

>3.>

Ahora también puede probar la respuesta y el rendimiento de su sitio web en varias conexiones a través de DevTools. En DevTools, presione Esc para iniciar Console Drawer y luego seleccione Emulation. En la pestaña Red, seleccione el tipo de velocidad para limitar su conexión de red y vea cómo funciona su sitio web dentro de la velocidad seleccionada.

>4.>

Google Chrome ahora está equipado con el modo sin conexión, que le permite abrir sitios web mientras está realmente sin conexión. Si está desarrollando una aplicación web que pretende funcionar incluso cuando los usuarios están desconectados, esta función sería realmente útil. Para habilitar el modo sin conexión, diríjase a chrome://flags/#enable-offline-modetravés de la barra de direcciones y habilite la opción “Habilitar el modo de caché sin conexión”.

>No>

5. Arrastra y suelta HTML en el editor.

A veces es necesario copiar un elemento HTML a su editor. En lugar de copiarlo y pegarlo manualmente en su editor de texto, simplemente puede arrastrar el DOM y soltarlo en el editor .

>Actualmente,>

6. Auditoría de CSS

Ahora también puede auditar su CSS, como inspeccionar reglas de estilo inútiles que no se utilizan en la página web. Para hacerlo, vaya a la pestaña “Auditorías” y haga clic en “Ejecutar” para comenzar a auditar el CSS. Verá una lista de clases / selectores que no se utilizan en la página actual, como se muestra a continuación.

>7.>

Con Source Map, puede ver la versión no compilada o no compilada de CSS o JavaScript (JS). Esta función es particularmente útil para los desarrolladores que componen estilos o JS usando preprocesadores como Sass, LESS o CoffeeScript. Con el mapa de origen habilitado, puede encontrar la ubicación del código en JS o CSS generado en un determinado número de línea y columna. La última versión de Chrome le permite agregar el mapa de origen manualmente.

Para hacer esto, asegúrese de estar en el panel de origen y luego abra un archivo. Después de eso, haga clic con el botón derecho y seleccione Agregar mapa de origen. para agregar el .maparchivo.

>

Deja un comentario