From 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 12:58:54 -0400 Subject: delete pages that were never translated from en-US (de, part 1) (#1548) --- files/de/tools/about_colon_debugging/index.html | 252 --------------------- files/de/tools/browser_console/index.html | 157 ------------- .../debugger/how_to/use_a_source_map/index.html | 32 --- .../page_inspector/how_to/edit_fonts/index.html | 232 ------------------- files/de/tools/paint_flashing_tool/index.html | 94 -------- .../debugging_firefox_desktop/index.html | 38 ---- .../storage_inspector/cache_storage/index.html | 15 -- .../tools/storage_inspector/indexeddb/index.html | 45 ---- .../local_storage_session_storage/index.html | 20 -- 9 files changed, 885 deletions(-) delete mode 100644 files/de/tools/about_colon_debugging/index.html delete mode 100644 files/de/tools/browser_console/index.html delete mode 100644 files/de/tools/debugger/how_to/use_a_source_map/index.html delete mode 100644 files/de/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/de/tools/paint_flashing_tool/index.html delete mode 100644 files/de/tools/remote_debugging/debugging_firefox_desktop/index.html delete mode 100644 files/de/tools/storage_inspector/cache_storage/index.html delete mode 100644 files/de/tools/storage_inspector/indexeddb/index.html delete mode 100644 files/de/tools/storage_inspector/local_storage_session_storage/index.html (limited to 'files/de/tools') 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' ---- -

{{ToolsSidebar}}

- -

The about:debugging 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.

- -

Opening the about:debugging page

- -

There are two ways to open about:debugging:

- - - -

When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:

- -
-
Setup
-
Use the Setup tab to configure the connection to your remote device.
-
This Firefox
-
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.
-
- -

- -

If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.

- -

Setup tab

- -

Connecting to a remote device

- -

Firefox supports debugging over USB with Android devices, using the about:debugging page.

- -

Before you connect:

- -
    -
  1. Enable Developer settings on your Android device.
    2. -
  2. Enable USB debugging in the Android Developer settings.
    3. -
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. -
  4. Connect the Android device to your computer using a USB cable.
    5. -
- -

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

- -

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge 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 Refresh devices button again. The device should appear.

- -
-

Note: You do not need to install the full Android Studio SDK. Only adb is needed.

-
- -

To start a debugging session, first open the page that you wish to debug and then click Connect 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.

- -

Screenshot of the debugging page for an Android device

- -

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

- -

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:

- -

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.

- -

In Firefox 76 and above, the message can look like the following:

- -

This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

- -

See Connection for Firefox for Android 68 for more information.

- -

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

- -

Screenshot showing the remote debugging window, with the editable URL bar

- -

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.

- -

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 Reload button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the Back and Forward buttons.

- -

Connecting over the Network

- -

You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.

- -

- -

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:

- -

- -

This Firefox

- -

The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:

- -
-
Temporary Extensions
-
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
-
Extensions
-
This section lists information about the extensions that you have installed on your system.
-
Service Workers, Shared Workers, and Other Workers
-
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
-
- -

- -

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

- -

Extensions

- -

Loading a temporary extension

- -

With the Load Temporary Add-on 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 Temporary Extensions header.

- -

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

- -

The major advantages of this method, compared with installing an add-on from an XPI, are:

- - - -

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

- -

Screenshot of the debugging information panel for a temporary extension

- -

You can use the following buttons:

- -
-
Inspect
-
Loads the extension in the debugger.
-
Reload
-
Reloads the temporary extension. This is handy when you have made changes to the extension.
-
Remove
-
Unloads the temporary extension.
-
- -

Other information about the extension is displayed:

- -
-
Location
-
The location of the extension's source code on your local system.
-
Extension ID
-
The temporary ID assigned to the extension.
-
Internal UUID
-
The internal UUID assigned to the extension.
-
Manifest URL
-
If you click the link, the manifest for this extension is loaded in a new tab.
-
- -

Updating a temporary extension

- -

If you install an extension in this way, what happens when you update the extension?

- - - -

Installed Extensions

- -

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

- -

Screenshot of the debugging information panel for an installed extension

- -

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

- -

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

- -
-

Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

-
- -

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

- -
-

Note: This list may include add-ons that came preinstalled with Firefox.

-
- -

If you click Inspect, the Add-on Debugger will start in a new tab.

- -

{{EmbedYouTube("efCpDNuNg_c")}}

- -

See the page on the Add-on Debugger for all the things you can do with this tool.

- -

Workers

- -

The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:

- - - -

You can connect the developer tools to each worker, and send push notifications to service workers.

- -

- -

Service worker state

- -

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

- - - -

Screenshot of the debugging panel for a service worker that is in the Running state

- -

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

- -
-

Note: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools Application panel.

-
- -

Unregistering service workers

- -

Click the Unregister button to unregister the service worker.

- -

Sending push events to service workers

- -

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

- -

Service workers not compatible

- -
-

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

- -

-
- -

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

- -

Connection to Firefox for Android 68

- -

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:

- - - -

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 Firefox Extended Support Release (ESR), which is also based on version 68.

- -

Note that about:debugging is not enabled by default in Firefox ESR.  To enable it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.

- -

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 What happens to my profile if I downgrade to a previous version of Firefox?

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 ---- -
{{ToolsSidebar}}

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

- -

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.

- -

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 gBrowser global, and even with the XUL used to specify the browser's user interface.

- -

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).

