miércoles, 3 de septiembre de 2008

Chrome - inspector de carga

Me quito el sombrero ante google, acabo de probar el nuevo google chrome y es acojonante. Como estoy desarrollando una aplicación web basada en php, javascript y bla bla bla, lo he probado y me ha salido un inspector de código que te da la velocidad a la que ha cargado la página, los elementos que ha cargado y los errores obtenidos.


Como se puede ver se obtiene el tiempo de carga de la página y los errores obtenidos en cada uno así como que elemento se carga y en que orden.

Además tenemos un debugger de javascript:


Ahi podemos ver los scripts que están cargados en el explorado.
Podemos ver y poner breakpoints en cada codigo javascript.
Evaluar expresiones.
...

Estas son las opciones que nos permite:

$ help break
usage: break [location]
location is one of | | |
$ help break_info
usage: break_info [breakpoint #]
list the current breakpoints, or the details on a single one
$ help clear
usage: clear
$ help help
usage: help [command]
$ help print
usage: print
$ help scripts
usage: scripts


Otra pantalla interesante es:


En ella podemos la diferente estructura de la página web, lo que se llama DOM, y todas las propiedades que ella tiene.

Por ahora no puedo profundizar más en chrome, si tengo alguna noticia más intentaré documentarlo un poco.

6 comentarios:

  1. La nota puntillosa: el inspector de código no lo ha desarrollado Google, sino la gente de Webkit y lleva disponible desde hace muchooo tiempo.

    ResponderEliminar
  2. Bueno yo tenía entendido que el nuevo motor javascript se llama webkit y que lo ha desarrollado google, eso es por lo menos lo que había entendido en los foros que he leido y en algún que otro video, Pero si tu me dices lo contrario será así, además por lo que he visto ahora las herramientas para desarrollador le dan mil vueltas a todo lo que hay ahora en cualquier navegador, siempre claro solo conozco al 99% firefox, ie, no puedo hablar de los otros miles de navegadores que hay.

    Gracias por tu post.

    ResponderEliminar
  3. Ellos han desarrollado un motor nuevo de Javascript que se llama v9 pero el núcleo del navegador es Webkit, que viene de KTHML, el motor que usa Konqueror y Safari.

    En el cómic que publicaron lo explican.

    El inspector de código tan chulo que pones en la primera y tercera captura de pantalla es parte de Webkit.

    No se si conoces las extensiones webdeveloper y firebug para firefox. Después de probarlas no considero que le den mil vueltas las herramientas nuevas que ha metido Google en su navegador, aunque no están nada mal.

    ResponderEliminar
  4. Como menciona Guillermo, el browser engine WebKit no es de Google, sino que es un proyecto Open Source de Apple (http://webkit.org). En realidad el Javascript engine creado por Google se llama V8 (http://code.google.com/p/v8/).

    Esa combinación de Firebug, WebDeveloper e incluyo además ColorZilla (obtener el codigo de color de cualquier elemento por el que pases el mouse) y MeasureIt (para medir distancias en pixeles, aunque WebDeveloper tiene una opcion similar), es la mejor herramienta que cualquier desarrollador web pueda usar y practicamente imprescindibles.

    ResponderEliminar
  5. Hola, estoy probando Google Chrome, y ahora me aparece ese inspector, no se como desactivarlo, te agradezco si me puedes colaborar. Gracias

    ResponderEliminar
  6. hola "ael", sabes yo uso bastante el inspector de elementos pero no puedo visualizar la primera pantalla que pones, en un inicio si podia verlo, pero no se que paso que ahora ya no lo puedo ver. como hago para activarlo.
    gracias por la ayuda!!!

    ResponderEliminar