Console Panel
The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands.
Contents
Options Menu[edit]
This menu is reachable via the little arrow in the panel tab (
) or by right-clicking on on the panel tab (since Firebug 1.9).
| Option | Preference | Description |
|---|---|---|
| Enabled | extensions.firebug.console.enableSites |
Enables the Console Panel |
| Show JavaScript Errors | extensions.firebug.showJSErrors |
Toggles logging of JavaScript error messages into the console |
| Show JavaScript Warnings | extensions.firebug.showJSWarnings |
Toggles logging of JavaScript warning messages into the console |
| Show CSS Errors | extensions.firebug.showCSSErrors |
Toggles logging of CSS error messages into the console |
| Show XML/HTML Errors | extensions.firebug.showXMLErrors |
Toggles logging of XML and HTML error messages into the console |
| Show XMLHttpRequests | extensions.firebug.showXMLHttpRequests |
Toggles logging of XMLHttpRequests into the console; see the Net Panel for more info |
| Show Chrome Errors | extensions.firebug.showChromeErrors |
Toggles logging of program and add-on internal error messages into the console |
| Show Chrome Messages | extensions.firebug.showChromeMessages |
Toggles logging of program and add-on internal messages into the console |
| Show External Errors | extensions.firebug.showExternalErrors |
Toggles logging of external error messages into the console |
| Show Network Errors | extensions.firebug.showNetworkErrors |
Toggles logging of network error messages into the console |
| Show Stack Trace With Errors | extensions.firebug.service.showStackTrace |
Toggles the inclusion of the stack trace for error messages |
| Show Cookie Events | extensions.firebug.cookies.logEvents |
Toggles logging of cookie events into the console; see the Cookies Panel for more info |
| Strict Warnings (performance penalty) | javascript.options.strict |
Toggles logging of strict warnings into the console |
| Group Log Messages | extensions.firebug.console.groupLogMessages |
Controls whether equal log messages are grouped |
| Command Editor | extensions.firebug.commandEditor |
Toggles between the Command Line and the Command Editor |
| Show Completion List Popup | extensions.firebug.commandLineShowCompleterPopup |
Toggles the auto-completion of commands while typing |
For more info about tweaks available in Firebug please see the full list of preferences.
Panel Toolbar[edit]
Break On All Errors[edit]
As with some of the other panels the console panel offers a "Break On ..." feature. In this case it's "Break On All Errors" (
), which means that as soon as an error occurs the script execution is stopped.
Clear[edit]
Clears the console by removing all messages from the output.
Persist[edit]
This option prevents clearing the console when a page is reloaded. Thus all messages will stay inside the console as long as this option is enabled.
Profile[edit]
Enabling this option lets you profile JavaScript activity. For more info about this feature see the Profiling section.
Filter buttons[edit]
There are different buttons allowing you to filter the display of messages logged to the console:
| Option | Description |
|---|---|
| All | Displays all messages |
| Errors | Limits the display to error messages |
| Warnings | Limits the display to warning messages |
| Info | Limits the display to info messages |
| Debug Info | Limits the display to debug info messages |
| Cookies | Limits the display to cookie events |
You can also select multiple filters by holding down Ctrl / ⌘ while clicking the filter buttons.This feature was added in Firebug 1.12.
Command Line[edit]
The Command Line is simply used for executing JavaScript commands, but is designed to support people writing code and inspecting objects. For this reason it offers several functionalities. There are some additional features available inside the Console Panel.
Note: Executing commands via the command line will log the result of the script into the console. So, don't wonder when the output of the script var a=0; while(a < 10) { console.log(a); a++; } lists 9 a second time at the end.
Command Editor[edit]
The Command Editor offers you a bigger text field for entering JavaScript commands consisting of several lines. It has an integrated menu for running the command(s), clearing the text field and copying the contents to the clipboard.
Smart paste[edit]
If you are pasting code into the command line, that consists of several lines, the command editor is automatically opened to keep the line breaks.
Console[edit]
The console offers three different functionalities. It is showing all messages Firefox' error console is showing. Furthermore it is displaying the results of the commands you entered into the command line. Last but not least it has an integrated profiler for JavaScript activities. For a detailed description of console commands see the Console API.
JavaScript values[edit]
The display of the different JavaScript values and DOM items is optimized for readability and to show important information at a glance.
Click functionality[edit]
Console messages offer you different kinds of options you can access via the mouse buttons resp. the mouse wheel. E. g. clicking on the links in an error message or warning jumps directly to the appropriate panel. Right clicking on them gives you the possibility to copy the message to the clipboard or set a breakpoint for the specific error or all errors. XML HTTP requests thereby let you copy the location or response body via the context menu. Clicking on them shows you detailed information about the request. And middle-clicking opens the requested URL in a new tab.
Profiling[edit]
The console also offers functionality to profile JavaScript activity and memory consumption information via two buttons in the Panel Toolbar. For more information please see the Profiler.
Performance timing[edit]
You can let yourself display the page performance timing. To do that just enter window.performance.timing and hit Enter. This will output the timing information related to the browsing contexts as a graph as well as in table form and as object, which can be inspected within the DOM Panel.