- -

From Firefox 27 onwards, you can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

- -
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
- -

The Browser Console looks like this:

- -

- -

You can see that the Browser Console looks and behaves very much like the Web Console:

- - - -

Browser Console logging

- -

The Browser console logs the same sorts of messages as the Web Console:

- - - -

However, it displays such messages from:

- - - -

Messages from add-ons

- -

The Browser Console displays messages logged by all Firefox add-ons.

- -

Console.jsm

- -

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

- -

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.

- -
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
-
-console.log("Hello from Firefox code"); //output messages to the console
- -

 

- -

The full module with other functionality is found here on Mozilla Cross-Reference.

- -

For more methods of the console exported attribute of the Console.jsm see this article: Console

- -

HUDService

- -

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla Cross-Reference. We see we can not only access the Browser Console but also Web Console.

- -

Here is an example on how to clear the contents of the Browser console:

- -
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);
- -

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:

- -
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);
- -

Bonus Features Available

- -

For Add-on SDK 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:

- -
widget = require("sdk/widget").Widget({
-  id: "an-error-happened",
-  label: "Error!",
-  width: 40,
-  content: "Error!",
-  onClick: logError
-});
-
-function logError() {
-  console.error("something went wrong!");
-}
- -

If you build this as an XPI file, 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:

- -

Click the icon. You'll see output like this in the Browser Console:

- -

- -

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 "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

- -

Browser Console command line

- -

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

- -

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 window:

- -

- -

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.

- -

Controlling the browser

- -

The command line interpreter gets access to the tabbrowser object, through the gBrowser 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):

- -
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/";
- -

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

- -

Modifying the browser UI

- -

Since the global window 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:

- -
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);
- -

On OS X, this similar code will add a new item to the "Tools" menu:

- -
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);
- -

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 ---- -
{{ToolsSidebar}}
- -

The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:

- - - -

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 source map 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.

- -

To enable the debugger to work with a source map, you must:

- - - -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
- -

{{EmbedYouTube("Fqd15gHC4Pg")}}

- -

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. 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:

- -
//# sourceMappingURL=main.js.map
- -

In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.

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 ---- -
{{ToolsSidebar}}
- -
 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.{
- -
{ToolsSidebar}}
- -

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.

- -
-

Note: 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).

-
- -

The Fonts tab

- -

The Fonts tab is located on the right-hand side of the Page Inspector 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:

- -
    -
  1. Open the Page Inspector.
    2. -
  2. Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.
    3. -
- -

- -

The Fonts tab has three major sections:

- - - -

Fonts used

- -

The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.

- -

- -

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."

- -

Fonts will be included in this section for one of the following reasons:

- - - -

Fonts Editor

- -

Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.

- -

- -

For standard (static) fonts, you will be able to change the settings listed below

- -

Size

- -

The {{cssxref("font-size")}} for the inspected element.

- -

- -

This can be set using em, rem, %, px, vh, or vw units. You can select values using the slider or enter a numeric value directly into the text box.

- -
-

Note: If you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.

-
- -

Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.

- -

Example: If 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px.

- -

Line height

- -

The {{cssxref("line-height")}} of the inspected element.

- -

- -

This can be set using unitless, em, %, or px units. You can select values using the slider or enter a numeric value directly into the text box.

- -

