JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Activar herramientas experimentales avanzadas en Google Chrome Developer Tools

Si eres programador avanzado de lado cliente, con HTML5, CSS3 y JavaScript seguramente agradecerás toda la ayuda que puedas obtener a la hora de depurar y afinar tus aplicaciones. Las herramientas de desarrollo que vienen integradas con Google Chrome son una gran ayuda. En mi libro de JavaScript tengo un capítulo entero dedicado a ellas.

Además de las herramientas incorporadas de serie, si quieres poder sacar partido a herramientas más avanzadas que de momento Google no tiene terminadas (están en fase experimental) puedes hacerlo de forma sencilla y sin necesidad de descargar o instalar nada.

Para ello puedes seguir los siguientes pasos sencillos:

1.- Abre una nueva pestaña de Chrome y escribe chrome://flags

Esto abrirá los ajustes avanzados del navegador, que nos permiten ajustar infinidad de parámetros avanzados de funcionamiento del mismo:

Chrome_flags_1

2.- Dentro de los ajustes disponibles busca "Enable Developer Tools Experiments" (puedes usar CTRL+F para hacerlo).

Para que funcione el nuevo ajuste tendrás que reiniciar por completo Chrome y todas sus ventanas. Lo mejor es pulsar el botón inferior que aparece "Relaunch now" para conseguirlo.

3.- Abre las herramientas de desarrollador en cualquier página. Para ello pulsa F12. Pulsa el icono de ajustes, que es un icono con un engranaje ubicado en la parte inferior derecha de la ventana:

Chrome_flags_2

4.- En los ajustes de las Developer tools verás que ahora hay una nueva pestaña llamada "Experiments" con una serie de cuadros de verificación que podemos marcar para activar y desactivar características:

Chrome_flags_3

Desde aquí podemos activar algunas de estas características experimentales, como por ejemplo el soporte para sintaxis Saas de CSS desde las herramientas, o poder inspeccionar elementos canvas y sus contenidos.

Es especialmente útil la opción de "Snippets Support" (es de las pocas que está documentada), que nos permite crear nuestros propios fragmentos de código JavaScript y poder usarlos de manera inmediata mientras estamos depurando una página.

OJO: estas características son experimentales y por lo tanto pueden ser inestables y provocar cuelgues o cierres del navegador. Además no están documentadas, por lo que puede resultar difícil encontrar información en Internet sorbe cómo sacarles todo el partido.

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (3) -

Spain Eduardo Ozores Baltar

muy bueno
muy útil

Responder

Disculpa una pregunta lo que pasa es que ahorita estoy trabajando con un CMS y me estoy apoyandome mucho con Developer Tools.

Mi duda  es si Existe una parte donde pueda ver cual es el nombre del archivo que estoy trabajando para ubicarlo en las carpetas y así poder editarlo?

Responder

como desactivo el developer tools me sale cada rato y no me deja navegar

Responder

Agregar comentario