diff options
Diffstat (limited to 'files/ar/tools')
| -rw-r--r-- | files/ar/tools/browser_console/index.html | 181 | ||||
| -rw-r--r-- | files/ar/tools/index.html | 209 | ||||
| -rw-r--r-- | files/ar/tools/page_inspector/how_to/index.html | 13 | ||||
| -rw-r--r-- | files/ar/tools/page_inspector/index.html | 65 | ||||
| -rw-r--r-- | files/ar/tools/storage_inspector/index.html | 112 | ||||
| -rw-r--r-- | files/ar/tools/web_console/index.html | 45 | ||||
| -rw-r--r-- | files/ar/tools/web_console/the_command_line_interpreter/index.html | 185 |
7 files changed, 0 insertions, 810 deletions
diff --git a/files/ar/tools/browser_console/index.html b/files/ar/tools/browser_console/index.html deleted file mode 100644 index 81a9a8d321..0000000000 --- a/files/ar/tools/browser_console/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Browser Console -slug: Tools/Browser_Console -translation_of: Tools/Browser_Console ---- -<p>{{ToolsSidebar}}</p> - -<p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p> - -<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p> - -<p>If you also want to use the other web developer tools in the regular Web <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> with add-on or browser code, consider using the <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>.</p> - -<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p> - -<div class="blockIndicator geckoVersionNote"> -<p>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable browser {{Glossary("chrome")}} and add-on debugging toolboxes" (Firefox 40 and later) option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> -</div> - -<h2 id="Opening_the_Browser_Console">Opening the Browser Console</h2> - -<p>You can open the Browser Console in one of two ways:</p> - -<ol> - <li>from the menu: select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li> - <li>from the keyboard: press Ctrl+Shift+J (or Cmd+Shift+J on a Mac).</li> -</ol> - -<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p> - -<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> - -<p>The Browser Console looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16787/browser_console_68.png" style="display: block; height: 339px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p> - -<ul> - <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a>.</li> - <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear.</li> - <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li> -</ul> - -<p>Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled <strong>Show Content Messages</strong>. The following image shows the browser console focused on the same page as above after clicking on the <strong>Show Content Messages</strong> checkbox.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16788/browser_console_68_02.png" style="display: block; height: 339px; margin: 0 auto; width: 800px;"></p> - -<h2 id="Browser_Console_logging">Browser Console logging</h2> - -<p>The Browser console logs the same sorts of messages as the Web Console:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API).</li> - <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li> -</ul> - -<p>However, it displays such messages from:</p> - -<ul> - <li>web content hosted by all browser tabs</li> - <li>the browser's own code</li> - <li>add-ons.</li> -</ul> - -<h3 id="Messages_from_add-ons">Messages from add-ons</h3> - -<p>The Browser Console displays messages logged by all Firefox add-ons.</p> - -<h4 id="Console.jsm">Console.jsm</h4> - -<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p> - -<p>One exported symbol from Console.jsm is "console". Below is an example of how to access it, which adds a message to the Browser Console.</p> - -<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); -console.log("Hello from Firefox code"); //output messages to the console</pre> - -<p>Learn more:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/console">console API reference</a></li> - <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li> -</ul> - -<h4 id="HUDService">HUDService</h4> - -<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. We see we can not only access the Browser Console but also Web Console.</p> - -<p>Here is an example on how to clear the contents of the Browser console:</p> - -<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); -var HUDService = devtools.require("devtools/client/webconsole/hudservice"); - -var hud = HUDService.getBrowserConsole(); -hud.jsterm.clearOutput(true);</pre> - -<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p> - -<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); -var HUDService = devtools.require("devtools/client/webconsole/hudservice"); - -var hud = HUDService.getBrowserConsole(); - -var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); -clearBtn.addEventListener('mouseover', function() { - hud.jsterm.clearOutput(true); -}, false);</pre> - -<h4 id="Bonus_Features_Available">Bonus Features Available</h4> - -<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p> - -<pre class="brush: js">widget = require("sdk/widget").Widget({ - id: "an-error-happened", - label: "Error!", - width: 40, - content: "Error!", - onClick: logError -}); - -function logError() { - console.error("something went wrong!"); -}</pre> - -<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p> - -<h2 id="Browser_Console_command_line">Browser Console command line</h2> - -<div class="blockIndicator geckoVersionNote"> -<p>The Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> -</div> - -<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p> - -<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p> - -<h3 id="Controlling_the_browser">Controlling the browser</h3> - -<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p> - -<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); -newTabBrowser.addEventListener("load", function() { - newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; -}, true); -newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> - -<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can restart the browser with the command <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Windows, Linux) or <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> (Mac) This command restarts the browser with the same tabs open as before the restart.</p> -</div> - -<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3> - -<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p> - -<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); -var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); -makeTheTea.setAttribute("label", "A nice cup of tea?"); -parent.appendChild(makeTheTea);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On macOS, this similar code will add a new item to the "Tools" menu:</p> - -<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); -var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); -makeTheTea.setAttribute("label", "A nice cup of tea?"); -parent.appendChild(makeTheTea);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ar/tools/index.html b/files/ar/tools/index.html deleted file mode 100644 index 7fe4951617..0000000000 --- a/files/ar/tools/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: أدوات مطور فايرفوكس -slug: Tools -translation_of: Tools ---- -<div>{{ToolsSidebar}}</div> - -<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> - -<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> - -<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> -</div> - -<h2 id="The_Core_Tools">The Core Tools</h2> - -<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> - -<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> - -<table class="standard-table" style="height: 178px; width: 840px;"> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> - <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> - <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> - <td>Toggles Responsive Design Mode.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> - <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> - <td>Closes the Developer Tools</td> - </tr> - </tbody> -</table> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Page_Inspector">Page Inspector</h3> - -<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> -</div> - -<div class="column-half"> -<h3 id="Web_Console">Web Console</h3> - -<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See messages logged by a web page and interact with the page using JavaScript.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> - -<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> -</div> - -<div class="column-half"> -<h3 id="Network_Monitor">Network Monitor</h3> - -<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See the network requests made when a page is loaded.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Performance_Tools">Performance Tools</h3> - -<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> -</div> - -<div class="column-half"> -<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> - -<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>See how your website or app will look and behave on different devices and network types.</p> -</div> -</div> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Accessibility_inspector">Accessibility inspector</h3> - -<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> - -<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> -</div> - -<div class="column-half"></div> -</div> - -<div class="note"> -<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> -</div> - -<h2 id="More_Tools">More Tools</h2> - -<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> - <dd>Figure out which objects are keeping memory in use.</dd> - <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> - <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> - <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> - <dd>Inspect the page's DOM properties, functions, etc.</dd> - <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd>Select a color from the page.</dd> - <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> - <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> - <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> - <dd>View and edit CSS styles for the current page.</dd> - <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> - <dd>Take a screenshot of the entire page or of a single element.</dd> - <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> - <dd>Measure a specific area of a web page.</dd> - <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> - <dd>Overlay horizontal and vertical rulers on a web page</dd> -</dl> -</div> - -<div class="column-container"> -<div class="column-third"> -<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> - -<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> - -<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> -</div> - -<div class="column-third"></div> -</div> - -<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> - -<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> - <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> - <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> - <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> - <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> - <dd>Connect the developer tools to a specific iframe in the current page.</dd> - <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> - <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> -</dl> -</div> - -<h2 id="Debugging_the_browser">Debugging the browser</h2> - -<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> - <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> - <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> - <dd>Attach the Developer Tools to the browser itself.</dd> -</dl> -</div> - -<h2 id="Extending_the_devtools">Extending the devtools</h2> - -<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> - -<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> - -<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> - -<h2 id="Contribute">Contribute</h2> - -<p>If you want to help improve the developer tools, these resources will get you started.</p> - -<div class="twocolumns"> -<dl> - <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> - <dd>Our developer documentation explains how to get involved.</dd> - <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> - <dd>A tool helping to find bugs to work on.</dd> -</dl> -</div> diff --git a/files/ar/tools/page_inspector/how_to/index.html b/files/ar/tools/page_inspector/how_to/index.html deleted file mode 100644 index 2f18038ec9..0000000000 --- a/files/ar/tools/page_inspector/how_to/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How to -slug: Tools/Page_Inspector/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Page_Inspector/How_to ---- -<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> - -<p>{{ ListSubpages () }}</p> - -<p> </p> diff --git a/files/ar/tools/page_inspector/index.html b/files/ar/tools/page_inspector/index.html deleted file mode 100644 index 518af28f10..0000000000 --- a/files/ar/tools/page_inspector/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Page Inspector -slug: Tools/Page_Inspector -tags: - - CSS - - DOM - - HTML - - NeedsTranslation - - Stylesheets - - TopicStub - - Web Development - - 'Web Development:Tools' - - 'l10n:priority' -translation_of: Tools/Page_Inspector ---- -<div>{{ToolsSidebar}}</div> - -<p>Use the Page Inspector to examine and modify the HTML and CSS of a page.</p> - -<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p> - -<hr> -<h2 id="User_Interface_Tour">User Interface Tour</h2> - -<p>To find your way around the Inspector, here's a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p> - -<p>You can split the Rules view out into its own pane, separate from the other tabs on the CSS pane — this is called <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>.</p> - -<hr> -<h2 id="How_to">How to</h2> - -<p>To find out what you can do with the Inspector, see the following how to guides:</p> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Edit fonts</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Examine CSS flexbox layouts</a></li> -</ul> -</div> - -<hr> -<h2 id="Reference">Reference</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts </a></li> - <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a></li> -</ul> -</div> diff --git a/files/ar/tools/storage_inspector/index.html b/files/ar/tools/storage_inspector/index.html deleted file mode 100644 index b4292a14ea..0000000000 --- a/files/ar/tools/storage_inspector/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Storage Inspector -slug: Tools/Storage_Inspector -translation_of: Tools/Storage_Inspector ---- -<div>{{ToolsSidebar}}</div> - -<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p> - -<ul> - <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> - <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li> - <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li> - <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li> - <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li> -</ul> - -<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p> - -<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2> - -<p>You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p> - -<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p> - -<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2> - -<p>The Storage Inspector UI is split into three main components:</p> - -<ul> - <li><a href="#storage-tree">Storage tree</a></li> - <li><a href="#table-widget">Table Widget</a></li> - <li><a href="#sidebar">Sidebar</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p> - -<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3> - -<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p> - -<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p> - -<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p> - -<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p> - -<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p> - -<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> - -<p>The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p> - -<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p> - -<h3 id="Search">Search</h3> - -<p>There's a search box at the top of the Table Widget:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p> - -<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p> - -<h3 id="Add_and_refresh_storage">Add and refresh storage</h3> - -<p>You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p> - -<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3> - -<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p> - -<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:</p> - -<ul> - <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li> - <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li> - <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li> -</ul> - -<p>The shown values can also be filtered using the search box at the top of the sidebar.</p> - -<h2 id="Working_with_the_Storage_Inspector">Working with the Storage Inspector</h2> - -<p>The following articles cover different aspects of using the network monitor:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Storage_Inspector/Cookies">Cookies</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage">Local Storage / Session Storage</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector/Cache_Storage">Cache Storage</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector/IndexedDB">IndexedDB</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector/Extension_Storage">Extension Storage</a></li> -</ul> diff --git a/files/ar/tools/web_console/index.html b/files/ar/tools/web_console/index.html deleted file mode 100644 index f209646681..0000000000 --- a/files/ar/tools/web_console/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Web Console -slug: Tools/Web_Console -tags: - - أدوات - - الأمان - - التصحيح - - التنقيح - - تطوير الويب - - 'تطوير الويب: أدوات' - - وحدة تحكم الويب -translation_of: Tools/Web_Console ---- -<p><strong>وحدة تحكم الويب:</strong></p> - -<ol> - <li>تسجل المعلومات المرتبطة بصفحة الويب: طلبات الشبكة، جافا سكريبت، CSS, أخطاء الأمان و التحذيرات باﻹضافة إلى اﻷخطاء، التحذير والرسائل الإعلامية التي يتم تسجيلها بشكل صريح من خلال شفرة جافا سكريبت التي تعمل في سياق الصفحة</li> - <li>تمكّنك من التفاعل مع صفحة الويب عن طريق تنفيذ تعبيرات جافا سكريبت في سياق الصفحة</li> -</ol> - -<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">فتح وحدة تحكم الويب</a></dt> - <dd>كيف تبدأ إستعمال وحدة تحكم الويب.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">مفسّر سطر الأوامر</a></dt> - <dd>كيف تتفاعل مع مستند بإستعمال وحدة التحكم.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">وحدة التحكم</a></dt> - <dd>إستخدم وحدة التحكم بجانب الأدوات الأخرى.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">رسائل وحدة التحكم </a></dt> - <dd>تفاصيل الرسائل التي تسجلها وحدة التحكم.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">خرج غني</a></dt> - <dd>شاهد و تفاعل مع الكائنات التي تسجلها وحدة التحكم.</dd> - <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">إختصارات لوحة المفاتيح</a></dt> - <dd>مرجع اﻹختصار.</dd> -</dl> -</div> -</div> diff --git a/files/ar/tools/web_console/the_command_line_interpreter/index.html b/files/ar/tools/web_console/the_command_line_interpreter/index.html deleted file mode 100644 index 119cc57f13..0000000000 --- a/files/ar/tools/web_console/the_command_line_interpreter/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: The JavaScript input interpreter -slug: Tools/Web_Console/The_command_line_interpreter -translation_of: Tools/Web_Console/The_command_line_interpreter ---- -<div>{{ToolsSidebar}}</div> - -<p>You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.</p> - -<h2 id="Single-line_mode">Single-line mode</h2> - -<p>For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the <strong>>></strong> prompt.</p> - -<p><img alt="The Web Console, showing single-line mode" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p> - -<p>To enter expressions in single-line mode, type at the prompt and press <kbd>Enter</kbd>. To enter multi-line expressions, press <kbd>Shift</kbd>+<kbd>Enter</kbd> after typing each line, then <kbd>Enter</kbd> to run all the entered lines.</p> - -<p>The expression you type is echoed under the input prompt, followed by the result.</p> - -<p>If your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p> - -<p>For example, if you type:</p> - -<pre class="brush: js" dir="rtl">function foo() {</pre> - -<p>and then <kbd>Enter</kbd>, the Console does not immediately execute the input, but behaves as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p> - -<h2 id="Multi-line_mode">Multi-line mode</h2> - -<p>For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). The multi-line editing pane opens on the left side the of Web Console.</p> - -<p><img alt="Web Console in multi-line mode" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p> - -<p>You can enter multiple lines of JavaScript by default in this mode, pressing <kbd>Enter</kbd> after each one. To execute the snippet that is currently in the editing pane, click the <strong>Run</strong> button or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> (or <kbd>Cmd</kbd>+<kbd>Return</kbd> on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.</p> - -<p>Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.</p> - -<p>You can open files when in multi-line mode, and save the current contents of the editing pane to a file.</p> - -<ul> - <li>To open a file, press <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> on MacOS). A file dialog box opens so you can select the file to open.</li> - <li>To save the contents of the editing pane, press <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> on MacOS). A file dialog box opens so you can specify the location to save to.</li> -</ul> - -<p>To switch back to single-line mode, click the <strong>X</strong> icon at the top of the multi-line editing pane, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> - -<h2 id="Accessing_variables">Accessing variables</h2> - -<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript libraries like <em>jQuery</em>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="Autocomplete">Autocomplete</h2> - -<p>The editor has autocomplete: enter the first few letters and a popup appears with possible completions:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p> - -<p>Press <kbd>Enter</kbd>, <kbd>Tab</kbd>, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p> - -<p>Console autocomplete suggestions are case-insensitive.</p> - -<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p> - -<p>You get autocomplete suggestions for array elements, as well:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<p>You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Enable Autocompletion</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> - -<h2 id="Instant_evaluation">Instant evaluation</h2> - -<div class="blockIndicator note"> -<p>This feature is available in Firefox Nightly, in versions labeled 74 and later.</p> -</div> - -<p>When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.</p> - -<p>You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Instant Evaluation</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> - -<h2 id="Execution_context">Execution context</h2> - -<p>Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click <strong>Run</strong>, you can switch to single-line mode and still use your function.</p> - -<h2 id="Syntax_highlighting">Syntax highlighting</h2> - -<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p> - -<p>The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".</p> - -<p>The output is highlighted as well where appropriate.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Syntax highlighting is not visible in your browser if Accessibility features have been enabled.</p> -</div> - -<h2 id="Execution_history">Execution history</h2> - -<p>The interpreter remembers expressions you've typed. To move back and forward through your history:</p> - -<ul> - <li>In single-line mode, use the up and down arrows. </li> - <li>In multi-line mode, use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the editing panel's toolbar.</li> -</ul> - -<p>The expression history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p> - -<p>You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press <kbd>F9</kbd>. On Mac press <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>note:</strong> not <kbd>Cmd</kbd>+<kbd>R</kbd>!) to initiate the reverse search.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p> - -<p>Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing <kbd>F9</kbd> on Windows and Linux ( <kbd>Ctrl</kbd>+<kbd>R</kbd> on Mac) cycles backwards through the matches.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>Once you have initiated the reverse search, you can use <kbd>Shift</kbd> + <kbd>F9</kbd> on Windows or Linux ( <kbd>Ctrl</kbd>+<kbd>S</kbd> on Mac) to search forward in the list of matches. You can also use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the expression search bar.</p> - -<p>When you find the expression you want, press <kbd>Enter</kbd> (<kbd>Return</kbd>) to execute the statement.</p> - -<h2 id="Working_with_iframes">Working with iframes</h2> - -<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p> - -<p>You can pass the iframe DOM element:</p> - -<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1"); -cd(frame);</pre> - -<p>You can pass a CSS selector that matches the iframe:</p> - -<pre class="brush: js" dir="rtl">cd("#frame1");</pre> - -<p>You can pass the iframe's global window object:</p> - -<pre class="brush: js" dir="rtl">var frame = document.getElementById("frame1"); -cd(frame.contentWindow); -</pre> - -<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p> - -<pre class="brush: js" dir="rtl">cd();</pre> - -<p>For example, suppose we have a document that embeds an iframe:</p> - -<pre class="brush: html" dir="rtl"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - </head> - <body> - <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> - </body> -</html></pre> - -<p>The iframe defines a new function:</p> - -<pre class="brush: html" dir="rtl"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8"> - <script> - function whoAreYou() { - return "I'm frame1"; - } - </script> - </head> - <body> - </body> -</html></pre> - -<p>You can switch context to the iframe like this:</p> - -<pre class="brush: js" dir="rtl">cd("#frame1");</pre> - -<p>Now you'll see that the global window's document is the iframe:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;"></p> - -<p>And you can call the function defined in the iframe:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> - -<h2 id="Helper_commands">Helper commands</h2> - -<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p> |