1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
---
title: Seiteninspektor
slug: Tools/Page_Inspector
translation_of: Tools/Page_Inspector
original_slug: Tools/Seiten_Inspektor
---
<div>{{ToolsSidebar}}</div>
<p>Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.</p>
<h2 id="Den_Inspektor_öffnen"><a name="den-inspektor-oeffnen">Den Inspektor öffnen</a></h2>
<p>Es gibt verschiedene Wege, den Inspektor zu öffnen:</p>
<ul>
<li>Wählen Sie die "Inspektor"-Option des "Web Entwickler"-Menüs (die beim Mac ein Untermenü von "Tools"/"Werkzeuge" ist),</li>
<li>Drücken Sie Strg-Umschalt-C (Cmd-Option-C auf dem Mac OSX und in Linux).</li>
<li>Klicken Sie mit der rechten Maustaste auf ein Element in einer Webseite und wählen Sie "Element untersuchen"</li>
</ul>
<p>Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.</p>
<p>Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
<p>Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7571/inspector-opening-de.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 929px;">Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
<h2 id="Ein_Element_auswählen"><a name="ein-element-auswaehlen">Ein Element auswählen</a></h2>
<p>Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/7601/inspector-selected-annotated-de.png">Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.</p>
<h3 id="Vor_Firefox_29">Vor Firefox 29</h3>
<p>Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.</p>
<p>In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein <a href="#das-element-kontext-menue">Kontextmenü</a> für das Element.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7577/inspector-element-annotation-de.png" style="height: 167px; width: 389px;"></p>
<h3 id="Firefox_29">Firefox 29</h3>
<p>In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der <a href="/de/docs/Tools/Tools_Toolbox#Toolbar">Werkzeugleiste der Werkzeuge-Box</a>:</p>
<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
<h3 id="Firefox_30_und_neuer">Firefox 30 und neuer</h3>
<p>In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.</p>
<p>{{EmbedYouTube("X1aGlwmUF94")}}</p>
<h2 id="Das_Element-Kontext-Menü"><a name="das-element-kontext-menue">Das Element-Kontext-Menü</a></h2>
<p>Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im <HTML-Bereich> des Inspektors.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7579/inspector-popup-de.png" style="height: 308px; width: 540px;"></p>
<p>Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:</p>
<ul>
<li><a href="#html-bearbeiten">Editieren der HTML-Struktur</a> des Elements</li>
<li>Kopieren des inneren oder äußeren HTML</li>
<li>Kopieren des eindeutigen Selektors (id) des Elements</li>
<li><a href="#grafik-als-data-uri-kopieren">Kopieren einer Grafik als Data-URI</a></li>
<li>Löschen des Elements</li>
<li>Setzen der CSS-Pseudo-Klassen <a href="/de/docs/Web/CSS/:hover">:hover</a>, <a href="/de/docs/Web/CSS/:focus">:focus</a> und <a href="/de/docs/Web/CSS/:active">:active</a></li>
</ul>
<h3 id="Grafik_als_Data-URI_kopieren"><a name="grafik-als-data-uri-kopieren">Grafik als Data-URI kopieren</a></h3>
<div class="geckoVersionNote">
<p>Diese Funktion ist neu in Firefox 29.</p>
</div>
<p>In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7581/inspector-copyasdatauri-de.png" style="height: 282px; width: 529px;"></p>
<h3 id="HTML_bearbeiten"><a name="html-bearbeiten">HTML bearbeiten</a></h3>
<p>Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="height: 269px; width: 540px;"></p>
<p>Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.</p>
<h2 id="HTML-Bereich"><a name="html-bereich">HTML-Bereich</a></h2>
<p><img alt="" src="https://mdn.mozillademos.org/files/7605/inspector-html-toolbar-annotated-de.png" style="height: 422px; width: 913px;"></p>
<p>Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.</p>
<p>Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.</p>
<p>Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das <a href="#das-element-kontext-menue">Element-Kontext-Menü</a>.</p>
<h3 id="HTML-Bereich_Werkzeugleiste">HTML-Bereich Werkzeugleiste</h3>
<p>Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:</p>
<div class="geckoVersionNote">
<p>In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die <a href="/de/docs/Tools_Toolbox#Toolbar">Werkzeuge-Box</a> verschoben.</p>
</div>
<p><em>Ein Element der Seite auswählen</em>: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.<br>
HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.<br>
<span class="author-g-29jbfyyo329p4e97">HTML-Element-Suche</span>:</p>
<p> </p>
|