Changing the unit of measure changes the value relative to the font-size setting.

- -

Example: If the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px.

- -

Weight

- -

The {{cssxref("font-weight")}} for the inspected element.

- -

Font weight setting

- -

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.

- -
-

Note: For variable fonts (see below) that define a wght variation axis, this range is custom.

-
- -

Italic

- -

The {{cssxref("font-style")}} for the inspected element.

- -

- -

This setting toggles between italic and normal values for the font-style CSS property.

- -
-

Note: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.

-
- -

All fonts on page

- -

The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.

- -

- -

The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.

- -

Each font listed in this section shows you:

- - - -

Variable font support in Firefox Developer Tools

- -

Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.

- -

What are variable fonts?

- -

Variable Fonts, or OpenType Font Variations, 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.

- -

Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by axes of variation (see Introducing the 'variation axis' 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).

- -

There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer does implement a registered axis, its behavior must follow the defined behavior.

- -

All variable font axes have a four-character axis tag. The CSS {{cssxref("font-variation-settings")}} property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using font-variation-settings, you could do something like this:

- -
font-variation-settings: "wght" 350;
- -

However, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).

- -
-

Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.

-
- -

Here are the registered axes along with their corresponding CSS properties:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Axis TagCSS Property
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" -

{{cssxref("font-optical-sizing")}}

-
- -

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.

- -
-

Note: 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.

-
- -
-

Warning: 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.

-
- -

Working with Variable fonts in the Font Editor

- -

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.

- -

- -

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.

- -

Here are a couple of examples of fonts with different axes defined:

- -

- -

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.

- -

- -

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.

- -

- - - -

Tips

- -

Finally, here are a few tips for making effective use of the Fonts tab:

- - 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 ---- -
{{ToolsSidebar}}

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.

- -

Repaints and responsiveness

- -

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 :hover pseudo-class that changes the element's style.

- -

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.

- -

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.

- -

Using the paint flashing tool

- -

There are two ways to switch on paint flashing:

- - - -

- - - -

- -

Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:

- -

In this example, there are two main sources of repaints:

- - - -

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.

- -

Example: CSS transitions

- -

One area where implementation choices can affect repaint efficiency is in CSS transitions. 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 margin-left, while the second way moves the element using the transform property.

- -
<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>
-
-
- -
#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%);
-}
- -

To see the transition, move the mouse into the space below:

- -

{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}

- -

Now switch paint flashing on, and try it again. You should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions.

- -

Why? Well, when you use transform, 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.

- -

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.

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 ---- -

{{draft}}

- -

{{ToolsSidebar}}

- -

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 debuggee, and the instance of Firefox doing the debugging is called the debugger.

- -

Enable remote debugging

- -

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 Developer Tools Settings. If you're using Firefox Developer Edition, they are checked by default.

- -

- -

You only need to do this once: the setting values persist across restarts.

- -

Start the debugger server

- -

Next, you need to start the debugger server in the debuggee.

- -

Run the debuggee from the command line, passing it the --start-debugger-server option:

- -
/path/to/firefox --start-debugger-server
- -

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:

- -
/path/to/firefox --start-debugger-server 1234
- -

Note: in Windows, the start-debugger-server call will only have one dash:

- -
firefox.exe -start-debugger-server 1234
- -
-

Note: By default, and for security reasons, the devtools.debugger.force-local 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.

-
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 ---- -
{{ToolsSidebar}}
- -

Under the Cache Storage type within the Storage Inspector you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

- - - -

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 ---- -
{{ToolsSidebar}}
- -

When you select an origin inside the Indexed DB storage type in the storage tree of the Storage Inspector, a table lists the details of all the databases present for that origin.

- -
-

Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.

-
- -

Databases have the following details:

- - - -

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:

- - - -

- -

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.

- -

You can delete an IndexedDB database using the context menu in the storage tree:

- -

- -

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:

- -

You can use the context menu in the table widget to delete all items in an object store, or a particular item:

- -

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 ---- -
{{ToolsSidebar}}
- -

When an origin corresponding to local storage or session storage is selected within the Storage Inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.

- -

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

- -

{{EmbedYouTube("UKLgBBUi11c")}}

- -

You can delete local storage and session storage entries using the context menu:

- -

- -

You can also delete local and session storage entries by selecting an item and pressing the Delete or Backspace key.

- -

Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

-- cgit v1.2.3-54-g00ecf