Depurador

El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.

Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android.  Ver acerca del depurador remoto para aprender como depurar un objetivo remoto.j

El depurador JavaScript está disponible en dos variedades: una para depurar contenido que se ejecuta directamente en Firefox, y otra que te permite depurar contenido que se está ejecutando en un dispositivo con Firefox OS , o en Firefox en un dispositivo Android. La principal diferencia entre los dos es que el Depurador Remoto se ejecuta en su propia ventana, mientras que el depurador de contenido web se ejecuta en la misma pestaña de la  Web que se está depurando.

Iniciar el depurador

Depurando contenido web

Para ejecutar contenido Web ejecutado directamente en Firefox (no importa si está guardado localmente en tu equipo o en un servidor), seleccione la opción Depurador del Menú Desarrollador Web en Herramientas.

Una vez que ha configurado Firefox y Firefox OS para soportar depuración, puede usar el Depurador Remoto para depurar su código ejecutado en  un dispositivo Firefox OS o en el simulador de Firefox OS.

A fin de depurar código  JavaScript ejecutado en un dispositivo  Firefox OS o Android, debe verificar que el dispositivo este conectado al puerto USB y que ese lsusb y adb pueden verlo. Entonces deberá re-enviar el puerto  TCP apropiado al dispositivo abriendo una ventana de  terminal y digitando el siguiente comando:

adb forward tcp:6000 tcp:6000

Ahora puede abrir el depurador del menú de desarrolladores. Le pedirá especificar la dirección IP y el puerto al que se quiere conectar. Dé click en "ok" y puede iniciar la depuración.

Llegado a este punto, el depurador no está ejecutandose todavía, debido a que no se han puesto puntos de ruptura o breakpoints. El dispositivo solo permanece a la espera. De hecho, en las siguientes secciones se explica como usar el depurador.  

La Barra del Depurador

La barra de herramientas tiene diversos controles:

Pause/Resume (F6)

Pausa o reanuda la ejecución de un script que estas depurando.

Step Over (F7)

Pausa la linea en curso de codigo JavaScript.

Step Into (F8)

Pausa la llamada a la función de la linea en curso del código JavaScript.

Step Out (Shift-F8)

Ejecuta el script hasta que termina la ejecución de la función.

Script Chooser (Ctrl-P or Cmd-P)

Este pop-up menu te deja seleccionar uno de los scripts en ejecución para leer su código, colocar puntos de ruptura, y continuar.

Script Filter

Este filtro de script (que también funciona como caja de busquedas) nos deja introducir una cadena para filtrar que scripts deben aparecer en el Buscador de Script. Consulte Using the script filter  a continuación.

Expandir Paneles

Expande o contrae la ventana para mostar u ocultar los paneles laterales.

Debugger Options

Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte Opciones de depuración a continuación.

Usando el filtro de Scripts

Cuando haces clic en el filtro de script de la barra de herramientas, puedes introducir una cadena para filtrar el menú de selección de script para que solo muestre los scripts seleccionados. Además, como puede ver al hacer clic en esta caja, hay operadores especiales que puedes usar para utilizar el cuadro como ventana de busqueda, así como para otras utilidades. Cada uno de estos operadores especiales tiene un atajo de teclado que automáticamente te lleva a la ventana de filtros e insertará el operador en el cuadro por usted, para que pueda comenzar a escribir.

Search in all files - ! (Cmd-Opt-F)

Busca el texto que ingresa en todos los scripts en ejecución. Esto agrega un panel justo debajo de la barra de herramientas que muestra todos los archivos coincidentes, cada uno con un cuadro de divulgación que le permite ver las coincidencias encontradas dentro de él.

Find in this file - # (Cmd-F)

Busca el texto que ingresas en el archivo que estás viendo actualmente.

Jump to line - : (Cmd-J)

Salta al numero de línea que has introducido en la ventana.

Filter variables - * (Cmd-Opt-V)

Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.

Opciones del depurador

El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.

Pausa en excepciones

Cuando esta opción esta marcada, la ejecución del script se pausará automáticamente cada vez que se produzca una excepción de JavaScript.

Mostrar paneles al inicio

Cuando esta opción esta marcada, los dos paneles de la barra lateral del depurador son visibles cuando se inicia el depurador por primera vez; por defecto, no se ven.

Mostrar propiedades ocultas

Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.

Mostrar cuadro de busqueda de variables

Habilitar esta opción agrega un cuadro de búsqueda "Filtrar variables" al panel de variables, que pueda filtrar la lista de variables que se muestra.

Uso del depurador

El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.

Breakpoints

Puede establecer un punto de interrupción eligiendo el archivo en el que desea establecer un punto de interrupción (si aún no lo está mirando) utilizando el menú desplegable del selector de guiones y luego haciendo clic en la columna del número de línea, a la izquierda del to the left of the line number itself, en la línea de código en la que desea establecer un punto de interrupción.También puede hacer clic con el botón derecho en el código, en la línea en la que desea crear un punto de interrupción, y usar el menú contextual resultante para crear un punto de interrupción (Ctrl + B o Cmd-B) o un punto de interrupción condicional (Ctrl + Shift + B o Cmd-Shift-B)

