initial commit

4 files changed, 294 insertions, 0 deletions

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
+---
+<div>{{ToolsSidebar}}</div><p>Seit Firefox 33 wird ein "ev" Symbol im <a href="/de/docs/Tools/Page_Inspector/UI_Tour#HTML_panel">HTML Panel</a> neben Elementen angezeigt, an die Event Listener gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Jede Zeile beinhaltet:</p>
+
+<ul>
+ <li>einen Pausieren Button: Wird darauf geklickt, gelangt man zum Event Listener innerhalb des <a href="/de/docs/Tools/Debugger">Debuggers</a>, wo ein Haltepunkt für ihn gesetzt werden kann.</li>
+ <li>den Namen des Events.</li>
+ <li>den Namen und die Zeilennummer des Listeners: Wird darauf geklickt, wird die Listenerfunktion im Popup angezeigt.</li>
+ <li>die Information, ob ein Event nach oben steigt (Bubbling) und welche Spezifikation es definiert.</li>
+</ul>
+
+<p>Beachte, dass auch <a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery Events</a> untersucht werden können, nicht nur DOM Events.</p>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">Neu in Firefox 52</div>
+
+<p>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.</p>
+
+<p>Wenn ein Element mit <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">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.</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<p>Besuche <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> (Englisch) für viele interessante Raster-Ideen.</p>
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
+---
+<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>