UI of the Debugger

The Debugger can be divided into three sections: the sources outline search pane, the code viewer, and the breakpoints pane.

1. Sources Outline Search pane

This pane provides three tabs that are sources, outline and search.

• Sources Tab: This provides the list of all the js files under expandable trees which starts with the files origin. All these trees are under various thread categories.

• Outline Tab: The outline tab provides you filter input bar to filter various functions present in the selected file.

• Search Tab: Provides you a search bar to search for content in all the files of the web page. You also get options to enable regular expression input, match case with the input, and match whole word which means it match text beginning and ending with whitespace.

2. Code viewer

This section views the code and provides option to format, ignore source and collapse/expand panes. You can click on line number to add breakpoint. You can right click the breakpoint to get a context menu which you can use to remove the breakpoint or disable it and you also get option to add conditional breakpoint and add log message.

• Expand/Collapse Sources, Outline, Search pane: The button is present in the top-left corner of the viewer which is used to show or hide the Sources, Outline, Search pane.
• Expand/Collapse Breakpoints pane: The button is present in the top-right corner of the viewer which is used to show or hide the Breakpoints pane.
• Ignore Source: This button is present in the bottom-left corner and is used to ignore of the current file to not be used in the execution.
• Pretty print source: This button appears as “{ }” is present in the bottom-left corner of the viewer which is used to prettify or format a minified file and opens in a new tab.

3. Breakpoints pane

This pane provides control buttons and multiple sub-panes or section of information about the breakpoints.

• Buttons
  • Resume/Pause: Use it to resume or pause the debugger. You can also use the shortcut key F8.
  • Step over: Use it to step to the next line of the executing code. You can also use the shortcut key F10.
  • Step in: Use it to step in to a function of the executing code. You can also use the shortcut key F11.
  • Step out: Use it to step out of the function of the executing code. You can also use the shortcut key Shift + F11.
  • Deactivate breakpoints: You this button to disable all the breakpoints.
  • Debugger Settings: This button provides a list of options to check/uncheck. These options are:
    • Disable JavaScript: Check this option if you want to test the site without JavaScript.
    • Inline Variable Preview: Check this option to display variables with there value at the end of the line when you step through the code.
    • Wrap Lines: Check this option to wrap code to the next line in the code viewer.
    • Source Maps: Check this option to show source maps in the Sources tab.
    • Hide Ignored Sources: Check this option to hide the files in the Sources tab that were ignored.
    • Ignore Known Third-party Scripts: Check this option to ignore 3rd party scripts.

• Sub-panes
  • Threads: Provides the list of various threads of the web page.
  • Watch expressions: You can use the add button to add expression and variable which values can be view under this pane.
  • Breakpoints: Provides the list of breakpoints added. You also get checkboxes to pause on exceptions and pause on caught exceptions. You also have a bin option to remove all breakpoints.
  • Call stack: Provides a expandable tree of functions that executed to reach the code.
  • Scopes: Various values which come under the function, method, or event handler where the break occurred are mention under this pane.
  • XHR Breakpoints: You can add URL or keywords which will break when a XHR request is made. If you have added a keyword then you can click the pause on any URL checkbox to break on these URL which contain the keyword.
  • Event Listener Breakpoints: You get list of various events listener with checkboxes which can be check to add breakpoints for event handlers. You also have filter input to filter the event type and use the log checkbox to display information about events in the console tab.
  • DOM Mutation Breakpoints: In the DOM section in elements tab you can add breakpoints to elements which break when modifications are done in the elements. The breakpoints are Subtree Modification, Attribute Modification and Node Removal which can be set by right clicking the elements and selecting the required breakpoints from break on menu. All the DOM breakpoints are listed under this pane which you can enable or disable by clicking on the checkbox or remove by clicking the cross icon.

Firefox provides a debugger in the DevTools to examine the JS code of the web page to inspect or find various bugs. You can add breakpoints to control the flow of execution and inspect various variables. All developers must know how to debug their code and since the debugger is easy to use it won’t be a big task to learn.