En Firefox hay tres paneles en el depurador de JavaScript.
Lista de archivos
El primer panel de la izquierda contiene la lista de archivos asociados con la página que estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.
Código fuente
Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción establecido.
Ver expresiones y puntos de interrupción
El panel de la derecha muestra una lista de las expresiones en observación que has agregado y los puntos de interrupción que has establecido.
En la imagen, la primera sección, Ver expresiones, muestra que se ha agregado la variable listItems. Puedes expandir la lista para ver los valores del arreglo.
La siguiente sección, Puntos de interrupción, enumera los puntos de interrupción establecidos en la página. En example.js, se ha establecido un punto de interrupción en la instrucción listItems.push(inputNewItem.value);
Las dos últimas secciones solo aparecen cuando el código se está ejecutando.
La sección Pila de llamadas muestra qué código se ejecutó para llegar a la línea actual. Puedes ver que el código está en la función que maneja un clic del mouse y que el código está actualmente en pausa en el punto de interrupción.
La sección final, Alcances, muestra qué valores son visibles desde varios puntos dentro de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para el código en la función addItemClick.
