Firebug Terminology

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added description of the Firebug Menu)
(Added description of Break Notification)
 
(36 intermediate revisions not shown)
Line 1: Line 1:
The Firebug team uses some special phrases for parts of Firebug. This list was created with the intention to give you an overview over the terminology together with a description of the things and therefore help you to understand what we are talking about at [http://getfirebug.com getfirebug.com], in issues, forums etc..
The Firebug team uses some special phrases for parts of Firebug. This list was created with the intention to give you an overview over the terminology together with a description of the things and therefore help you to understand what we are talking about at [http://getfirebug.com getfirebug.com], in issues, forums etc..
-
{| class="wikitable" style="vertical-align:top;"
+
== General ==
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
-
! style="width:140px;" | Term !! Description
+
! style="width:160px;" | Term !! Description
 +
|-
 +
| [[FBTest|Firebug Test Console (FBTest)]] || A dialog containing automated test suites for Firebug and other extensions. You can open it using Firebug Menu -> Open Test Console.
 +
|-
 +
| [[FBTrace|Firebug Tracing Console (FBTrace)]] || A console displaying various log messages helping Firebug developers to debug a debugger. You can open it using Firebug Menu -> Open Firebug Tracing.
 +
|}
 +
 
 +
== Firebug UI ==
 +
=== General ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
|-
|-
| Module || Logical part of web development (like HTML, CSS, DOM etc.)
| Module || Logical part of web development (like HTML, CSS, DOM etc.)
|-
|-
-
| Panel Bar || Main bar including the Firebug Menu, the Inspect Button, navigation history buttons, a tab list of the different modules of Firebug, a search field and buttons for controlling the display and activation of Firebug
+
| Main Bar || Area at the top of the Firebug UI including the Firebug Menu, the Inspect Button, the Navigation History Buttons, a tab list of the different modules of Firebug, a search field and buttons for controlling the display and activation of Firebug
 +
|-
 +
| [[Firebug Menu]] || Menu accessible through [[Image:Firebug_Menu_Button.png]] offering general Firebug options
 +
|-
 +
| Inspect Button || Toggle button ( [[Image:Inspect_Button.png]] ) for enabling the Inspector
 +
|-
 +
| Command Line Popup Button || Toggle button ( [[Image:commandLinePopupButton.png]] ) for opening the Command Line Popup
 +
|-
 +
| [[Inspector]] || Tool giving you the possibility to select HTML elements of the currently shown page by for further investigation inside the [[HTML Panel]]
 +
|-
 +
| Navigation History Buttons || Two buttons ( [[Image:navigationBackButton.png]] and [[Image:navigationForwardButton.png]] ) letting you switch back and forth in Firebug's navigation history
|-
|-
-
| Firebug Menu || Menu button with the Firebug icon offering general Firebug options
+
| Window Buttons || Buttons for minimizing (Minimize button), detaching (Detach button) and suspending Firebug (Close button) ([[Image:Window_Buttons.png]])
|-
|-
-
| Inspect Button || Toggle button giving the possibility to inspect HTML elements of the page inside the [[HTML Panel]]
+
| Panel Selector || Menu reachable through [[Image:panelSelectorButton.png]] offering the possibility to toggle the display of panels and to switch between panels
|-
|-
| Panel || Tab inside the panel bar including special functionality of a module or an extension
| Panel || Tab inside the panel bar including special functionality of a module or an extension
Line 29: Line 51:
| Panel Toolbar || Tool bar inside a panel containing panel related general functionality
| Panel Toolbar || Tool bar inside a panel containing panel related general functionality
|-
|-
-
| Side Panel || Tab inside an area on the right side of some panels including related functionality to the main module
+
| Main Panel || In case a panel has side panels this means the main area on the left side (by default) of a panel
|-
|-
-
| [[HTML Panel#Style|Style Side Panel]] || Side Panel including information about and manipulation options to the styles assigned to the currently in the Node View selected node
+
| Side Panel || Tab inside an area on the right side (by default) of some panels including related functionality to the main module
|-
|-
-
| [[HTML Panel#Computed|Computed Side Panel]] || Side Panel showing information about the computed styles for the currently in the Node View selected node
+
| Options Menu || Menu with general options to the panel openable via the little arrow besides the panel's tab ( [[File:ConsolePanelOptionsMenuArrow.png]] )
|-
|-
-
| [[HTML Panel#Layout|Layout Side Panel]] || Side Panel displaying a box model of the currently in the Node View selected node with functionality for manipulating it
+
| Breakpoint Column || Vertical bar on the left hand side of a panel for easily creating and removing breakpoints by clicking on it
|-
|-
-
| [[HTML Panel#DOM|DOM Side Panel]] || Side Panel offering information about the DOM tree of the currently in the Node View selected node and functionality for manipulating it
+
| Edit Mode || Mode of some panels for direct manipulation of the underlying source code, which can be activated through the "Edit" button inside the Panel Toolbar
|-
|-
-
| Watch Side Panel || Side Panel giving the possibility to watch the changes of variable values while debugging
+
| [[Break On ...|Break On Button]] || Toggle button inside the Panel Toolbar of some panels for stopping JavaScript execution on a specific event and jumping to the [[Script Panel]]
|-
|-
-
| Stack Side Panel || Side Panel containing the stack trace information while debugging
+
| Addon Bar Icon || Firebug symbol inside the addon bar (formerly called status bar) of Firefox used to open Firebug
|-
|-
-
| Breakpoints Side Panel || Side Panel listing all breakpoints created for the current page
+
| [[Start Button]] || Toolbar button ( [[Image:startButton.png]] ) used to open Firebug
|-
|-
-
| Options Mini Menu || Menu with general options to the panel or tab
+
| [[Command Line|Command Line Popup]] || Command Line available inside every panel
|-
|-
-
| Element Path || "Breadcrumb list" of the selected node inside the node view up to the root element of the document
+
| Ancestor Path || "Breadcrumb list" of the active or selected element and its anchestors inside the [[HTML Panel|HTML]], the [[DOM Panel|DOM]] and the [[Script Panel]]
|-
|-
-
| Node View || Dynamic tree view of the markup based structure of the page inside the [[HTML Panel]]
+
| [[Search Field]] || Top right text field ( [[Image:searchFieldSmall.png]] ) of the panel bar for searching inside the currently active panel
|-
|-
-
| [[Inspector]] || Tool to select an element inside the currently shown web page for further investigation
+
| Search Options Panel || Popup displayed at the [[Search Field]] containing the options related to the current search
|-
|-
-
| Edit Mode || Mode of some panels for direct manipulation of the underlying source code, which can be activated through the "Edit" button inside the panel menu
+
| [[Quick Info Box]] || Panel showing information about the currently hovered element
 +
|}
 +
 
 +
=== [[Console Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
|-
|-
-
| [[Break On ...|Break On Button]] || Toggle button inside the panel menu of some panels for stopping JavaScript execution on a specific event
+
| [[Console Panel#Break On All Errors|Break On All Errors]] || Toggle button ( [[Image:Break_on_all_errors_button.png]] ) inside the Panel Toolbar of the [[Console Panel]] for stopping JavaScript execution on all JavaScript errors
|-
|-
-
| Status Bar Icon || Firebug symbol inside the status bar of Firefox
+
| [[Console Panel#Command Line|Command Line]] || Feature of the ''Console'' panel to enter one-line JavaScript code
|-
|-
-
| [[Console Panel#Command Line|Command Line]] || Feature of the console panel to enter one-line JavaScript code
+
| [[Console Panel#Command Editor|Command Editor]] || Text editor inside the ''Console'' panel for entering JavaScript code consisting of several lines
|-
|-
-
| [[Console Panel#Command Editor|Command Editor]] || Text editor inside the console panel for entering JavaScript code consisting of several lines
+
| [[Command_Line#Auto-Completion|Completion List Popup]] || Popup listing all commands and properties available in the current context
|-
|-
-
| [[Search Field]] || Top right field of the panel bar for searching inside the currently active panel
+
| Command Line Switch || Red arrow ( [[Image:commandLineSwitch.png]] ) in the lower right corner of the ''Console'' panel allowing to toggle between Command Line and Command Editor
 +
|-
 +
| [[Closure Inspector]] || DOM tree display and [[Command Line#Closure Inspector|Command Line option]] of closure variables
 +
|}
 +
 
 +
=== [[HTML Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
 +
|-
 +
| [[Style Side Panel]] || Side Panel including information about and manipulation options to the styles assigned to the currently in the Node View selected node
 +
|-
 +
| [[Computed Side Panel]] || Side Panel showing information about the computed styles for the currently in the Node View selected node
 +
|-
 +
| [[Layout Side Panel]] || Side Panel displaying a box model of the currently in the Node View selected node with functionality for manipulating it
 +
|-
 +
| [[HTML Panel#DOM|DOM Side Panel]] || Side Panel offering information about the DOM tree of the currently in the Node View selected node and functionality for manipulating it
 +
|-
 +
| Node Path || Ancestor Path of the [[HTML Panel]]
 +
|-
 +
| Node View || Dynamic tree view of the markup based structure of the page inside the [[HTML Panel]]
 +
|-
 +
| [[HTML Panel#Break On Mutate|Break On Mutate]] || Toggle button ( [[Image:Break_On_Mutate_Button.png]] ) inside the Panel Toolbar of the [[HTML Panel]] for stopping JavaScript execution on HTML mutation
 +
|}
 +
 
 +
=== [[CSS Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
|-
|-
| CSS Location Menu || Menu button inside the toolbar of the [[CSS Panel]] for switching between the different CSS files included in the currently displayed website
| CSS Location Menu || Menu button inside the toolbar of the [[CSS Panel]] for switching between the different CSS files included in the currently displayed website
 +
|}
 +
 +
=== [[Script Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
 +
|-
 +
| [[Watch Side Panel]] || Side Panel giving the possibility to watch the changes of variable values while debugging
 +
|-
 +
| [[Stack Side Panel]] || Side Panel containing the stack trace information while debugging
 +
|-
 +
| [[Breakpoints Side Panel]] || Side Panel listing all breakpoints created for the current page
 +
|-
 +
| Stack Frame Path || Ancestor Path of the [[Script Panel]]
 +
|-
 +
| [[Script Panel#Break On Next|Break On Next]] || Toggle button ( [[Image:Break_On_Next_Button.png]] ) inside the Panel Toolbar of the [[Script Panel]] for stopping JavaScript execution on the next executed line
|-
|-
| Script Location Menu || Menu button inside the toolbar of the [[Script Panel]] for switching between the different JavaScript containing files included in the currently displayed website and (based on the script filter) also eval() and event scripts
| Script Location Menu || Menu button inside the toolbar of the [[Script Panel]] for switching between the different JavaScript containing files included in the currently displayed website and (based on the script filter) also eval() and event scripts
 +
|-
 +
| Static Scripts || JavaScript code blocks statically bound into a page (via <script> tag)
|-
|-
| Eval() Scripts || JavaScript code blocks created dynamically through XML HTTP Requests
| Eval() Scripts || JavaScript code blocks created dynamically through XML HTTP Requests
|-
|-
| Event Scripts || JavaScript code blocks created dynamically through JavaScript events
| Event Scripts || JavaScript code blocks created dynamically through JavaScript events
 +
|-
 +
| Break Notification || Hint displayed when specific breakpoints are triggered providing more detailed info on why the script execution was halted
 +
|}
 +
 +
=== [[DOM Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
 +
|-
 +
| Property Path || Ancestor Path of the [[DOM Panel]]
 +
|-
 +
| [[Closure Inspector]] || DOM tree display and [[Command Line#Closure Inspector|Command Line option]] of closure variables
 +
|}
 +
 +
=== [[Net Panel]] ===
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
 +
|-
 +
| [[Net Panel#Break On XHR|Break On XHR]] || Toggle button ( [[Image:Break_On_XHR_Button.png]] ) inside the Panel Toolbar of the [[Net Panel]] for stopping JavaScript execution on XMLHttpRequests
 +
|-
 +
| [[Net Panel#Request List|Request List]] || List of requests displayed inside the Net panel area
 +
|-
 +
| [[Net Panel#Timeline|Timeline]] || Waterfall graph of network request timing data
 +
|}
 +
 +
== Actions ==
 +
{| class="wikitable" style="vertical-align:top; width:100%;"
 +
|- bgcolor=lightgrey
 +
! style="width:160px;" | Term !! Description
 +
|-
 +
| Activation || Enabling Firebug's modules
 +
|-
 +
| Open Firebug || Activating Firebug and displaying its UI (by pressing <code class="key">F12</code> or clicking the Firebug Start Button)
 +
|-
 +
| Minimize Firebug || Hiding the Firebug UI, but keeping Firebug active (by pressing <code class="key">F12</code> while the UI is open or clicking the Minimize button)
 +
|-
 +
| Deactivate/Close Firebug || Deactivating Firebug and hiding its UI (by pressing <code class="key">Shift</code>+<code class="key">F12</code> or clicking the Close button)
 +
|-
 +
| Detach Firebug || Opening the Firebug UI in its own window (by pressing <code class="key">Ctrl</code>/<code class="key">&#8984;</code>+<code class="key">F12</code> or clicking the Detach button while the UI is attached)
 +
|-
 +
| (Re-)attach Firebug || Docking the Firebug UI inside the browser window (by pressing <code class="key">Ctrl</code>/<code class="key">&#8984;</code>+<code class="key">F12</code> or clicking the Detach button while the UI is detached)
|}
|}

Latest revision as of 08:38, 16 September 2013

The Firebug team uses some special phrases for parts of Firebug. This list was created with the intention to give you an overview over the terminology together with a description of the things and therefore help you to understand what we are talking about at getfirebug.com, in issues, forums etc..

Contents

[edit] General

Term Description
Firebug Test Console (FBTest) A dialog containing automated test suites for Firebug and other extensions. You can open it using Firebug Menu -> Open Test Console.
Firebug Tracing Console (FBTrace) A console displaying various log messages helping Firebug developers to debug a debugger. You can open it using Firebug Menu -> Open Firebug Tracing.

[edit] Firebug UI

[edit] General

Term Description
Module Logical part of web development (like HTML, CSS, DOM etc.)
Main Bar Area at the top of the Firebug UI including the Firebug Menu, the Inspect Button, the Navigation History Buttons, a tab list of the different modules of Firebug, a search field and buttons for controlling the display and activation of Firebug
Firebug Menu Menu accessible through Firebug Menu Button.png offering general Firebug options
Inspect Button Toggle button ( Inspect Button.png ) for enabling the Inspector
Command Line Popup Button Toggle button ( CommandLinePopupButton.png ) for opening the Command Line Popup
Inspector Tool giving you the possibility to select HTML elements of the currently shown page by for further investigation inside the HTML Panel
Navigation History Buttons Two buttons ( NavigationBackButton.png and NavigationForwardButton.png ) letting you switch back and forth in Firebug's navigation history
Window Buttons Buttons for minimizing (Minimize button), detaching (Detach button) and suspending Firebug (Close button) (Window Buttons.png)
Panel Selector Menu reachable through PanelSelectorButton.png offering the possibility to toggle the display of panels and to switch between panels
Panel Tab inside the panel bar including special functionality of a module or an extension
Console Panel Panel containing error console and JavaScript command execution functionality
HTML Panel Panel offering information about and functionality for manipulation of the markup structure of the current website/file
CSS Panel Panel containing functionality for CSS information and manipulation of the different CSS containing files of the current website
Script Panel Panel including functionality for JavaScript debugging
DOM Panel Panel with information about the DOM tree of the currently displayed website and functionality for manipulating it
Net Panel Panel offering information about the network requests made during the page load
Panel Toolbar Tool bar inside a panel containing panel related general functionality
Main Panel In case a panel has side panels this means the main area on the left side (by default) of a panel
Side Panel Tab inside an area on the right side (by default) of some panels including related functionality to the main module
Options Menu Menu with general options to the panel openable via the little arrow besides the panel's tab ( ConsolePanelOptionsMenuArrow.png )
Breakpoint Column Vertical bar on the left hand side of a panel for easily creating and removing breakpoints by clicking on it
Edit Mode Mode of some panels for direct manipulation of the underlying source code, which can be activated through the "Edit" button inside the Panel Toolbar
Break On Button Toggle button inside the Panel Toolbar of some panels for stopping JavaScript execution on a specific event and jumping to the Script Panel
Addon Bar Icon Firebug symbol inside the addon bar (formerly called status bar) of Firefox used to open Firebug
Start Button Toolbar button ( StartButton.png ) used to open Firebug
Command Line Popup Command Line available inside every panel
Ancestor Path "Breadcrumb list" of the active or selected element and its anchestors inside the HTML, the DOM and the Script Panel
Search Field Top right text field ( SearchFieldSmall.png ) of the panel bar for searching inside the currently active panel
Search Options Panel Popup displayed at the Search Field containing the options related to the current search
Quick Info Box Panel showing information about the currently hovered element

[edit] Console Panel

Term Description
Break On All Errors Toggle button ( Break on all errors button.png ) inside the Panel Toolbar of the Console Panel for stopping JavaScript execution on all JavaScript errors
Command Line Feature of the Console panel to enter one-line JavaScript code
Command Editor Text editor inside the Console panel for entering JavaScript code consisting of several lines
Completion List Popup Popup listing all commands and properties available in the current context
Command Line Switch Red arrow ( CommandLineSwitch.png ) in the lower right corner of the Console panel allowing to toggle between Command Line and Command Editor
Closure Inspector DOM tree display and Command Line option of closure variables

[edit] HTML Panel

Term Description
Style Side Panel Side Panel including information about and manipulation options to the styles assigned to the currently in the Node View selected node
Computed Side Panel Side Panel showing information about the computed styles for the currently in the Node View selected node
Layout Side Panel Side Panel displaying a box model of the currently in the Node View selected node with functionality for manipulating it
DOM Side Panel Side Panel offering information about the DOM tree of the currently in the Node View selected node and functionality for manipulating it
Node Path Ancestor Path of the HTML Panel
Node View Dynamic tree view of the markup based structure of the page inside the HTML Panel
Break On Mutate Toggle button ( Break On Mutate Button.png ) inside the Panel Toolbar of the HTML Panel for stopping JavaScript execution on HTML mutation

[edit] CSS Panel

Term Description
CSS Location Menu Menu button inside the toolbar of the CSS Panel for switching between the different CSS files included in the currently displayed website

[edit] Script Panel

Term Description
Watch Side Panel Side Panel giving the possibility to watch the changes of variable values while debugging
Stack Side Panel Side Panel containing the stack trace information while debugging
Breakpoints Side Panel Side Panel listing all breakpoints created for the current page
Stack Frame Path Ancestor Path of the Script Panel
Break On Next Toggle button ( Break On Next Button.png ) inside the Panel Toolbar of the Script Panel for stopping JavaScript execution on the next executed line
Script Location Menu Menu button inside the toolbar of the Script Panel for switching between the different JavaScript containing files included in the currently displayed website and (based on the script filter) also eval() and event scripts
Static Scripts JavaScript code blocks statically bound into a page (via <script> tag)
Eval() Scripts JavaScript code blocks created dynamically through XML HTTP Requests
Event Scripts JavaScript code blocks created dynamically through JavaScript events
Break Notification Hint displayed when specific breakpoints are triggered providing more detailed info on why the script execution was halted

[edit] DOM Panel

Term Description
Property Path Ancestor Path of the DOM Panel
Closure Inspector DOM tree display and Command Line option of closure variables

[edit] Net Panel

Term Description
Break On XHR Toggle button ( Break On XHR Button.png ) inside the Panel Toolbar of the Net Panel for stopping JavaScript execution on XMLHttpRequests
Request List List of requests displayed inside the Net panel area
Timeline Waterfall graph of network request timing data

[edit] Actions

Term Description
Activation Enabling Firebug's modules
Open Firebug Activating Firebug and displaying its UI (by pressing F12 or clicking the Firebug Start Button)
Minimize Firebug Hiding the Firebug UI, but keeping Firebug active (by pressing F12 while the UI is open or clicking the Minimize button)
Deactivate/Close Firebug Deactivating Firebug and hiding its UI (by pressing Shift+F12 or clicking the Close button)
Detach Firebug Opening the Firebug UI in its own window (by pressing Ctrl/+F12 or clicking the Detach button while the UI is attached)
(Re-)attach Firebug Docking the Firebug UI inside the browser window (by pressing Ctrl/+F12 or clicking the Detach button while the UI is detached)
Personal tools