El sábado se celebró Codemotion, un evento que reúne técnicos, desarrolladores y estudiantes de todas las comunidades y lenguajes. Es un evento con una trayectoria de 5 años en Italia y ha llegado a España, para quedarse, el gran número de asistentes y la larga lista de espera, lo avalan. Más de 50 charlas de 45 minutos repartidas en 7 salas, un total de 42 horas de conferencias, una gran cantidad de conocimiento que habrá que ir repasando poco a poco.
Tuve la oportunidad de impartir un taller sobre las Chrome Developer Tools, del que podría haber estado hablando el doble de tiempo. Pero ya habrá otra oportunidad a través del GTUG Madrid donde poder analizar y disfrutar de la potencia de esta WebApp incrustada en Google Chrome.
Las claves del taller fueron:
- Cambiar el estilo de las Chrome Developer Tools.
- La consola es algo más que el
console.log:- Lee la documentación de las Herramientas para desarrolladores de Chrome: Consola.
- Échale un ojo a la Command Line_API y Console API de Firebug (compatible con las devtools).
- Revisa las Flags y activa las opciones que no trae el navegador por defecto en
chrome://flags/. - El debug remotodará mucho que hablar:
- Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222. - Windows:
chrome.exe --remote-debugging-port=9222. - Linux (chromium):
chromium-browser --remote-debugging-port=9222.
- Mac:
- Para estar a la última prueba Chrome Canary.
Puedes ver la presentación en Chrome Developer Tools en Codemotion 2012.
Buenas Jorge. Tuve el placer de ver tu presentación sobre este tema, y tengo que decirte que me resulto muy útil. Estaba “atado” a Firefox por el Firebug, y ahora veo que puedo hacer todo lo que hacia y mas con el Google Chrome Inspector. He empezado a trastear un poco con el, y me ha surgido una duda:
¿Cómo puedo saber sobre que elementos tengo que aplicar el custom.css? Me explico. Me he bajado un theme para editar el estilo del inspector, esta muy bien pero quiero editar el color de los atributos css que aparecen en la columna derecha y no soy capaz por que no se que clase tienen esos elementos. Muchas gracias!
Hola Jaime,
Me alegro que te migres, veras como tu RAM te lo agradece.
La verdad es que antes era más fácil, podías inspeccionar el propio inspector. Ahora hay que utilizar otras técnicas:
Opción sencilla: Abrir un Chrome con remote debugging y desde la Chrome Canary debugeas una de las ventanas. Pulsas el atajo de teclado del inspector (⌥⌘i ó Ctrl + Shift + i) accedes al inspector de Canary el cual inspeccionará el inspector de Chrome. Importante el orden, porque si no te saldrá el inspector de Canary y verás el css de Canary, así que abre con remote debugging al que le quieras cambiar el Custom.css
Opción complicada: Descargarse devtools_frontend. Puedes ver como se hace en la página de Contributing to Chrome Developer Tools.
Espero haberme explicado, si no, en la charla que estoy moviendo con GTUG Madrid contaré como hacerlo ;)
Muchas gracias, al final con tu ayuda lo he conseguido. He puesto el resultado de mi theme en mi site, por si os interesa verlo: http://www.vissit.com/aplicar-estilo-a-la-barra-lateral-google-chrome-inspector
Pingback: Aplicar estilo a la barra lateral Google Chrome Inspector | vissit