Command Line

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added information about the features)
(Added description of commands and auto-switching to Command Editor)
(7 intermediate revisions not shown)
Line 1: Line 1:
The Command Line appears along the bottom of the [[Console Panel]] (small)[[File:ConsoleCommandLineSmall.PNG|thumb|400px|Small Command Line‎]]  
The Command Line appears along the bottom of the [[Console Panel]] (small)[[File:ConsoleCommandLineSmall.PNG|thumb|400px|Small Command Line‎]]  
-
or as Command Editor in the Side Panel on the right (large)[[File:ConsoleCommandLineLarge.PNG‎|thumb|400px|Large Command Line (Command Editor)]]. The red arrow in the lower right corner toggles between small and large.  
+
or as Command Editor in the Side Panel on the right (large)[[File:ConsoleCommandLineLarge.PNG|thumb|400px|Large Command Line (Command Editor)]]. The red arrow ( [[File:CommandLineSwitch.png]] ) in the lower right corner toggles between small and large.  
-
The small Command Line supports auto-completion using the Tab key. For example, typing 'w' followed by Tab repeatedly will cycle through all global variables starting with the letter 'w'. Since [[Firebug Release Notes#Firebug_1.6|Firebug 1.6]] there's also an popup with suggestions shown for the entered part of a command.
+
The small Command Line supports auto-completion using the Tab key. For example, typing 'w' followed by Tab completes it into 'window'. Cycling through the possible completions is done with the arrow keys. Since [[Firebug 1.6 Release Notes|Firebug 1.6]] there's also an popup with suggestions shown for the entered part of a command, unless disabled in the [[Console_Panel#Options_Menu|Console options]].
-
In general the Command Line evaluates whatever expression you type in. It can be a single variable or a complete Javascript program. The evaluation is done by passing the Command Line text into the page, calling eval() on it and passing back the result.
+
In general the Command Line evaluates whatever expression you type in. It can be a single variable or a complete JavaScript program. The evaluation is done by passing the Command Line text into the page, calling eval() on it and passing back the result.
The Command Line also supports the [[Command Line API]], a set of special purpose commands.
The Command Line also supports the [[Command Line API]], a set of special purpose commands.
-
In Firebug 1.6 the Command Line was made available to all panels (called Command Line Popup) and can be accessed through the Command Line Popup Button ( [[Image:commandLinePopupButton.png]] ).
+
In Firebug 1.6 the Command Line was made available to all panels (called Command Line Popup) and can be accessed through the Command Line Popup Button ( [[Image:commandLinePopupButton.png]] ). To see the output of the commands you have to drag the resizer above the Command Line Popup.
== Features ==
== Features ==
=== Auto-Completion ===
=== Auto-Completion ===
-
To support the user analysing elements and writing code the small 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.
+
[[File:CompletionListPopup.png|thumb|400px|Small Command Line‎]]
 +
To support the user analysing elements and writing code the small Command Line integrates an auto-completion for the commands you are typing. Therefore after starting to type a command you simply have to press <code class="key">Tab</code> and Firebug is completing the command. It is also possible to complete a value with <code class="key">Enter</code> or the <code class="key">Right </code> arrow key or by clicking an item inside the Completion List Popup. If there are several commands starting with the same phrase like "getElem" you can use the <code class="key">Up</code> and <code class="key">Down</code> arrow keys before pressing <code class="key">Tab</code> to alphabetically switch through all available commands. Thereby also the global variables, which you defined in your script, are used.
 +
<div style="clear:both;"></div>
=== 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.
 +
 
 +
=== Commands ===
 +
There are different commands available providing a wide variaty of functionality. For a detailed description of the these commands see the [[Command Line API]].
=== Inspect object in other panel ===
=== Inspect object in other panel ===
Line 24: Line 29:
Inside the [[Console Panel]] the Command Line has some [[Console Panel#Command Line|additional features]].
Inside the [[Console Panel]] the Command Line has some [[Console Panel#Command Line|additional features]].
 +
 +
=== Command History ===
 +
The Command Line saves all executed commands in a history. You can go through that history by simply pressing <code class="key">Up</code> and <code class="key">Down</code>. The complete history of all the executed commands is available via [[Image:commandHistoryButton.png]].
 +
 +
=== Smart code pasting ===
 +
When you paste a multi-line script to the Command Line it automatically switches to the Command Editor, so that the line breaks are preserved and you can edit your script as you would do inside an editor.

Revision as of 23:16, 30 January 2013

The Command Line appears along the bottom of the Console Panel (small)
Small Command Line‎
or as Command Editor in the Side Panel on the right (large)
Large Command Line (Command Editor)
. The red arrow ( CommandLineSwitch.png ) in the lower right corner toggles between small and large.

The small Command Line supports auto-completion using the Tab key. For example, typing 'w' followed by Tab completes it into 'window'. Cycling through the possible completions is done with the arrow keys. Since Firebug 1.6 there's also an popup with suggestions shown for the entered part of a command, unless disabled in the Console options.

In general the Command Line evaluates whatever expression you type in. It can be a single variable or a complete JavaScript program. The evaluation is done by passing the Command Line text into the page, calling eval() on it and passing back the result.

The Command Line also supports the Command Line API, a set of special purpose commands.

In Firebug 1.6 the Command Line was made available to all panels (called Command Line Popup) and can be accessed through the Command Line Popup Button ( CommandLinePopupButton.png ). To see the output of the commands you have to drag the resizer above the Command Line Popup.

Contents

Features

Auto-Completion

Small Command Line‎

To support the user analysing elements and writing code the small 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. It is also possible to complete a value with Enter or the Right arrow key or by clicking an item inside the Completion List Popup. If there are several commands starting with the same phrase like "getElem" you can use the Up and Down arrow keys before pressing Tab to alphabetically switch through all available commands. Thereby also the global variables, which you defined in your script, are used.

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.

Commands

There are different commands available providing a wide variaty of functionality. For a detailed description of the these 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. The console output also often contains links to other panels like the DOM Panel.

Inside the Console Panel the Command Line has some additional features.

Command History

The Command Line saves all executed commands in a history. You can go through that history by simply pressing Up and Down. The complete history of all the executed commands is available via CommandHistoryButton.png.

Smart code pasting

When you paste a multi-line script to the Command Line it automatically switches to the Command Editor, so that the line breaks are preserved and you can edit your script as you would do inside an editor.

Personal tools