Por ejemplo, usemos el depurador remoto para establecer un punto de interrupción que se active siempre que baje la barra de notificaciones. Para hacer eso, elija  "app://system.gaiamobile.org/js/quick_settings.js" (esta es la aplicación de configuración rápida que aparece cuando despliega la barra de notificaciones). Vaya al método handleEvent() y haga clic a la izquierda de la primera línea de código. Esto agregará un indicador de punto de interrupción azul al lado de esa línea, como este:

Puede volver a desactivar el punto de interrupción, por supuesto, haciendo clic en ese indicador de punto de interrupción nuevamente. La parte inferior del panel de la pila también muestra una lista de todos los puntos de interrupción establecidos actualmente. Consulte Gestión de puntos de interrupción para obtener detalles sobre las cosas que puede hacer con esta lista.

Ahora, despliegue la barra de notificaciones en su dispositivo. La barra se desplegará y luego se encenderá el punto de interrupción cuando la aplicación reciba su primer evento. Si no tiene los paneles mostrados, se abrirán en este momento (para mostrarle el marco de la pila, la visualización de variables, etc.). El depurador, en este punto, se verá así:

Mientras tanto, su dispositivo se verá así:

You can click back and forth through the stack frame in order to take a look at the calling history. Clicking on "ut_onTouchEnd" in the stack frame panel will show you the code in app://system.gaiamobile.org/js/utility_tray.js that handled the event that occurred when you removed your finger from the screen after pulling down the notification tray, for instance.

You can use the resume, step over, step into, and step out buttons in the toolbar just as in any typical debugger, to step through the code. The next line of code to run has a green arrow to its left. You can, of course, set and remove breakpoints, examine variables, and so forth while doing so.

The gutter to the right of the source code has blue indicators in it that you can click to quickly scroll to the corresponding breakpoint.

Conditional breakpoints

Conditional breakpoints are a special kind of breakpoint that are triggered only when a given JavaScript expression is true. To set a conditional breakpoint, right click on a line of code and choose "Add conditional breakpoint" (or press Ctrl+Shift+B/Cmd-Shift-B). You can also create a regular breakpoint and then add a condition by right-clicking it in the breakpoint list at the lower left corner of the debugger window.

Then you can enter a condition which must be true for the breakpoint to be triggered:

Now, when the corresponding line of code is reached, it will only pause execution of the expression evt.type == 'click' is true.

Managing breakpoints

You can manage the breakpoints you've set using the breakpoint list along the lower-left side of your debugger window. Toggling on and off the checkbox to any breakpoint turns the breakpoint on and off. Clicking on any conditional breakpoint will pop up the conditional breakpoint editing panel, as seen in Conditional breakpoints.

You can get additional options by right-clicking on any breakpoint:

Remove all breakpoints

Removes all current breakpoints.

Enable all breakpoints

Enables all current breakpoints. This is a shortcut for toggling on the checkboxes next to all the breakpoints.

Disable all breakpoints

Disables (without removing) all breakpoints. This is a shortcut for toggling off the checkboxes next to all the breakpoints.

Enable others

Enables all breakpoints except the one you right-clicked.

Disable others

Disables all breakpoints except the one you right-clicked.

Remove others

Removes all breakpoints except the one you right-clicked.

Configure conditional breakpoint

Configures the conditional breakpoint on which you right-clicked. If the breakpoint isn't a conditional one, you can add a condition and turn it into a conditional breakpoint.

Disable breakpoint

Disables the breakpoint you right-clicked.

Enable breakpoint

Enables the breakpoint you right-clicked.

The variable panel

Most of the right-hand pane in the debugger is occupied by the variables available in the scope you're currently viewing. As seen here, it shows the variables for the local scope of the currently executing function (in this case, qs_handleEvent()), the calling function (here it's ut_show()), and the global scope (the Window object, in this case).

Each object can be expanded using a disclosure triangle to show its members, thereby revealing its contents. You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on the "true" next to geolocationEnabled, you can type "false" to set the value to false. Variables whose values you've edited are highlighted in yellow, like this:

Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the evt object says "configurable enumerable writable". This tells you that the evt object is not configurable, but is enumerable and writable. See Object.defineProperty() for details on what these property descriptors mean.

If you've enabled the filter variables box, as shown in the screenshot, you can reduce clutter in this list to limit the list to showing only the things you really want to see. This search is even recursive; it will search through sub-objects. Typing "blue", for example, restricts the list to the this.bluetooth object in the qs_handleEvent() function's scope, and the Bluetooth and BluetoothTransfer objects in the global scope.

Watch expressions

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear.

For example, let's say we're stepping through some code and we want to quickly know what the value of a variable a multiplied by two is, without having to be bothered with any tedious "thinking". We can enter the expression a*2 into the "Add a watch expression box" and hit enter, set an appropriate breakpoint, and run our code.

When our breakpoint is reached, let's say the value of a is 1. The resulting display looks like this:

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

Stopping the debugger

When you're done debugging, if you like, you can turn off remote debugging on the device by opening the Settings app, then chosing Device Information. On that page, you'll see a More Information button. Tap that, then in the following page, scroll down to "Developer" and tap that. That presents a list of developer options. Turn off Remote Debugging there. You don't have to do this though, if you don't want to.

Vea también:

• Debugging on Firefox OS
• Remote debugging protocol
• Remote Debugging on Firefox for Android (blog post)