Haben Sie eine Frage dazu, wie Sie den Quellcode des visuellen Elements auf Ihrem Chromebook anzeigen können? Dazu können Sie die speziellen DevTools in der Google Chrome-App oder auf einer beliebigen Browserseite verwenden. Die DevTools sind eine Liste spezieller Entwickler-Tools, die in den Google Chrome-Browser integriert sind. Sie ermöglichen es Benutzern, Seiten unterwegs zu bearbeiten und mögliche Probleme im Auge zu behalten.
So verwenden Sie Inspect Element auf einem Chromebook
Bei Chromebooks ist der Standardbrowser Google, um die Entwicklertools auf diesem Gerät zu öffnen, benötigen Sie.
- Öffnen Sie die gewünschte Seite
- Klicken Sie auf die 3 Punkte in der oberen rechten Ecke der Anwendung
- Wählen Sie „Weitere Tools„.
- Klicken Sie auf „Entwicklertools„.
Alternativ können Sie diese Funktion auch durch Drücken der Taste F12 oder durch einen Rechtsklick auf das gewünschte Element aufrufen
Dies ist eine universelle Anweisung, die für die meisten Browser unter Windows oder jedem anderen System gilt.
Wie man Inspect Element auf Mac oder Iphone verwendet
Ist es möglich, das Gleiche mit einem Mac oder sogar einem iPhone zu tun? Dazu müssen Sie nur ein paar einfache Schritte befolgen:
Verwendung auf dem Mac
Wenn Sie einen Mac haben, ist Safari der beste Browser für Sie. Das Öffnen der Entwicklertools in diesem Browser unterscheidet sich geringfügig von demselben Vorgang in Chrome oder Firefox. Das müssen Sie tun:
- Öffnen Sie den Browser
- Klicken Sie mit Safari auf den Namen der Registerkarte
- Wählen Sie „Präferenzen„.
- Klicken Sie dann auf das Zahnradsymbol für Fortgeschrittene, das sich am oberen Rand des Bildschirms befindet
- Aktivieren Sie das Kontrollkästchen neben Develop-Menü in der Menüleiste anzeigen
Sobald Sie dies getan haben, wird das Element inspizieren auf Ihren Webseiten verfügbar sein. Sie können es auch mit CMD + Option + I aufrufen.
Wie man es auf dem iPhone benutzt
Wenn Sie mit der Funktion „Elemente inspizieren“ prüfen möchten, wie die mobile Version der Webseite auf Ihrem iPhone aussieht, müssen Sie zunächst den Web Inspector für Ihr iOS-Gerät aktivieren:
- Gehen Sie zu Einstellungen
- Wählen Sie die Safari-App
- Scrollen Sie nach unten und klicken Sie auf „Erweitertes Menü„.
- Aktivieren Sie nun das Kontrollkästchen neben „Web Inspector„.
Sie müssen auch das Entwicklermenü auf Ihrem Mac aktivieren, wie oben beschrieben. Sobald Sie diese Funktionen auf Ihrem iOS-Gerät und Mac aktiviert haben, sollten Sie das Menü „Entwickeln“ oben auf Ihrem Mac sehen können. Sie müssen darauf klicken, um das angehängte iPhone und die darauf geöffnete Webseite zu sehen. Wenn Sie zu einer anderen Seite wechseln, wechseln Sie auch das Web Inspector-Fenster für diese Seite auf Ihrem Mac
Was ist Elemental Panel?
Als erstes sollten Sie wissen, was das Element-Panel ist. Wenn Sie das Design oder andere externe Elemente der Seite ändern möchten, müssen Sie Ihr CSS oder HTML bearbeiten. Dies können Sie mit einem Entwickler-Tool namens Element-Panel tun. Damit können Sie Ihre Seite vom Frontend aus überprüfen und ändern. Einige der Elemente, die Sie dort sehen können, sind :
- Informationen über das Bild, wie z. B. seine Größe und seine Quelle
- CSS-Panel – diese Option wird verwendet, um den externen Stil der Seite zu ändern. Sie können hier die Parameter wie Schriftarten, Größen und Farben ändern
- DOM-Informationen oder DOM-Panel Mit dieser Option können Sie das Erscheinungsbild der Seite steuern. Sie können die Position von Elementen ändern und vollständig zu den HTML-Dateien navigieren
- Das Konsolenpanel präsentiert die neuen Funktionen unter den Entwicklertools
- Element-Ereignis-Listener
- HTML-Kommentare
- Rückmeldung
Prüfung der gerenderten und natürlichen Größe eines Bildes
Wenn Sie oft Informationen über ein Bild auf einer Webseite benötigen, können Sie es „inspizieren“. So können Sie z. B. die Größe des Bildes erfahren. Dazu müssen Sie mit dem Mauszeiger über das IMG fahren, während Sie sich im DOM-Baum befinden
Prüfung eines bestimmten verwendeten Bildes aus einem Quellenset (srcset)
Dann können Sie überprüfen, welche Version des Bildes geladen wurde und was die genaue srcset-Quelle ist. Der srcset hilft dem Browser, die Version des Bildes mit der kleinsten Größe anzufordern, die etwas größer ist als das eigentliche Bild. Dies wird verwendet, um eine Reihe von Bildern mit unterschiedlichen Auflösungen anzuzeigen, aus denen der Browser wählen kann. Wählen Sie zunächst das Element IMG aus und überprüfen Sie dann die Information $0.currentSrc in der Konsole. Beachten Sie, dass Sie die Eigenschaften der Bilder mit srcset erhöhen können, wenn Sie Geräte mit einem höheren DPI-Wert verwenden müssen.