Cómo administrar los insectos con un depurador en su juego HTML5

May 28

Cuando usted está escribiendo bucles y condiciones, las cosas pueden ir muy mal en el código HTML juego y un depurador puede ser necesario. A veces es muy difícil saber qué es exactamente lo que está pasando. Afortunadamente, los navegadores modernos tienen algunas buenas herramientas que le ayudan a mirar a su código con más cuidado.

Un depurador es una herramienta especial que le permite ejecutar un programa en "cámara lenta", moviendo una línea a la vez para que pueda ver exactamente lo que está sucediendo. Google Chrome tiene un depurador integrado, así que vamos a empezar con eso.

Para ver cómo funciona un depurador, siga estos pasos:

  1. Cargar una página en Chrome.

    Puede agregar un depurador a la mayoría de los navegadores, pero Chrome tiene uno integrado, por lo que empezar con eso. Usted carga la página forLoops.html porque bucles son una fuente común de errores.

  2. Abra la ventana Herramientas de Desarrollo.

    Si hace clic derecho en cualquier parte de la página y elegir Inspeccionar Elemento, se obtiene una maravillosa herramienta de depuración.

    Cómo administrar los insectos con un depurador en su juego HTML5

  3. Inspeccione la página con la ficha Elementos.

    La pestaña por defecto muestra la página en una vista de esquema, que le permite ver la estructura de su página. Si hace clic en cualquier elemento en el esquema, se puede ver qué estilos están asociados con ese elemento. El elemento real también se destaca en la página principal para que pueda ver exactamente dónde está todo. Esto puede ser muy útil para comprobar el código HTML y CSS.

  4. Mira la ficha Consola.

    Cada vez que su código no funciona como se esperaba, mire la ficha Consola. A menudo habrá un mensaje de error aquí que explica lo que está mal.

  5. Mover a la pestaña Procesos.

    La herramienta de desarrollo tiene una ficha independiente para trabajar con código JavaScript. Seleccione la pestaña Procesos para ver todo su código a la vez. Si su página de tira en archivos externos de JavaScript, podrás seleccionarlos aquí también.

  6. Establezca un punto de interrupción.

    Por lo general, deja que el programa comience a velocidad normal y reducir la velocidad justo antes de que llegue a un punto de conflicto. En este caso, usted está interesado en la función count (), así que haga clic en la primera línea (17) de esa función en la ventana de código. (Es más confiable que hacer clic en la primera línea de la función de la línea de la que forma, así que haga clic línea 17 en lugar de la línea 16.)

  7. Actualizar la página.

    En el navegador principal, haga clic en el botón Actualizar o presione la tecla F5 para actualizar la página. La página puede ser inicialmente en blanco. Eso está bien - esto significa que el programa ha hecho una pausa cuando se encontró con la función.

  8. Entra en la siguiente línea.

    En la herramienta de desarrollo son una serie de botones en la parte superior de la columna de la derecha. Haga clic en el Paso en el botón Siguiente Line, que se parece a una flecha hacia abajo con un punto debajo de ella. También puede presionar la tecla F11 para activar el comando.

  9. Su página se encuentra en ejecución.

    Si uno mira hacia atrás sobre la página principal, usted debe ver que es ahora en marcha. Aún nada está sucediendo porque no ha activado cualquiera de los botones.

  10. Haga clic en el botón de Conde.

    El botón Conde debe activar el código en la función de conteo. Haga clic en este botón para ver si eso es lo que sucede.

  11. Código ahora debe detuvo en la línea 17.

    De vuelta en la ventana de código, la línea 17 está resaltado. Eso significa que el navegador está en pausa, y cuando se activa el botón Paso, el código resaltado ejecuta.

  12. Paso un par de veces.

    Utilice la tecla F11 o el Paso en el botón Siguiente Line para avanzar un par de veces. Mira cómo el punto culminante se mueve alrededor, porque se puede ver el bucle pasando. Esto es muy útil cuando el código no se comporta adecuadamente, ya que le permite ver exactamente cómo el procesador está moviendo a través de su código.

  13. Pase el ratón sobre la variable i en el código.

    Cuando se encuentra en modo de depuración, se puede pasar el ratón por encima de cualquier variable en la ventana de código, y verás lo que el valor actual de esa variable es. A menudo, cuando el código está funcionando mal, es porque una variable no está haciendo lo que usted piensa que es.

  14. Añadir una expresión reloj para simplificar mirando variables.

    Si usted piensa que el bucle no se comporta, puede agregar una expresión de inspección para hacer más fácil la depuración. Justo debajo de los botones de paso verás una pestaña llamada expresiones de inspección. Haga clic en el signo más para agregar una nueva expresión. Tipo I y pulse ENTER.

  15. Siga paso a paso por el código.

    Ahora se puede seguir paso a paso el código y ver lo que está pasando a la variable. Esto es increíblemente útil cuando el código no está funcionando como usted lo desee.

El depurador integrado en Chrome es uno de los mejores que hay, pero no es la única opción. Si utilizas Firefox, el excelente extensión Firebug añade la misma funcionalidad a Firefox.

Safari tiene una herramienta Inspector web similar incorporado, e incluso IE9 finalmente tiene un depurador decente llamado F12. Todo el trabajo en más o menos de la misma manera. Por lo general, sin embargo, un error de JavaScript bloquea cualquier navegador, así que escoja uno que te guste para la prueba inicial y luego usar otras herramientas específicas del navegador sólo cuando sea necesario.