Console Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Renamed "Options Mini Menu" to "Options Menu")
m (Added link to 1.12 release notes and fixed link to 1.9 release notes)
(17 intermediate revisions not shown)
Line 3: Line 3:
== Options Menu ==
== Options Menu ==
 +
This menu is reachable via the little arrow in the panel tab ( [[File:ConsolePanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug 1.9 Release Notes|Firebug 1.9]]).
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
Line 11: Line 13:
| Disabled || <code>extensions.firebug.console.enableSites</code> || Disables the Console Panel
| Disabled || <code>extensions.firebug.console.enableSites</code> || Disables the Console Panel
|-  
|-  
-
| Show JavaScript Errors || <code>extensions.firebug.showJSErrors</code> || Toggles JavaScript error message display inside the [[Console Panel#Console|Console]]
+
| Show JavaScript Errors || <code>extensions.firebug.showJSErrors</code> || Toggles logging of JavaScript error messages into the console
|-  
|-  
-
| Show JavaScript Warnings || <code>extensions.firebug.showJSWarnings</code> || Toggles JavaScript warning message display inside the [[Console Panel#Console|Console]]
+
| Show JavaScript Warnings || <code>extensions.firebug.showJSWarnings</code> || Toggles logging of JavaScript warning messages into the console
|-
|-
-
| Show CSS Errors || <code>extensions.firebug.showCSSErrors</code> || Toggles CSS error message display inside the [[Console Panel#Console|Console]]
+
| Show CSS Errors || <code>extensions.firebug.showCSSErrors</code> || Toggles logging of CSS error messages into the console
|-
|-
-
| Show XML Errors || <code>extensions.firebug.showXMLErrors</code> || Toggles XML error message display inside the [[Console Panel#Console|Console]]
+
| Show XML/HTML Errors || <code>extensions.firebug.showXMLErrors</code> || Toggles logging of XML and HTML error messages into the console
|-
|-
-
| Show XMLHttpRequests || <code>extensions.firebug.showXMLHttpRequests</code> || Toggles XMLHttpRequest display inside the [[Console Panel#Console|Console]]
+
| Show XMLHttpRequests || <code>extensions.firebug.showXMLHttpRequests</code> || Toggles logging of XMLHttpRequests into the console; see the [[Net Panel]] for more info
|-
|-
-
| Show Chrome Errors || <code>extensions.firebug.showChromeErrors</code> || Toggles program and add-on internal error message display inside the [[Console Panel#Console|Console]]
+
| Show Chrome Errors || <code>extensions.firebug.showChromeErrors</code> || Toggles logging of program and add-on internal error messages into the console
|-
|-
-
| Show Chrome Messages || <code>extensions.firebug.showChromeMessages</code> || Toggles program and add-on internal message display inside the [[Console Panel#Console|Console]]
+
| Show Chrome Messages || <code>extensions.firebug.showChromeMessages</code> || Toggles logging of program and add-on internal messages into the console
|-
|-
-
| Show External Errors || <code>extensions.firebug.showExternalErrors</code> || Toggles external error message display inside the [[Console Panel#Console|Console]]
+
| Show External Errors || <code>extensions.firebug.showExternalErrors</code> || Toggles logging of external error messages into the console
|-
|-
-
| Show Network Errors || <code>extensions.firebug.showNetworkErrors</code> || Toggles network error message display inside the [[Console Panel#Console|Console]]
+
| Show Network Errors || <code>extensions.firebug.showNetworkErrors</code> || Toggles logging of network error messages into the console
|-
|-
| Show Stack Trace With Errors || <code>extensions.firebug.service.showStackTrace</code> || Toggles the inclusion of the stack trace for error messages
| Show Stack Trace With Errors || <code>extensions.firebug.service.showStackTrace</code> || Toggles the inclusion of the stack trace for error messages
|-
|-
-
| Strict Warnings (performance panelty) || <code>javascript.options.strict.debug</code> || Toggles strict warnings display inside the [[Console Panel#Console|Console]]
+
| Show Cookie Events || <code>extensions.firebug.cookies.logEvents</code> || Toggles logging of cookie events into the console; see the [[Cookies Panel]] for more info
|-
|-
-
| Command Editor || <code>extensions.firebug.largeCommandLine</code> || Toggles between the [[Console Panel#Command Line|Command Line]] and the [[Console Panel#Command Editor|Command Editor]]
+
| Strict Warnings (performance penalty) || <code>javascript.options.strict</code> || Toggles logging of strict warnings into the console
 +
|-
 +
| Command Editor || <code>extensions.firebug.commandEditor</code> || Toggles between the [[Console Panel#Command Line|Command Line]] and the [[Console Panel#Command Editor|Command Editor]]
|-
|-
| Show Completion List Popup|| <code>extensions.firebug.commandLineShowCompleterPopup</code> || Toggles the auto-completion of commands while typing
| Show Completion List Popup|| <code>extensions.firebug.commandLineShowCompleterPopup</code> || Toggles the auto-completion of commands while typing
Line 42: Line 46:
== Panel Toolbar ==
== Panel Toolbar ==
=== Break On All Errors ===
=== Break On All Errors ===
-
As 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.
+
As with some of the other panels the console panel offers a "[[Break On ...]]" feature. In this case it's "Break On All Errors" ( [[File:Break_on_all_errors_button.png]] ), which means that as soon as an error occurs the script execution is stopped.
=== Clear ===
=== Clear ===
Line 48: Line 52:
=== Persist ===
=== Persist ===
-
The "Persist" option prevents clearing the console at a page reload. That means, the messages will stay inside the console as long as this option is enabled.
+
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 ===
=== Profile ===
Enabling this option lets you profile JavaScript activity. For more info about this feature see the [[Console Panel#Profiling|Profiling]] section.
Enabling this option lets you profile JavaScript activity. For more info about this feature see the [[Console Panel#Profiling|Profiling]] section.
-
== [[Command Line]] ==
+
=== Filter buttons ===
-
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, which are described below.
+
There are different buttons allowing you to filter the display of messages logged to the console:
-
=== Auto-Completion ===
+
{| class="wikitable" style="width:400px; vertical-align:top;"
-
To support the user analysing elements and writing code the command line integrates an auto-completion for the commands you are typing. Therefore after starting to type a command you simply have to press tab and Firebug is completing the command. If there are several commands starting with the same phrase like "getElem" then pressing tab several times alphabetically switches through all available commands. Thereby also the global variables, which you defined in your script, are used.
+
|- bgcolor=lightgrey
 +
! style="width:80px;" | 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 <code class="key">Ctrl</code> / <code class="key">&#8984;</code> while clicking the filter buttons.This feature was added in [[Firebug Release Notes#Firebug 1.12|Firebug 1.12]].
 +
 
 +
== [[Command Line]] ==
 +
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. Thereby there are some additional features available inside the Console Panel.
=== Command Editor ===
=== Command Editor ===
Line 64: Line 87:
=== Smart paste ===
=== Smart paste ===
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.
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.
-
 
-
=== Clipboard functionality ===
 
-
The entered script can be copied as bookmarklet via the menu of the command editor.
 
-
 
-
=== Shortcuts for inspected elements ===
 
-
The command line and the command editor offer you the possibility to easily access elements inside the DOM similar to the sizzle selector library integrated in the jQuery Framework. For a detailed description of the available commands see the [[Command Line API]].
 
-
 
-
=== Inspect object in other panel ===
 
-
How you inspect elements using the console is described above. Besides that it's also possible to inspect them in the most appropriate panel by hitting Shift+Enter instead of just Enter.
 
== Console ==
== Console ==
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]].
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]].
-
 
-
=== Message types ===
 
-
The console knows four different types of messages, which are described below:
 
-
 
-
{| class="wikitable" style="vertical-align:top;"
 
-
|- bgcolor=lightgrey
 
-
! style="width:80px" | Type || style="width:300px" | Command || Description
 
-
|-
 
-
| Error || <code>console.error(object[, object, ...])</code> || Error messages occurring in JavaScript, CSS, XML, chrome, network and stack trace
 
-
|-
 
-
| Warning || <code>console.warn(object[, object, ...])</code> || Warnings occurring in JavaScript and CSS
 
-
|-
 
-
| Info || <code>console.info(object[, object, ...])</code> || Informative messages
 
-
|-
 
-
| Debug || <code>console.debug(object[, object, ...])</code> || Debugging messages
 
-
|}
 
-
See also the [[Console API]] for more information about the different commands.
 
=== Click functionality ===
=== Click functionality ===
Line 98: Line 95:
=== Profiling ===
=== Profiling ===
-
The console also offers the functionality to profile JavaScript activity via a button in the panel menu. Pressing it once starts the profiler and clicking it again stops profiling. All JavaScript commands, that were executed while the profiler was active, will be listed including detailed statistics about the calls.
+
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]].
== See also ==
== See also ==
* [[Command Line API]]
* [[Command Line API]]
* [[Console API]]
* [[Console API]]

Revision as of 22:23, 1 August 2013

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

This menu is reachable via the little arrow in the panel tab ( ConsolePanelOptionsMenuArrow.png ) 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
Disabled extensions.firebug.console.enableSites Disables 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
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

Break On All Errors

As with some of the other panels the console panel offers a "Break On ..." feature. In this case it's "Break On All Errors" ( Break on all errors button.png ), which means that as soon as an error occurs the script execution is stopped.

Clear

Clears the console by removing all messages from the output.

Persist

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

Enabling this option lets you profile JavaScript activity. For more info about this feature see the Profiling section.

Filter buttons

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

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. Thereby there are some additional features available inside the Console Panel.

Command Editor

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

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

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.

Click functionality

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

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.

See also

Personal tools