diff options
Diffstat (limited to 'files/de/tools')
9 files changed, 0 insertions, 885 deletions
diff --git a/files/de/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html deleted file mode 100644 index a342b78ee8..0000000000 --- a/files/de/tools/about_colon_debugging/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: 'about:debugging' -slug: 'Tools/about:debugging' -translation_of: 'Tools/about:debugging' ---- -<p>{{ToolsSidebar}}</p> - -<p>The <code>about:debugging</code> page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p> - -<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> - -<p>There are two ways to open <code>about:debugging</code>:</p> - -<ul> - <li>Type <code>about:debugging</code> in the Firefox URL bar.</li> - <li>In the <strong>Tools</strong> > <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li> -</ul> - -<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p> - -<dl> - <dt>Setup</dt> - <dd>Use the Setup tab to configure the connection to your remote device.</dd> - <dt>This Firefox</dt> - <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> - -<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<h2 id="Setup_tab">Setup tab</h2> - -<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3> - -<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> - -<p>Before you connect:</p> - -<ol> - <li>Enable Developer settings on your Android device.</li> - <li>Enable USB debugging in the Android Developer settings.</li> - <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> - <li>Connect the Android device to your computer using a USB cable.</li> -</ol> - -<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> - -<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> -</div> - -<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p> - -<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> - -<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p> - -<p><img alt="The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> - -<p>In Firefox 76 and above, the message can look like the following:</p> - -<p><img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p> - -<p>See <a href="#">Connection for Firefox for Android 68</a> for more information.</p> - -<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> - -<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p> - -<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.</p> - -<p>Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the <strong>Reload</strong> button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the <strong>Back</strong> and <strong>Forward</strong> buttons.</p> - -<h3 id="Connecting_over_the_Network">Connecting over the Network</h3> - -<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> - -<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="This_Firefox">This Firefox</h2> - -<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p> - -<dl> - <dt>Temporary Extensions</dt> - <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> - <dt>Extensions</dt> - <dd>This section lists information about the extensions that you have installed on your system.</dd> - <dt>Service Workers, Shared Workers, and Other Workers</dt> - <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> - -<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> - -<h2 id="Extensions">Extensions</h2> - -<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3> - -<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p> - -<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> - -<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> - -<ul> - <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> - <li>You can load an add-on without signing it and without needing to disable signing.</li> -</ul> - -<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> - -<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> - -<p>You can use the following buttons:</p> - -<dl> - <dt>Inspect</dt> - <dd>Loads the extension in the debugger.</dd> - <dt>Reload</dt> - <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> - <dt>Remove</dt> - <dd>Unloads the temporary extension.</dd> -</dl> - -<p>Other information about the extension is displayed:</p> - -<dl> - <dt>Location</dt> - <dd>The location of the extension's source code on your local system.</dd> - <dt>Extension ID</dt> - <dd>The temporary ID assigned to the extension.</dd> - <dt>Internal UUID</dt> - <dd>The internal UUID assigned to the extension.</dd> - <dt>Manifest URL</dt> - <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> -</dl> - -<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3> - -<p>If you install an extension in this way, what happens when you update the extension?</p> - -<ul> - <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> - <li>For other changes, click the <strong>Reload</strong> button. This does what it says: - <ul> - <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> - <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> - </ul> - </li> -</ul> - -<h3 id="Installed_Extensions">Installed Extensions</h3> - -<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> - -<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> - -<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> - -<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> - -<div class="note"> -<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> -</div> - -<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> - -<div class="blockIndicator note"> -<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p> -</div> - -<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> - -<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> - -<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> - -<h2 id="Workers">Workers</h2> - -<p>The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:</p> - -<ul> - <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> - <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> - <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> -</ul> - -<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> - -<h3 id="Service_worker_state">Service worker state</h3> - -<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> - -<ul> - <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> - <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> - <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> -</ul> - -<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> - -<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools <a href="/en-US/docs/Tools/Application">Application panel</a>.</p> -</div> - -<h3 id="Unregistering_service_workers">Unregistering service workers</h3> - -<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> - -<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> - -<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> - -<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> - -<div> -<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> -</div> - -<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> - -<h2 id="Connection_to_Firefox_for_Android_68">Connection to Firefox for Android 68</h2> - -<p>Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:</p> - -<ul> - <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox Preview</a>, if your desktop Firefox is the main release or Developer Edition</li> - <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox for Android Nightly</a></li> -</ul> - -<p>If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">Firefox Extended Support Release (ESR)</a>, which is also based on version 68.</p> - -<p>Note that <code>about:debugging</code> is not enabled by default in Firefox ESR. To enable it, open the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> (<code>about:config</code>) and set <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<p>If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">What happens to my profile if I downgrade to a previous version of Firefox?</a></p> diff --git a/files/de/tools/browser_console/index.html b/files/de/tools/browser_console/index.html deleted file mode 100644 index 39d8c889ec..0000000000 --- a/files/de/tools/browser_console/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Browser Console -slug: Tools/Browser_Console -translation_of: Tools/Browser_Console ---- -<div>{{ToolsSidebar}}</div><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>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> - -<p>To open the Browser Console, select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X).</p> - -<p>From Firefox 27 onwards, 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/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></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> - -<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 acess it, which adds a message to the Browser Console.</p> - -<pre class="brush: js">const Cu = Components.utils; -const consoleJSM = -Cu.import("resource://gre/modules/devtools/Console.jsm", {}); -let console = consoleJSM.console; //access exported symbol of "console" from the Console.jsm - -<code>console.log("Hello from Firefox code"); //output messages to the console</code></pre> - -<p> </p> - -<p>The full module with other functionality is found here on <a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Mozilla Cross-Reference</a>.</p> - -<p>For more methods of the console exported attribute of the Console.jsm see this article: <a href="/en-US/docs/Web/API/console?redirectlocale=en-US&redirectslug=DOM%2Fconsole">Console</a></p> - -<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="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</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">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools; -var HUDService = devtools.require("devtools/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">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools; -var HUDService = devtools.require("devtools/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> - -<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> - -<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 OS X, 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/de/tools/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html deleted file mode 100644 index db733cd8f2..0000000000 --- a/files/de/tools/debugger/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Use a source map -slug: Tools/Debugger/How_to/Use_a_source_map -translation_of: Tools/Debugger/How_to/Use_a_source_map ---- -<div>{{ToolsSidebar}}</div> - -<p>The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:</p> - -<ul> - <li>sources are often combined and <a href="https://en.wikipedia.org/wiki/Minification_(programming)">minified</a> to make delivering them from the server more efficient.</li> - <li>JavaScript running in a page is often machine-generated, as when compiled from a language like <a href="http://coffeescript.org/">CoffeeScript</a> or <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> -</ul> - -<p>In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.</p> - -<p>To enable the debugger to work with a source map, you must:</p> - -<ul> - <li>generate the source map</li> - <li>include a comment in the transformed file, that points to the source map. The comment's syntax is like this:</li> -</ul> - -<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> - -<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> - -<p>In the video above we load <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:</p> - -<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre> - -<p>In the Debugger's <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a>, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.</p> diff --git a/files/de/tools/page_inspector/how_to/edit_fonts/index.html b/files/de/tools/page_inspector/how_to/edit_fonts/index.html deleted file mode 100644 index 36432b5afa..0000000000 --- a/files/de/tools/page_inspector/how_to/edit_fonts/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Schriftarten Bearbeitung -slug: Tools/Page_Inspector/How_to/Edit_fonts -translation_of: Tools/Page_Inspector/How_to/Edit_fonts -original_slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung ---- -<div>{{ToolsSidebar}}</div> - -<div> Dieser Artikel bietet einen Überblick über die in den Firefox DevTools verfügbaren Schriftarten-Tools. Dieses Tool enthält mehrere nützliche Funktionen zum Anzeigen und Bearbeiten von Schriftarten, die auf ein im Browser geladenes Dokument angewendet werden, einschließlich der Überprüfung aller auf die Seite angewendeten Schriftarten und der präzisen Anpassung der Werte variabler Schriftachsen.{</div> - -<div>{ToolsSidebar}}</div> - -<p class="summary">This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.</p> - -<div class="note"> -<p><strong>Note:</strong> The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).</p> -</div> - -<h2 id="The_Fonts_tab">The Fonts tab</h2> - -<p>The Fonts tab is located on the right-hand side of the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:</p> - -<ol> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Page Inspector</a>.</li> - <li>Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p> - -<p>The Fonts tab has three major sections:</p> - -<ul> - <li>"Fonts used" by the currently inspected element.</li> - <li>The new Fonts Editor. In Firefox 61 and 62, this section does not exist.</li> - <li>"All fonts on page" — This section lists all of the fonts in use on the page. In Firefox 61 and 62, this area is labeled "Other fonts in page" and doesn't include the fonts mentioned in the "Fonts used" section.</li> -</ul> - -<h2 id="Fonts_used">Fonts used</h2> - -<p>The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p> - -<p>Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."</p> - -<p>Fonts will be included in this section for one of the following reasons:</p> - -<ul> - <li>They are listed in the element's <code>font-family</code> CSS declaration value.</li> - <li>They are applied to the element as part of the browser's default styling (Times New Roman for most browsers), and no author-defined font has been supplied.</li> - <li>They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.</li> - <li>They are system fallback fonts used when nothing from the <code>font-family</code> CSS declaration has been applied.</li> -</ul> - -<h2 id="Fonts_Editor">Fonts Editor</h2> - -<p>Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p> - -<p>For standard (static) fonts, you will be able to change the settings listed below</p> - -<h3 id="Size">Size</h3> - -<p>The {{cssxref("font-size")}} for the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p> - -<p>This can be set using <code>em</code>, <code>rem</code>, <code>%</code>, <code>px</code>, <code>vh</code>, or <code>vw</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p> - -<div class="note"> -<p><strong>Note</strong>: If you want to use a different unit such as <code>pt</code> for <code>font-size</code> or <code>line-height</code>, you can set the property value applied to the currently inspected element to use that unit via the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">rules view</a>, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.</p> -</div> - -<p>Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.</p> - -<p>Example: If <code>1rem</code> is equivalent to 10 pixels, when you change the unit of measurement from <code>rem</code> to <code>px</code>, <code>2rem</code> becomes <code>20px</code>.</p> - -<h3 id="Line_height">Line height</h3> - -<p>The {{cssxref("line-height")}} of the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>This can be set using unitless, <code>em</code>, <em>%</em>, or <code>px</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p> - -<p>Changing the unit of measure changes the value relative to the <code>font-size</code> setting.</p> - -<p>Example: If the font is 20 pixels high and the line-height is <code>1.5em</code>, when you change the unit of measure from <code>em</code> to <code>px</code>, the value will become <code>30px</code>.</p> - -<h3 id="Weight">Weight</h3> - -<p>The {{cssxref("font-weight")}} for the inspected element.</p> - -<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.</p> - -<div class="note"> -<p><strong>Note</strong>: For <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable fonts</a> (see below) that define a <code>wght</code> variation axis, this range is custom.</p> -</div> - -<h3 id="Italic">Italic</h3> - -<p>The {{cssxref("font-style")}} for the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>This setting toggles between <code>italic</code> and <code>normal</code> values for the <code>font-style</code> CSS property.</p> - -<div class="note"> -<p><strong>Note</strong>: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.</p> -</div> - -<h2 id="All_fonts_on_page">All fonts on page</h2> - -<p>The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p> - -<p>The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.</p> - -<p>Each font listed in this section shows you:</p> - -<ul> - <li>The <code>font-family</code> identifier and full name of the font.</li> - <li>The URL to the font file in the case of web fonts not available on your system, or "System" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL.</li> - <li>The {{cssxref("@font-face")}} descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.</li> - <li>A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is "Abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value.</li> -</ul> - -<h2 id="Variable_font_support_in_Firefox_Developer_Tools">Variable font support in Firefox Developer Tools</h2> - -<p>Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.</p> - -<h3 id="What_are_variable_fonts">What are variable fonts?</h3> - -<p><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable Fonts</a>, or <strong>OpenType Font Variations</strong>, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.</p> - -<p>Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by <strong>axes of variation</strong> (see <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).</p> - -<p>There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer <em>does </em>implement a registered axis, its behavior <em>must</em> follow the defined behavior.</p> - -<p>All variable font axes have a four-character axis tag. The CSS <code>{{cssxref("font-variation-settings")}}</code> property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using <code>font-variation-settings</code>, you could do something like this:</p> - -<pre class="brush: css notranslate">font-variation-settings: "wght" 350;</pre> - -<p>However, you should only use <code>font-variation-settings</code> as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).</p> - -<div class="note"> -<p><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade.</p> -</div> - -<p>Here are the registered axes along with their corresponding CSS properties:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Axis Tag</th> - <th scope="col">CSS Property</th> - </tr> - </thead> - <tbody> - <tr> - <td>"wght"</td> - <td>{{cssxref("font-weight")}}</td> - </tr> - <tr> - <td>"wdth"</td> - <td>{{cssxref("font-stretch")}}</td> - </tr> - <tr> - <td>"slnt" (slant)</td> - <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> - </tr> - <tr> - <td>"ital"</td> - <td>{{cssxref("font-style")}}: <code>italic</code></td> - </tr> - <tr> - <td>"opsz"</td> - <td> - <p>{{cssxref("font-optical-sizing")}}</p> - </td> - </tr> - </tbody> -</table> - -<p>Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.</p> - -<div class="note"> -<p><strong>Note</strong>: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.</p> -</div> - -<div class="warning"> -<p><strong>Warning</strong>: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.</p> -</div> - -<h4 id="Working_with_Variable_fonts_in_the_Font_Editor">Working with Variable fonts in the Font Editor</h4> - -<p>If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p> - -<p>You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.</p> - -<p>Here are a couple of examples of fonts with different axes defined:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p> - -<p>In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p> - -<p>The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p> - -<ul> -</ul> - -<h2 id="Tips">Tips</h2> - -<p>Finally, here are a few tips for making effective use of the Fonts tab:</p> - -<ul> - <li>When using the Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>, you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab.</li> - <li>If you hover over the {{cssxref("font-family")}} property in the Rules view, a tooltip shows a sample of the font: - <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p> - </li> - <li>You'll also notice in the above screenshot that the font in the <code>font-family</code> font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.</li> -</ul> diff --git a/files/de/tools/paint_flashing_tool/index.html b/files/de/tools/paint_flashing_tool/index.html deleted file mode 100644 index 7fca9a3167..0000000000 --- a/files/de/tools/paint_flashing_tool/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Paint Flashing Tool -slug: Tools/Paint_Flashing_Tool -translation_of: Tools/Paint_Flashing_Tool ---- -<div>{{ToolsSidebar}}</div><p>The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.</p> - -<h2 id="Repaints_and_responsiveness">Repaints and responsiveness</h2> - -<p>When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class that changes the element's style.</p> - -<p>Repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.</p> - -<p>The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.</p> - -<h2 id="Using_the_paint_flashing_tool">Using the paint flashing tool</h2> - -<p>There are two ways to switch on paint flashing:</p> - -<ul> - <li>open the <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Toolbox</a>, then click the icon labeled "Highlight painted area":</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<ul> - <li>activate the <a href="/en-US/docs/Tools/GCLI" title="/en-US/docs/Tools/GCLI">Developer Toolbar</a> and type "paintflashing on", then press the Enter key:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5931/paint-flashing-open-from-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">In this example, there are two main sources of repaints:</p> - -<ul> - <li>moving the mouse over links makes the browser repaint them, because they have a style applied using the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class</li> - <li>scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right</li> -</ul> - -<p>To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again, or type "paintflashing off" into the Developer Toolbar and press Enter.</p> - -<h2 id="Example_CSS_transitions">Example: CSS transitions</h2> - -<p>One area where implementation choices can affect repaint efficiency is in <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's <a href="/en-US/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a>, while the second way moves the element using the <a href="/en-US/docs/Web/CSS/transform" title="/en-US/docs/Web/CSS/transform"><code>transform</code></a> property.</p> - -<pre class="brush: html"><body> - <div id="container"> - <div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div> - <div class="moving-box" id="moving-box-transform">Transition using transform</div> - </div> -</body> - -</pre> - -<pre class="brush: css">#container { - border: 1px solid; -} - -.moving-box { - height: 20%; - width:20%; - margin: 2%; - padding: 2%; - background-color: blue; - color: white; - font-size: 24px; -} - -#moving-box-left-margin { - transition: margin-left 4s; -} - -#moving-box-transform { - transition: transform 4s; -} - -body:hover #moving-box-left-margin{ - margin-left: 74%; -} - -body:hover #moving-box-transform { - transform: translate(300%); -}</pre> - -<p>To see the transition, move the mouse into the space below:</p> - -<p>{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}</p> - -<p>Now switch paint flashing on, and try it again. You should see that the <code>margin-left</code> version triggers a series of repaints as the element moves, while the <code>transform</code> version only causes repaints in the start and end positions.</p> - -<p>Why? Well, when you use <code>transform</code>, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.</p> - -<p>In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.</p> diff --git a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html deleted file mode 100644 index 0b90f7db95..0000000000 --- a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Debugging Firefox Desktop -slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop -translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop ---- -<p>{{draft}}</p> - -<p>{{ToolsSidebar}}</p> - -<p>This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the <em>debuggee</em>, and the instance of Firefox doing the debugging is called the <em>debugger</em>.</p> - -<h2 id="Enable_remote_debugging">Enable remote debugging</h2> - -<p>First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>. If you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, they are checked by default.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>You only need to do this once: the setting values persist across restarts.</p> - -<h2 id="Start_the_debugger_server">Start the debugger server</h2> - -<p>Next, you need to start the debugger server in the debuggee.</p> - -<p>Run the debuggee from the command line, passing it the <code>--start-debugger-server</code> option:</p> - -<pre class="notranslate">/path/to/firefox --start-debugger-server</pre> - -<p>Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:</p> - -<pre class="notranslate">/path/to/firefox --start-debugger-server 1234</pre> - -<p>Note: in Windows, the <code>start-debugger-server</code> call will only have one dash:</p> - -<pre class="notranslate">firefox.exe -start-debugger-server 1234</pre> - -<div class="note"> -<p><strong>Note</strong>: By default, and for security reasons, the <code>devtools.debugger.force-local</code> option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.</p> -</div> diff --git a/files/de/tools/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html deleted file mode 100644 index b8411a08dd..0000000000 --- a/files/de/tools/storage_inspector/cache_storage/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Cache Storage -slug: Tools/Storage_Inspector/Cache_Storage -translation_of: Tools/Storage_Inspector/Cache_Storage ---- -<div>{{ToolsSidebar}}</div> - -<p>Under the <em>Cache Storage</em> type within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p> - -<ul> - <li>the URL for the resource.</li> - <li>the status code for the request that was made to fetch it.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p> diff --git a/files/de/tools/storage_inspector/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html deleted file mode 100644 index 2ede236480..0000000000 --- a/files/de/tools/storage_inspector/indexeddb/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: IndexedDB -slug: Tools/Storage_Inspector/IndexedDB -translation_of: Tools/Storage_Inspector/IndexedDB ---- -<div>{{ToolsSidebar}}</div> - -<p>When you select an origin inside the <em>Indexed DB</em> storage type in the storage tree of the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, a table lists the details of all the databases present for that origin.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p> -</div> - -<p>Databases have the following details:</p> - -<ul> - <li><em>Database Name</em> — The name of the database.</li> - <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database.</li> - <li><em>Origin</em> — The origin of the database.</li> - <li><em>Version</em> — The database version.</li> - <li><em>Object Stores</em> — The number of object stores in the database.</li> -</ul> - -<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p> - -<ul> - <li><em>Object Store Name</em> — The name of the object store.</li> - <li><em>Key</em> — The {{domxref("IDBIndex.keyPath", "keyPath")}} property of the object store.</li> - <li><em>Auto Increment</em> — Is automatic incrementation of the keys enabled?</li> - <li><em>Indexes</em> — Array of indexes present in the object store as shown below.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p> - -<p>You can delete an IndexedDB database using the context menu in the storage tree:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> - -<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p> - -<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> diff --git a/files/de/tools/storage_inspector/local_storage_session_storage/index.html b/files/de/tools/storage_inspector/local_storage_session_storage/index.html deleted file mode 100644 index 464345892a..0000000000 --- a/files/de/tools/storage_inspector/local_storage_session_storage/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Local Storage / Session Storage -slug: Tools/Storage_Inspector/Local_Storage_Session_Storage -translation_of: Tools/Storage_Inspector/Local_Storage_Session_Storage ---- -<div>{{ToolsSidebar}}</div> - -<p>When an origin corresponding to local storage or session storage is selected within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, the names and values of all the items corresponding to local storage or session storage will be listed in a table.</p> - -<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p> - -<p>{{EmbedYouTube("UKLgBBUi11c")}}</p> - -<p>You can delete local storage and session storage entries using the context menu:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p> - -<p>You can also delete local and session storage entries by selecting an item and pressing the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key.</p> - -<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p> |