Console Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added 2.0a1)
m (Reverted edits by Sebastianz (talk) to last revision by Snester)
Line 1: Line 1:
-
This page provides information on what has changed since the current stable version of Firebug and lists all related development releases.
+
[[Image:Console_Panel.png|thumb|400px|Console Panel]]
 +
The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands.
-
The current Firebug version in development is 2.0 (previously named 1.13).
+
== Options Menu ==
 +
This menu is reachable via the little arrow in the panel tab ( [[Image:optionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
-
== Download Sites ==
+
{| class="wikitable" style="width:100%; vertical-align:top;"
-
* [https://getfirebug.com/releases/firebug Releases overview page]
+
|- bgcolor=lightgrey
-
* [https://getfirebug.com/releases/firebug/2.0 Firebug 2.0]
+
! style="width:220px;" | Option || Preference || Description
 +
|-
 +
| Enabled || <code>extensions.firebug.console.enableSites</code> || Enables the Console Panel
 +
|-
 +
| Disabled || <code>extensions.firebug.console.enableSites</code> || Disables the Console Panel
 +
|-
 +
| 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 logging of JavaScript warning messages into the console
 +
|-
 +
| Show CSS Errors || <code>extensions.firebug.showCSSErrors</code> || Toggles logging of CSS error messages into the 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 logging of XMLHttpRequests into the console; see the [[Net Panel]] for more info
 +
|-
 +
| 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 logging of program and add-on internal messages into the 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 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 Cookie Events || <code>extensions.firebug.cookies.logEvents</code> || Toggles logging of cookie events into the console; see the [[Cookies Panel]] for more info
 +
|-
 +
| 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
 +
|}
-
== Overview ==
+
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
-
[[Firebug Roadmap]]
+
-
== Features and changes ==
+
== 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", which means that as soon as an error occurs the script execution is stopped.
-
=== [[Console Panel]] ===
+
=== Clear ===
-
* Added preference <code>extensions.firebug.groupLogMessages</code> to [http://code.google.com/p/fbug/issues/detail?id=6703 define whether to group console messages]
+
Clears the console by removing all messages from the output.
-
* [http://code.google.com/p/fbug/issues/detail?id=6773 Clicking the bracket] of a logged array shows it inside the [[DOM Panel]]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6740 Mutation Observers are listed] when executing [[getEventListeners]] on an HTML element
+
-
* [[console.count|console.count(<title>)]] doesn't care anymore [http://code.google.com/p/fbug/issues/detail?id=7093 what line] it is called from
+
-
* Added menu option to [http://code.google.com/p/fbug/issues/detail?id=6871 control log message grouping]
+
-
=== [[Command Line]] ===
+
=== Persist ===
-
* The command history is now [http://code.google.com/p/fbug/issues/detail?id=5724 limited]
+
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.
-
* The Command Editor now has an [http://code.google.com/p/fbug/issues/detail?id=55 auto-completion] like the Command Line
+
-
* Switching to the Console panel now [http://code.google.com/p/fbug/issues/detail?id=6619 always] [http://code.google.com/p/fbug/issues/detail?id=6620 focuses] the Command Line
+
-
* Command Editor now has [http://code.google.com/p/fbug/issues/detail?id=6875 line numbers]
+
-
=== [[HTML Panel]] ===
+
=== Profile ===
-
* [http://code.google.com/p/fbug/issues/detail?id=6744 All classes] of an element are listed inside the [[HTML Panel#Element Path|Element Path]]
+
Enabling this option lets you profile JavaScript activity. For more info about this feature see the [[Console Panel#Profiling|Profiling]] section.
-
* Added <code class="key">Ctrl</code> + <code class="key">E</code> as [http://code.google.com/p/fbug/issues/detail?id=6708 shortcut for editing] the selected element
+
-
* Changed <code class="key">Alt</code> + double-click to <code class="key">Alt</code> + click for [http://code.google.com/p/fbug/issues/detail?id=6707 editing] the selected element
+
-
* Unnecessary [http://code.google.com/p/fbug/issues/detail?id=6706 tooltips] were removed
+
-
* Clicking <code>&gt;</code> allows [http://code.google.com/p/fbug/issues/detail?id=6661 adding a new attribute] to an element
+
-
* Added [http://code.google.com/p/fbug/issues/detail?id=6748 search by CSS selector and XPath]
+
-
* Added [http://code.google.com/p/fbug/issues/detail?id=3700 auto-completion for HTML attributes] and [http://code.google.com/p/fbug/issues/detail?id=6854 SVG attributes]
+
-
* Added [http://code.google.com/p/fbug/issues/detail?id=6814 auto-completion for CSS styles] within the <code>style</code> attribute
+
-
* Hovering [http://code.google.com/p/fbug/issues/detail?id=6365 cropped attributes] now displays their full value
+
-
* XPath can now be copied as [http://code.google.com/p/fbug/issues/detail?id=7120 relative and absolute] path
+
-
* Edit Mode now has [http://code.google.com/p/fbug/issues/detail?id=6420 syntax highlighting]
+
-
=== [[Inspector]] ===
+
=== Memory Profile ===
-
* [[Quick Info Box]] can be [http://code.google.com/p/fbug/issues/detail?id=5720 pinned]
+
If <code>extensions.firebug.memoryProfilerEnable</code> is set to <code>true</code>, there's another button called ''Memory Profile''. Enabling this option lets you profile memory activity. For more info about this feature see the [[Console Panel#Profiling|Profiling]] section.
-
=== [[CSS Panel]] ===
+
== [[Command Line]] ==
-
* Color values can now be displayed [http://code.google.com/p/fbug/issues/detail?id=5507 as authored]
+
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.
-
* Source Edit Mode now has [http://code.google.com/p/fbug/issues/detail?id=2153 line numbers and syntax highlighting]
+
-
=== [[Script Panel]] ===
+
=== Command Editor ===
-
* [http://code.google.com/p/fbug/issues/detail?id=4906 Notification is shown] when the source cache got exceeded
+
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.
-
* Added an option to only [http://code.google.com/p/fbug/issues/detail?id=2164 stop the script execution on uncaught exceptions]
+
-
* Added [http://code.google.com/p/fbug/issues/detail?id=4823 syntax highlighting] for the code
+
-
* Breakpoint condition editor auto-completion uses [http://code.google.com/p/fbug/issues/detail?id=5291 variables in scope]
+
-
* [https://wiki.mozilla.org/Debugger JSD2] got [http://code.google.com/p/fbug/issues/detail?id=5421 adopted]
+
-
=== [[Watch Side Panel]] ===
+
=== Smart paste ===
-
* Added shortcut <code class="key">Alt</code> + <code class="key">W</code> for [http://code.google.com/p/fbug/issues/detail?id=6746 creating a watch expression] from the current [[Script Panel]] selection
+
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.
-
* [http://code.google.com/p/fbug/issues/detail?id=6855 Exceptions and return values of functions] are shown
+
-
=== [[Net Panel]] ===
+
== Console ==
-
* Headers in net requests [http://code.google.com/p/fbug/issues/detail?id=4930 can be collapsed]
+
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]].
-
* [http://code.google.com/p/fbug/issues/detail?id=6669 Improved] JSON parsing
+
-
* It is now [http://code.google.com/p/fbug/issues/detail?id=7096 indicated] that the panel is initially sorted by the timeline
+
-
=== [[Search Field]] ===
+
=== Message types ===
-
* [http://code.google.com/p/fbug/issues/detail?id=3195 Current panel's name] is displayed as placeholder
+
The console knows four different types of messages, which are described below:
-
* Pressing the search field shortcut [http://code.google.com/p/fbug/issues/detail?id=6334 selects the previously entered text]
+
-
* Search field and search options popup got [https://code.google.com/p/fbug/issues/detail?id=6702 redesigned]
+
-
=== [[Start Button]] ===
+
{| class="wikitable" style="vertical-align:top;"
-
* Clicking and hovering the [http://code.google.com/p/fbug/issues/detail?id=4001 error badge] have different actions than the toolbar button
+
|- bgcolor=lightgrey
-
 
+
! style="width:80px" | Type || style="width:300px" | Command || Description
-
=== API ===
+
|-
-
* Added possibility to [http://code.google.com/p/fbug/issues/detail?id=6697 modify a panel's tab]
+
| Error || <code>console.error(object[, object, ...])</code> || Error messages occurring in JavaScript, CSS, XML, chrome, network and stack trace
-
* <code>getContextMenuItems()</code> now provides the [http://code.google.com/p/fbug/issues/detail?id=7237 mouse coordinates]
+
|-  
-
 
+
| Warning || <code>console.warn(object[, object, ...])</code> || Warnings occurring in JavaScript and CSS
-
=== Miscellaneous ===
+
-
* ''Clear Activation List'' confirmation can be [http://code.google.com/p/fbug/issues/detail?id=6694 bypassed]
+
-
* Pressing <code class="key">Esc</code> in search field [http://code.google.com/p/fbug/issues/detail?id=6333 clears it]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6758 Localized untranslated keys] for [[Firebug Shortcut Bindings]] dialog
+
-
* <code>[http://code.google.com/p/fbug/issues/detail?id=7066 monospace]</code> is now used also on Mac OS instead of Monaco
+
-
 
+
-
You may also want to see the [http://code.google.com/p/fbug/issues/list?can=1&q=Type%3DEnhancement+-is%3Aopen+fixed%3A1.13 complete list of enhancements of Firebug 1.13].
+
-
 
+
-
== Bug Fixes ==
+
-
 
+
-
=== [[Console Panel]] ===
+
-
* Log messages with the same name as the group they are in [http://code.google.com/p/fbug/issues/detail?id=6718 are not be grouped] anymore
+
-
* Fixed bug related to [http://code.google.com/p/fbug/issues/detail?id=6803 filtered log groups]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6662 Generator objects] are not output anymore when they shouldn't
+
-
* <code>[[console.log|console.log()]]</code> doesn't fail anymore when called from [http://code.google.com/p/fbug/issues/detail?id=7045 JavaScript injected by content script]
+
-
* Commands are [http://code.google.com/p/fbug/issues/detail?id=6660 not grouped anymore]
+
-
* Shortcut for clearing the console [http://code.google.com/p/fbug/issues/detail?id=7190 doesn't conflict with page reload shortcut] anymore
+
-
* [[Profiler]] now reports [http://code.google.com/p/fbug/issues/detail?id=201 correct function names] on compressed code
+
-
* [http://code.google.com/p/fbug/issues/detail?id=5939 Source links for errors] are now correct
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6832 Fixed output] from <code>[[console.assert|console.assert()]]</code>
+
-
 
+
-
=== [[Command Line]] ===
+
-
* <code>[[include|include()]]</code> [http://code.google.com/p/fbug/issues/detail?id=6551 doesn't conflict with CSP] anymore
+
-
* <code>[[include|include()]]</code> doesn't fail anymore when there is [http://code.google.com/p/fbug/issues/detail?id=7035 no alias]
+
-
* Code in Command Line [http://code.google.com/p/fbug/issues/detail?id=7060 doesn't disappear anymore] when a Firefox tab is closed
+
-
* [[Command Line API]] is now also [http://code.google.com/p/fbug/issues/detail?id=5321 available while the script execution is stopped]
+
-
* Fixed [http://code.google.com/p/fbug/issues/detail?id=6033 selecting within the last line] of the Command Editor
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6252 Text size] within Command Editor is now changed when changing the text size for Firebug
+
-
 
+
-
=== [[HTML Panel]] ===
+
-
* Fixed [https://code.google.com/p/fbug/issues/detail?id=6952 search highlighting]
+
-
* [https://code.google.com/p/fbug/issues/detail?id=6996 Capital letters on attribute names] don't duplicate them anymore
+
-
* [http://code.google.com/p/fbug/issues/detail?id=7259 Searching within &lt;iframe&gt;s] is now possible
+
-
* Edit Mode now has a context menu containing the [http://code.google.com/p/fbug/issues/detail?id=6880 standard options for manipulating text]
+
-
 
+
-
=== [[Inspector]] ===
+
-
* Inspector CSS is not displayed anymore on [http://code.google.com/p/fbug/issues/detail?id=7007 <code>* { display: block; }</code>]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6991 Shortcut <code class="key">Ctrl</code> + <code class="key">Shift</code> + <code class="key">C</code>] doesn't conflict with Firefox DevTools shortcut anymore
+
-
 
+
-
=== [[Style Side Panel]] ===
+
-
* Fixed [https://code.google.com/p/fbug/issues/detail?id=6975 context menu] for SVG elements
+
-
 
+
-
=== [[Computed Side Panel]] ===
+
-
* Display of the panel fixed for elements having [http://code.google.com/p/fbug/issues/detail?id=7269 multiple inherited inline styles]
+
-
 
+
-
=== [[CSS Panel]] ===
+
-
* ''Copy Property Declaration'' [http://code.google.com/p/fbug/issues/detail?id=6696 copies a valid style declaration]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=4458 Jumping back to the property name] while the property value editor is empty works now
+
-
* Color and image context menu items are now also [http://code.google.com/p/fbug/issues/detail?id=5677 available when the infotips are turned off]
+
-
* Text in Edit Mode is now [http://code.google.com/p/fbug/issues/detail?id=4571 resized] when changing the text size in Firebug
+
-
 
+
-
=== [[Selectors Side Panel]] ===
+
-
* [https://code.google.com/p/fbug/issues/detail?id=6058 Selector auto-completion] is now also working for elements in iframes
+
-
* Improved auto-completion of [https://code.google.com/p/fbug/issues/detail?id=6927 selectors with combinators]
+
-
* Made auto-completion [https://code.google.com/p/fbug/issues/detail?id=6940 more restrictive]
+
-
 
+
-
=== [[Script Panel]] ===
+
-
* Fixed display of [http://code.google.com/p/fbug/issues/detail?id=6826 limit notification]
+
-
* Debugging functions created via <code>[http://code.google.com/p/fbug/issues/detail?id=312 new Function()]</code> works now
+
-
* Fixed debugging of [http://code.google.com/p/fbug/issues/detail?id=397 new JavaScript syntax]
+
-
* Improved [http://code.google.com/p/fbug/issues/detail?id=732 execution speed of <code>eval()</code>] when Firebug is enabled
+
-
* [http://code.google.com/p/fbug/issues/detail?id=3011 Breakpoints in <code>onload</code> handler] now trigger everytime
+
-
* Fixed option for [http://code.google.com/p/fbug/issues/detail?id=3276 breaking on exceptions]
+
-
* [[Console Panel#Break On All Errors|Break On All Errors]] now also works for [http://code.google.com/p/fbug/issues/detail?id=3872 custom errors] and in [http://code.google.com/p/fbug/issues/detail?id=6127 other situations]
+
-
* Breakpoints trigger now also when an [http://code.google.com/p/fbug/issues/detail?id=4248 iframe sharing the same code] with the main page is removed
+
-
* Firefox [http://code.google.com/p/fbug/issues/detail?id=4938 doesn't hang on too much recursion] anymore
+
-
* Script execution can be stopped on [http://code.google.com/p/fbug/issues/detail?id=5081 multiple inline scripts]
+
-
* Debugger [http://code.google.com/p/fbug/issues/detail?id=5118 doesn't get deactivated] anymore on page reloads in combination with timeouts
+
-
* Contents are not replaced by [http://code.google.com/p/fbug/issues/detail?id=5254 XHR request contents] anymore when both share the same URL
+
-
* Script panel doesn't claim "Debugger not activated" anymore when [http://code.google.com/p/fbug/issues/detail?id=5646 navigating within the browser history]
+
-
* Fixed [http://code.google.com/p/fbug/issues/detail?id=6053 not stopping breakpoints]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6771 Panel toolbar and side panels] are hidden in case the debugger is halted in another tab
+
-
* Breakpoint triggering [http://code.google.com/p/fbug/issues/detail?id=6797 within <code>switch</code>] fixed
+
-
 
+
-
=== [[DOM Panel]] ===
+
-
* <code>[[Console_API#console.table.28data.5B.2C_columns.5D.29|console.table()]]</code> properly logs [http://code.google.com/p/fbug/issues/detail?id=6800 generic objects]
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6900 Event handlers display] does not apply to raw objects anymore
+
-
* [https://code.google.com/p/fbug/issues/detail?id=6982 Built-in array methods] are now treated as DOM properties
+
-
 
+
-
=== [[Net Panel]] ===
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6817 Multipart requests] are now correctly copied as cURLs
+
-
* There's a [http://code.google.com/p/fbug/issues/detail?id=6835 horizontal scrollbar] again if the contents don't fit
+
-
 
+
-
=== [[Cookies Panel]] ===
+
-
* There's no [http://code.google.com/p/fbug/issues/detail?id=7174 undefined value] exported anymore
+
-
 
+
-
=== [[Search Field]] ===
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6735 Button for clearing the search field] is displayed correctly
+
-
 
+
-
=== [[Quick Info Box]] ===
+
-
* [http://code.google.com/p/fbug/issues/detail?id=7230 Fixed shortcut] for toggling the Quick Info Box
+
-
 
+
-
=== Miscellaneous ===
+
-
* [http://code.google.com/p/fbug/issues/detail?id=6727 Side panels are not broken] anymore when an iframe is removed while an element inside it is selected
+
-
* Replaced split menu items by normal menu items to [http://code.google.com/p/fbug/issues/detail?id=6692 avoid rendering issues on Mac OS]
+
-
* Firebug is [http://code.google.com/p/fbug/issues/detail?id=5632 not closed on <code>about:blank</code>] anymore
+
-
* [[Break On ...]] buttons [http://code.google.com/p/fbug/issues/detail?id=6567 appear pressed] when they are enabled
+
-
* Fixed [http://code.google.com/p/fbug/issues/detail?id=6899 selecting parts] of the target text while inline editing it
+
-
* [http://code.google.com/p/fbug/issues/detail?id=7036 Multiple DOM changes within a few milliseconds] don't cause [[HTML Panel|HTML]] and [[Console Panel]] display problems anymore
+
-
 
+
-
You may also want to have a look at the [http://code.google.com/p/fbug/issues/list?can=1&q=Type%3DDefect+-is%3Aopen+fixed%3A1.13 complete list of bug fixes of Firebug 1.13].
+
-
 
+
-
== Releases ==
+
-
{| class="wikitable"
+
-
! style="width:100px" | Version || Release Date
+
|-
|-
-
| [https://blog.getfirebug.com/2014/03/26/firebug-2-0-alpha-1/ 2.0a1] || 2014-03-26
+
| Info || <code>console.info(object[, object, ...])</code> || Informative messages
|-
|-
-
| [https://blog.getfirebug.com/2014/03/21/firebug-1-13-alpha-10/ 1.13.0a10] || 2014-03-21
+
| Debug || <code>console.debug(object[, object, ...])</code> || Debugging messages
-
|-
+
-
| [https://blog.getfirebug.com/2014/02/07/firebug-1-13-alpha-9/ 1.13.0a9] || 2014-02-07
+
-
|-
+
-
| [https://blog.getfirebug.com/2014/01/24/firebug-1-13-alpha-8/ 1.13.0a8] || 2014-01-24
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/12/13/firebug-1-13-alpha-7/ 1.13.0a7] || 2013-12-13
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/11/29/firebug-1-13-alpha-6/ 1.13.0a6] || 2013-11-29
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/11/08/firebug-1-13-alpha-5/ 1.13.0a5] || 2013-11-08
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/10/25/firebug-1-13-alpha-4/ 1.13.0a4] || 2013-10-25
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/09/27/firebug-1-13-alpha-3/ 1.13.0a3] || 2013-09-27
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/09/13/firebug-1-13-alpha-2/ 1.13.0a2] || 2013-09-13
+
-
|-
+
-
| [https://blog.getfirebug.com/2013/09/06/firebug-1-13-alpha-1/ 1.13.0a1] || 2013-09-06
+
|}
|}
 +
See also the [[Console API]] for more information about the different commands.
 +
 +
=== 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.
-
== Other versions ==
+
=== Profiling ===
-
* [[Firebug Release Notes|Firebug 1.12]]
+
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]].
-
* [[Firebug 1.11 Release Notes|Firebug 1.11]]
+
== See also ==
== See also ==
-
* [https://wiki.mozilla.org/Firebug Firebug on Mozilla wiki]
+
* [[Command Line API]]
-
* [[Firebug Feature Wish List|Feature Wish List]]
+
* [[Console API]]

Revision as of 15:26, 29 March 2014

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 ( File:OptionsMenuArrow.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", 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.

Memory Profile

If extensions.firebug.memoryProfilerEnable is set to true, there's another button called Memory Profile. Enabling this option lets you profile memory activity. For more info about this feature see the Profiling section.

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.

Message types

The console knows four different types of messages, which are described below:

Type Command Description
Error console.error(object[, object, ...]) Error messages occurring in JavaScript, CSS, XML, chrome, network and stack trace
Warning console.warn(object[, object, ...]) Warnings occurring in JavaScript and CSS
Info console.info(object[, object, ...]) Informative messages
Debug console.debug(object[, object, ...]) Debugging messages

See also the Console API for more information about the different commands.

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