Depurador

Esta p谩gina describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.

Para ver como luce en versiones anteriores de firefox 贸 en Firefox Beta y Release, ver Depurador (anterior a Firefox 52).

Si obtienes esta version del Depurador y requires cambiar a la version anterior, lo puedes hacer visitando about:config y cambiando la preferencia de "devtools.debugger.new-debugger-frontend" a false .

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

Recuerda: Deber谩s re-enviar el puerto cada vez que reinicies el dispositivo.

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.

Un vistazo r谩pido a c贸mo se ve el depurador remoto

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:

PNG del diagrama de barra de herramientas etiquetado

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.

Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.

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.

Captura de pantalla del panel emergente del operador del cuadro de b煤squeda.

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:

Imagen que muestra c贸mo se ve un punto de interrupci贸n establecido

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铆:

Una imagen que muestra c贸mo se ve cuando se alcanza un punto de interrupci贸n.

Mientras tanto, su dispositivo se ver谩 as铆:

Imagen que muestra c贸mo se ve el dispositivo cuando se activa el punto de interrupci贸n de muestra.

Puede hacer clic hacia adelante y hacia atr谩s en el marco de la pila para ver el historial de llamadas. Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrar谩 el c贸digo app://system.gaiamobile.org/js/utility_tray.jsque manej贸 el evento que ocurri贸 cuando quit贸 el dedo de la pantalla despu茅s de bajar la bandeja de notificaciones, por ejemplo.

Puede usar los botones de reanudar, pasar, entrar y salir de la barra de herramientas como en cualquier depurador t铆pico, para recorrer el c贸digo. La siguiente l铆nea de c贸digo para ejecutar tiene una flecha verde a su izquierda. Por supuesto, puede establecer y eliminar puntos de interrupci贸n, examinar variables, etc. mientras lo hace.

El canal贸n a la derecha del c贸digo fuente tiene indicadores azules en los que puede hacer clic para desplazarse r谩pidamente hasta el punto de interrupci贸n correspondiente.

Puntos de interrupci贸n condicionales

Los puntos de interrupci贸n condicionales son un tipo especial de punto de interrupci贸n que se activa solo cuando una expresi贸n de JavaScript determinada es verdadera. Para establecer un punto de interrupci贸n condicional, haga clic derecho en una l铆nea de c贸digo y elija "Agregar punto de interrupci贸n condicional" (o presione Ctrl + Shift + B / Cmd-Shift-B). Tambi茅n puede crear un punto de interrupci贸n regular y luego agregar una condici贸n haciendo clic con el bot贸n derecho en la lista de puntos de interrupci贸n en la esquina inferior izquierda de la ventana del depurador.

Luego puede ingresar una condici贸n que debe ser verdadera para que se active el punto de interrupci贸n:

El cuadro para configurar un punto de interrupci贸n condicional

Ahora, cuando se alcanza la l铆nea de c贸digo correspondiente, solo se detendr谩 la ejecuci贸n de la expresi贸n si evt.type == 'click'es verdadera.

Gestionar puntos de interrupci贸n

Puede administrar los puntos de interrupci贸n que ha establecido utilizando la lista de puntos de interrupci贸n en el lado inferior izquierdo de la ventana del depurador. Activar y desactivar la casilla de verificaci贸n en cualquier punto de interrupci贸n activa y desactiva el punto de interrupci贸n. Al hacer clic en cualquier punto de interrupci贸n condicional, aparecer谩 el panel de edici贸n de puntos de interrupci贸n condicional, como se ve en Puntos de interrupci贸n condicionales.

Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupci贸n:

Eliminar todos los puntos de interrupci贸n
Elimina todos los puntos de interrupci贸n actuales.
Habilitar todos los puntos de interrupci贸n
Habilita todos los puntos de interrupci贸n actuales. Este es un atajo para alternar en las casillas de verificaci贸n junto a todos los puntos de interrupci贸n.
Deshabilitar todos los puntos de interrupci贸n
Desactiva (sin eliminar) todos los puntos de interrupci贸n. Este es un atajo para desactivar las casillas de verificaci贸n junto a todos los puntos de interrupci贸n.
Habilitar a otros
Habilita todos los puntos de interrupci贸n excepto el que hizo clic con el bot贸n derecho.
Deshabilitar a otros
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

Primera toma del panel variableMost 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:

Ejemplo de c贸mo se ve una variable modificada.

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:

C贸mo se ve una expresi贸n de reloj despedido

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

Cuando haya terminado de depurar, si lo desea, puede desactivar la depuraci贸n remota en el dispositivo abriendo la aplicaci贸n Configuraci贸n y luego eligiendo Informaci贸n del dispositivo. En esa p谩gina, ver谩 un bot贸n M谩s informaci贸n. Toque eso, luego en la p谩gina siguiente, despl谩cese hacia abajo hasta "Desarrollador" y toque eso. Eso presenta una lista de opciones para desarrolladores. Desactive la depuraci贸n remota all铆. Sin embargo, no tienes que hacer esto si no quieres.

Nota: No es necesario reiniciar solo para activar y desactivar el soporte de depuraci贸n remota en el dispositivo, a partir de las compilaciones nocturnas del 29 de noviembre de 2012 o posteriores.]

Vea tambi茅n: