Console Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Created page with 'The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands. === Command Line === The command line is simply us…')
(Changed caption formattings to be able to better distinguish them)
Line 1: Line 1:
The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands.
The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands.
-
=== Command Line ===
+
== 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, which are described below.
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.
-
==== Autocomplete ====
+
=== Autocomplete ===
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.
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.
-
==== Command editor ====
+
=== 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.
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 ====
+
=== 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 ====
+
=== Clipboard functionality ===
The entered script can be copied as bookmarklet via the menu of the command editor.
The entered script can be copied as bookmarklet via the menu of the command editor.
-
==== Shortcuts for inspected elements ====
+
=== 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]].
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 ====
+
=== 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.
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 ====
+
=== Message types ===
The console knows four different types of messages, which are described below:
The console knows four different types of messages, which are described below:
Line 41: Line 41:
See also the [[Console API]] for more information about the different commands.
See also the [[Console API]] for more information about the different commands.
-
==== Click functionality ====
+
=== 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.
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 ====
+
=== 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 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.
-
=== See also ===
+
== See also ==
* [[Command Line API]]
* [[Command Line API]]
* [[Console API]]
* [[Console API]]

Revision as of 23:02, 25 April 2010

The console panel offers a JavaScript command line, lists all kinds of messages and offers a profiler for JavaScript commands.

Contents

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, which are described below.

Autocomplete

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.

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.

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

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:

TypeCommandDescription
Errorconsole.error(object[, object, ...])Error messages occurring in JavaScript, CSS, XML, chrome, network and stack trace
Warningconsole.warn(object[, object, ...])Warnings occurring in JavaScript and CSS
Infoconsole.info(object[, object, ...])Informative messages
Debugconsole.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 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.

See also

Personal tools