Secretos del inspector de WebKit (Chrome, Safari)

Para quien no lo sepa el inspector es una herramienta parecida al Firebug de firefox pero para los navegadores que esten basados en Webkit. Para acceder a él tan solo tenéis que estar ubicados en una página web y apretar el botón derecho de vuestros ratones donde veréis la opción "Inspeccionar elemento".

Os voy a mostrar unos cuantos secretos que me he encontrado para el Inspector de Webkit:

Arrastra y suelta elementos :

Lo puedes hacer con cualquier elemento HTML y posicionar lo donde más te plazca. Tanto para ver como queda como por pura diversión.

Enlaces rápidos a elementos de la consola :

Selecciona un elemento y marcalo en la consola como $0 para que sea utilizado por el script. Si usas jQuery, puedes introducir $ ($ 0) para utilizar la funcionalidad de jQuery.

Depura las modificaciones del DOM :

Haz clic derecho en un elemento del inspector y habilita ‘Break on Subtree Modifications’: cada vez que un script atraviesa ese elemento y lo modifica, el depurador aparece de forma automática para poder inspeccionar lo que está sucediendo.

Botones de estilos :

En el lado izquierdo, en la pestaña de "Styles" tenemos dos botones más que utiles : el primero nos permitiría añadir una nueva propiedad CSS a cualquier elemento HTML que escojamos. Y en el segundo podrás comprobar al momento como afectan al elemento seleccionado las propiedades de CSS active, hover, focus y visited.

Salva en un archivo los cambios del CSS :

Si haces click en la hoja de estilos que hayas estado modificando verás como se abre un panel donde los cambios que realices se quedan guardados, ahora, si haces click derecho puedes guardar esa hoja de estilos. Este truco no se aplica cuando as añadido el selector usando "+" o usando la propiedad "element.style{}".

Consola, escribir más de una línea de código.

En la parte de la consola del inspector si después de introducir una línea de código apretamos "intro", el código se ejecuta. Para poder escribir mas de un línea utilizad "shift+enter".

Para borrar todo el código de la consola de un plomazo utilizad "ctrl+L"

Rastreo de excepciones no capturadas.

Desde la pestaña de "Sources" si le damos double-click al botón "||", nuestro código se romperá cuando una expresión no capturada ocurra preservando la llamada a la pila y el estado actual de la aplicación.

Ir a... en la pestaña de "Sources".

Si presionamos CMD+O nos mostrará todos los archivos disponibles, CMD+SHIFT+O nos mostraría las funciones (clases) del archivo actual y si presionamos CMD+L vamos a una línea en especial.

Haz "Favorita" a una expresión o variable.

En vez de escribir y escribir el nombre de una variable o expresión podrías añadirla a la sección de "Watch Expressions" desde la pestaña de "Sources". Cada vez que refresques o modifiques el valor lo podrás ver en dicha ventana.

Depuración XHR.

Desde la pestaña de "Sources" abre la sección "XHR Breakpoints", aquí puedes especificar cualquier URL (incluso substring) en la que tu código debiera de romper ante una petición XHR. También puedes indicar que rompa en cada XHR.

Carga eventos salvados por terceros.

En vez de enseñar una captura de pantalla del código, salva el "timeline" para después cargarlo de manera local.

Conclusión.

Este tipo de herramientas son de gran utilidad para todos los programadores, tanto los noveles como los más diestros. A mí me ayuda bastante a entender conceptos del CSS y ahora que estoy liado con el javaScript es una ayuda doble. Desde mi punto de vista prefiero el WebKit antes que Firebug ya que lo encuentro demasiado lento si utiliza el Mac.

Fuente: http://blog.joocode.com/browsers/12-things-about-the-webkit-inspector-i-didnt-know/

comments powered by Disqus