Averiguar los problemas del sitio web con herramientas para desarrolladores de chrome o firebug

Si usted ha estado siguiendo mi jQuery tutoriales hasta el momento, es posible que ya se han topado con algunos problemas de código y no se sabe cómo solucionarlos. Cuando se enfrentan a un poco no funcional de código, es muy difícil determinar realmente la línea de código - y ahí es donde las herramientas de depuración y desarrolladores entran en juego.Fabricación de la Web interactiva: Una introducción a jQueryFabricación de la Web interactiva: Una introducción a jQueryjQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web moderna - que hace que los sitios web interactiva. No es la única biblioteca de javascript, pero es el más desarrollado, más apoyado, y más ampliamente utilizado ....Lee mas

Así que antes de continuar con algo de código jQuery más complejo, pensé que podríamos examinar las herramientas disponibles en el navegador más popular del mundo - Cromo. Estas herramientas no son sólo para javascript sin embargo - que también puede ayudar a depurar las peticiones AJAX, recursos de su sitio necesita cargar, examinan la estructura del DOM, y un montón de otras cosas.

Sin amor para Firefox?

A pesar de que estoy yendo específicamente para referirse a las herramientas para desarrolladores de Chrome hoy a cabo de preferencia personal, y el hecho de que están integrados en el navegador, la misma funcionalidad está disponible en un plugin para Firefox llamada Firebug - la interfaz es casi idéntica, por lo que esta guía todavía debe aplicarse.Cómo instalar Firebug en IE, Safari, Chrome & ÓperaCómo instalar Firebug en IE, Safari, Chrome & ÓperaLee mas

El lanzamiento de las herramientas de depuración

Esto no podría ser más sencillo. En Chrome, simplemente pulse Ctrl-Shift-I (CMD-ALT-I en Mac) o clic derecho en cualquier y seleccione Inspeccionar elemento. Debería ver algo similar a lo siguiente:

Hay una ligera diferencia a estos dos métodos de lanzamiento de la consola de depuración. La tecla de acceso directo simplemente abrirlo en una vista por defecto, mientras que Inspeccionar elemento se centrará el árbol DOM sobre el elemento específico que se ha hecho clic derecho sobre. Lo que nos lleva al primer bit de funcionalidad impresionante que obtenemos de estas herramientas.

Vídeo: Cómo probar tu web en distintos dispositivos y velocidades de conexión con Chrome

Elementos & CSS

los Elementos ficha se divide en dos secciones- de la izquierda es el árbol DOM completa. Esto es similar al código fuente de la página, pero es claramente más útil.

Para empezar, ha sido parsed en una estructura de árbol, por lo que los elementos se pueden contraer y expandir, que le permite examinar los elementos hijos, padres y hermanos más, obviamente, que la sola lectura del código fuente. En segundo lugar, refleja los cambios dinámicos en la página resultante de javascript. Por ejemplo, si se supone que su jQuery para ser la adición de una clase a ciertos elementos en pageLoad, que se vería reflejado en que el árbol DOM, pero no la fuente de la página.

También puede editar el DOM allí mismo, haciendo doble clic sobre él. Sí, se puede usar esto para jugar y sitios web de edición para hacer capturas de pantalla tontas, por lo que es ideal para la experimentación sencilla.

Aquí soy yo jugando con la página de noticias de la BBC ...

En la parte derecha se puede ver cualquier regla CSS aplicados al elemento actual, incluyendo los que han sido invalidada por normas de orden superior (estos tienen una línea a través de ellos):

Puede ajustar estos, o simplemente eliminar la marca de una regla particular para ver qué pasaría.

Desenrollar los estilos “calculadas” se mostrará un resumen de todas las reglas CSS que se aplica actualmente. El número de línea y el enlace del archivo a la extrema derecha le saltar directamente al archivo de recursos que ha sido cargado desde, aunque en algunos casos puede ser un archivo minimizada (así que todo está en una línea).

Tener en cuenta que se guardará ninguno de los cambios que efectúe, por lo que la próxima vez que se actualiza la página será vuelto a la normalidad. Si estás jugando con el CSS, asegúrese de anotar exactamente lo que ha cambiado cuando se obtiene el resultado deseado.

Consola de errores

La segunda pestaña más importante en cuanto a mi uso diario de estas fantásticas herramientas de ir, es la consola de errores y depuración, la última pestaña de la lista. Para empezar, los errores de javascript van a ser mostrado aquí. Cuando se está empezando a cabo primero con jQuery, es posible encontrar algunos ejemplos de “$ Está definido” o “JQuery es indefinido” - un error común que significa que se ha olvidado de un enlace a jQuery en la cabecera. Si usted ve un error que no se puede descifrar, simplemente copiarlo en una caja de búsqueda de Google y usted más que probable encontrar un montón de otras personas que tenían el mismo problema.

El error también apuntará a la línea exacta de código en el que el error primero ocurrió- haga clic en él para ir directamente a esa línea y sección de código. Si esto es en uno de sus propios guiones, a menudo se puede señalar directamente al delincuente - si el error es más vaga sin embargo, puede apuntar al código fuente de jQuery que es completamente no legible.

Basta con decir que la consola es lo primero que se debe comprobar cuando algo no funciona bien, ya que es más que probable que se imprime un error allí.

El otro uso de la consola se encuentra a la salida de sus propias instrucciones de depuración personalizado. Usted puede enviar un poco de texto, como saben dejarse el guión ha llegado a un cierto punto:

console.log ("llegado a este bit en el código bien, ahora tratando de ...") -

O puede objetos enteros y variables de salida tan simples como:

console.log (miVar) -

Probar ahora mediante el uso de algunos jQuery básica para seleccionar algunos elementos, a continuación, salida de ellos, para ver cómo se ven. Puede utilizar esto para comprobar cuáles son sus selectores han encontrado, por ejemplo.

Red

La herramienta final en el conjunto de herramientas de desarrollador que quería demostrar que hoy es el Red lengüeta. Para que esta ficha para la función, tiene que estar centrado en él y actualizar la página - que va a continuación, capturar todas aquellas peticiones que hace la página, para publicidad, javascript, CSS, imágenes - todo - y le da un desglose de la información acerca de que la interacción, incluyendo:

• nombre del archivo.
• tipo de petición (GET o POST).
• código de respuesta del servidor enviado de vuelta (200 OK, 304 sin modificar, etc).
• tamaño del archivo.
• sincronización.

Al hacer clic en un archivo individual se abre alguna información más detallada acerca de la interacción entre el navegador y el servidor. Para mí, esto es particularmente útil para depurar peticiones AJAX - se puede ver exactamente qué tipo de datos se han enviado con la petición, y la salida completa de la respuesta dada por el script del lado del servidor de recepción.

Vídeo: Instalar firebug

Resumen

Espero que he armado desarrolladores en ciernes con algunas herramientas adicionales. Si has encontrado este post útil, realmente apreciaría una parte, porque me hace sentir todo cálida y difusa en el interior, y me dice que quieres que escribo me gusta más. También celebro comentarios y retroalimentación - sobre todo, ¿Qué otras herramientas Cómo se utiliza como un desarrollador web? ¿Tiene un arsenal de plugins de Firefox a su disposición?