From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../how_to/event_listener_untersuchen/index.html | 27 +++ files/de/tools/page_inspector/how_to/index.html | 13 ++ .../how_to/raster_layout_untersuchen/index.html | 23 ++ .../how_to/schriftarten_bearbeitung/index.html | 231 +++++++++++++++++++++ 4 files changed, 294 insertions(+) create mode 100644 files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/index.html create mode 100644 files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html (limited to 'files/de/tools/page_inspector') diff --git a/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html new file mode 100644 index 0000000000..ac8aca1c8a --- /dev/null +++ b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html @@ -0,0 +1,27 @@ +--- +title: Event Listener untersuchen +slug: Tools/Page_Inspector/How_to/Event_Listener_untersuchen +tags: + - Guide + - Inspector + - Werkzeuge +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

Seit Firefox 33 wird ein "ev" Symbol im HTML Panel neben Elementen angezeigt, an die Event Listener gebunden sind:

+ +

+ +

Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:

+ +

Jede Zeile beinhaltet:

+ + + +

Beachte, dass auch jQuery Events untersucht werden können, nicht nur DOM Events.

+ +

 

diff --git a/files/de/tools/page_inspector/how_to/index.html b/files/de/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..54b596910d --- /dev/null +++ b/files/de/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Wie handeln (How to) +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}
+ +

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

diff --git a/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html new file mode 100644 index 0000000000..0318a735a4 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html @@ -0,0 +1,23 @@ +--- +title: 'CSS Raster Inspektor: Raster-Layout untersuchen' +slug: Tools/Page_Inspector/How_to/Raster_Layout_untersuchen +tags: + - Anleitung + - Inspektor + - Raster + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +
Neu in Firefox 52
+ +

Seit den Firefox 52 Entwickler-Tools ist es möglich, sich zur Untersuchung eines CSS-Rasters die Spalten und Zeilen eines Rasters anzeigen zu lassen.

+ +

Wenn ein Element mit display: grid als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: . Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:

+ +

Die Rasterlinien werden auch dann noch angezeigt, wenn andere Elemente ausgewählt werden. Auswirkung von Änderungen anderer Elemente auf das Raster können so leicht nachverfolgt werden.

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

Besuche labs.jensimmons.com (Englisch) für viele interessante Raster-Ideen.

diff --git a/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html new file mode 100644 index 0000000000..0106b4d282 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html @@ -0,0 +1,231 @@ +--- +title: Schriftarten Bearbeitung +slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{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:

+ + -- cgit v1.2.3-54-g00ecf