Strukturelle Elemente neu anordnen, um alternative Layouts zu prototypisieren.<\/li><\/ul>\nDas DOM wird live mit \u00c4nderungen aktualisiert, die in der Inspektionsansicht vorgenommen werden. Daher werden alle Anpassungen sofort im Browser angezeigt und dann beim Aktualisieren zur\u00fcckgesetzt, was Experimente w\u00e4hrend der Entwicklung risikoarm macht.<\/p>\n
4. Test der Responsivit\u00e4t<\/h3>\n Neben der Bearbeitung einzelner Elemente bieten Inspektorwerkzeuge auch Umgebungen, um die Responsivit\u00e4t auf einer Vielzahl von Ger\u00e4ten und Ansichtsfenstern zu testen.<\/p>\n
Chrome DevTools umfasst die Simulation des Ger\u00e4temodus. Sie k\u00f6nnen Voreinstellungen ausw\u00e4hlen, um Standard-Telefon- oder Tablet-Aufl\u00f6sungen und Touch-F\u00e4higkeiten zu emulieren. Oder verwenden Sie die erweiterten Optionen, um die genauen Abmessungen, Pixelverh\u00e4ltnisse, CPU-Drosselung und andere Metriken manuell zu konfigurieren.<\/p>\n
Dies erm\u00f6glicht eine schnelle Validierung von Aspekten wie:<\/b><\/p>\nLayouts bei verschiedenen Bildschirmgr\u00f6\u00dfen.<\/li> Touch-Zielabst\u00e4nde f\u00fcr Mobilnutzer.<\/li> Website-Performance auf leistungsschwachen Ger\u00e4ten.<\/li> Zug\u00e4nglichkeit auf unterschiedlicher Hardware.<\/li><\/ul>\nDie M\u00f6glichkeit, Seiten w\u00e4hrend der Entwicklung auf simulierten mobilen Bildschirmen zu betrachten, hilft dabei, die Reaktionsf\u00e4higkeit und die schrittweise Verbesserung der Auslieferung zu perfektionieren. Das Testen \u00fcber ein breites Spektrum von emulierten Ger\u00e4ten stellt eine umfassende Unterst\u00fctzung f\u00fcr Browser und Ger\u00e4te sicher.<\/p>\n
Elemente in Firefox untersuchen<\/h2>\n Firefox stellt seine Webseiten-Inspektionswerkzeuge bereit, die mit der Funktionalit\u00e4t von Chrome DevTools konkurrieren. Zugriff auf den Firefox Inspector mit denselben Verkn\u00fcpfungen zum Element untersuchen wie bei Chrome: Ctrl+Shift+I<\/b> (Windows) und Cmd+Opt+I<\/b> (Mac).<\/b><\/p>\n
Sie k\u00f6nnen auch die Tastenkombination Ctrl+Shift+C<\/b> (Windows) und Cmd+Opt+C<\/b> (Mac) verwenden, um das Inspektionselement-Panel zu \u00f6ffnen, das es Ihnen erm\u00f6glicht, auf ein Element auf der Seite zu klicken und direkt zum Code zu springen.<\/p>\n1. DOM-Attribute anzeigen<\/h3>\n Bei der Analyse komplexer Schnittstellen st\u00fctzen sich Fokus-Zust\u00e4nde und dynamische Effekte auf HTML-Attribute anstatt auf CSS. Rechtsklicken<\/b> Sie auf ein beliebiges Element innerhalb der Inspektoransichten und w\u00e4hlen Sie Show DOM Properties<\/b>.<\/p>\nDies zeigt alle nativen Attribute an, die mit dem Knoten verbunden sind. Sie k\u00f6nnen die Werte hier direkt bearbeiten, um das Verhalten der Komponente \u00fcber den Inspektor zu \u00e4ndern, anstatt Code\u00e4nderungen vorzunehmen.<\/p>\n
Beispielsweise setzt das Anpassen des Bereichsschiebereglers Min\/Max und Schrittinkremente visuell Grenzen, das \u00c4ndern der Namen von Kontrollk\u00e4stchen\/Radioknopfgruppen schaltet um, das \u00dcberschreiben von Datensatzeigenschaften verkn\u00fcpft unterschiedliche Remote-Daten, und die Liste geht weiter und weiter.<\/p>\n
2. Visuell mit Box-Modell-Diagrammen arbeiten<\/h3>\n Firefox erleichtert die Inspektion, indem er das Padding, die R\u00e4nder und die Abst\u00e4nde direkt anzeigt, wenn Sie den Cursor auf der Website bewegen.<\/p>\nWenn Sie auf einen Knoten klicken, wechselt das Inspector Panel zwischen drei Zust\u00e4nden: Geometrie aus, nur Boxmodell-Overlay und Overlay plus Markup-Umrisse.<\/p>\n
Dies kann n\u00fctzlich sein, wenn Sie testen m\u00f6chten, ob Ihr Abstand, Padding und die R\u00e4nder korrekt auf die Elemente angewendet wurden.<\/p>\n
Es macht es auch einfacher, Probleme zu beheben, da Sie durch spezifische Elemente klicken und genau sehen k\u00f6nnen, welche CSS-Stilisierung sie beeinflusst. Geometrische Analysen k\u00f6nnen Anf\u00e4ngern hier helfen, r\u00e4umliche Beziehungen schneller zu erfassen.<\/p>\n
3. Farben mit einem Farbw\u00e4hler bearbeiten<\/h3>\n Innerhalb des Inspektors klicken Sie auf eine beliebige Farbpalette neben einer Eigenschaft, die Farben akzeptiert, wie Hintergrund, Rand usw. Es wird Ihnen einen Farbschieber, eine Alpha-Einstellung und einen Farbw\u00e4hler anzeigen, um Farben von Ihrer offenen Seite zu \u00fcbernehmen.<\/p>\nSie m\u00fcssen keine Zeit mehr damit verbringen, Farbcodes zu erraten oder Ihre Design-Assets auf den verwendeten Code zu \u00fcberpr\u00fcfen. W\u00e4hlen Sie ihn aus vorhandenen Elementen oder sogar Bildern auf der Seite aus.<\/p>\n
Elemente in Safari inspizieren<\/h2>\n Safari bietet den Webkit Inspector haupts\u00e4chlich f\u00fcr die Inspektion von Seiten auf macOS-Systemen an. Sie m\u00fcssen jedoch zuerst das Entwicklermen\u00fc aktivieren, bevor Sie darauf zugreifen k\u00f6nnen.<\/p>\n
\u00d6ffnen Sie Safari und klicken Sie auf Safari im Men\u00fc<\/b> > Einstellungen<\/b> > Erweitert<\/b>. Aktivieren Sie das K\u00e4stchen f\u00fcr \u201eFunktionen f\u00fcr Webentwickler anzeigen.<\/b>\u201c<\/p>\nSie k\u00f6nnen jetzt jede Website besuchen und rechtsklicken<\/b>, um die Option \u201eElement untersuchen<\/b>\u201c verf\u00fcgbar zu sehen,<\/p>\nSie k\u00f6nnen auch die Tastenkombination, Cmd+Opt+C,<\/b> verwenden, um auf die Funktion \u201eElement untersuchen\u201c zuzugreifen.<\/p>\nZeitpl\u00e4ne und Netzwerkgeschwindigkeit<\/h3>\n
\u00c4hnlich wie die meisten anderen Browser bietet Safari leistungsstarke Zeitachsen im Safari Inspector. Die Ressourcenliste hilft Ihnen sofort zu erkennen, welche Dateien Verz\u00f6gerungen beim Rendering verursachen und was der Grund daf\u00fcr sein k\u00f6nnte. Sie k\u00f6nnen auch sehen, welche Skripte das Laden der Seite blockieren.<\/p>\n
3D-Ansicht der Webschichten<\/h3>\nWenn Sie die Schichten analysieren m\u00f6chten, die die Website bilden, gehen Sie einfach zum Schichten-Tab und Ihnen wird ein vollst\u00e4ndiges 3D-Modell aller Schichten pr\u00e4sentiert<\/p>\n
M\u00f6glichkeiten zur Nutzung von Inspect Element<\/h2>\n Jetzt, da wir Inspektorwerkzeuge eingerichtet haben, lassen Sie uns einige praktische Anwendungsm\u00f6glichkeiten besprechen. Hier sind nur einige g\u00e4ngige Nutzungsf\u00e4lle:<\/p>\n
Text oder Bilder \u00e4ndern<\/h3>\n Eine n\u00fctzliche Funktion ist das direkte \u00c4ndern von Textinhalten oder Bildressourcen innerhalb des Editors. Sie k\u00f6nnen \u00dcberschriften anpassen, Logos austauschen, Details anonymisieren und mehr.<\/p>\n
Um Texte oder Bilder zu bearbeiten, untersuchen Sie zuerst das Element, das Sie \u00e4ndern m\u00f6chten, und doppelklicken Sie dann innerhalb seiner Grenzen im Code-Editor, um den Inhalt bearbeitbar zu machen.<\/p>\n
Geben Sie alles ein, was Sie m\u00f6chten, und dr\u00fccken Sie die Eingabetaste, um die \u00c4nderungen live zu schalten (vor\u00fcbergehend).<\/i><\/p>\nFarben, Schriftarten und Styling \u00e4ndern<\/h3>\n
Beim \u00dcberpr\u00fcfen verschiedener Elemente wie Links, Schaltfl\u00e4chen, Men\u00fcs oder Galerien werden Sie Attribute bemerken, die das zugeh\u00f6rige Verhalten wie href-Ziel-URLs, Datenquellen f\u00fcr die Karussellansicht und mehr definieren.<\/p>\n
Wie das Bearbeiten von Textinhalten und CSS-Eigenschaften sowie Stylesheets k\u00f6nnen diese HTML-Ebenenmerkmale direkt im Inspector manipuliert werden.<\/p>\n
Das DOM aktualisiert diese \u00c4nderungen sofort. So k\u00f6nnen Sie sofort sehen, wie die \u00c4nderungen die Funktionalit\u00e4t der Komponente ohne Programmierung ver\u00e4ndern:<\/p>\n
\u00c4ndern Sie das href von Links und Schaltfl\u00e4chen, um Klicks vor\u00fcbergehend umzuleiten.<\/li> Passen Sie die Tab-Rolle und Aria-Tags an, um Verbesserungen der Zug\u00e4nglichkeit zu testen.<\/li> Tauschen Sie die src-Attribute von Vorschaubildern aus, w\u00e4hrend Sie Galerien erstellen.<\/li><\/ul>\nElementzustand \u00e4ndern<\/h3>\n Jenseits der grundlegenden Stilisierung erm\u00f6glichen Inspektionswerkzeuge auch das Modifizieren von interaktiven Elementzust\u00e4nden wie Hover, Fokus und aktiv. Rechtsklicken<\/b> Sie auf Elemente und verwenden Sie die Zustand erzwingen<\/b>-Optionen (Google Chrome), um zu visualisieren, wie Komponenten w\u00e4hrend der Nutzung erscheinen.<\/p>\nZum Beispiel schalten Sie den aktiven Zustand eines Buttons um, um sicherzustellen, dass der gedr\u00fcckte Effekt f\u00fcr die Benutzer sichtbar ist. \u00dcberpr\u00fcfen Sie die R\u00e4nder deaktivierter Felder, um zu sehen, ob sie einen angemessenen Kontrast bieten. Validieren Sie, dass Men\u00fclinks bei der Tastaturnavigationstests angemessen beim Fokussieren hervorgehoben werden.<\/p>\n
Elemente ausblenden oder l\u00f6schen<\/h3>\n Schlie\u00dflich ist auch das Massenverstecken oder L\u00f6schen von Seitenelementen m\u00f6glich. Dies kann helfen, unn\u00f6tigen Code zu identifizieren, der die Seitengr\u00f6\u00dfe aufbl\u00e4ht, das korrekte Rendern von Blockelementen verhindert oder unerwartet gew\u00fcnschte Inhalte f\u00fcr die Benutzer verbirgt.<\/p>\nUm dies zu versuchen, markieren Sie einfach ein Element im Code und dr\u00fccken Sie die L\u00f6schtaste, um es sofort aus der gerenderten Ansicht zu entfernen.<\/p>\n
Im Screenshot haben wir die \u00dcberschrift der Startseite von DreamHost aus unserer Ansicht gel\u00f6scht. Sie k\u00f6nnen mit Inspect Element noch viel mehr machen, wenn Sie es weiter erkunden.<\/p>\n
H\u00e4ufig gestellte Fragen<\/h2>\nK\u00f6nnen Sie das Inspektionselement auf jeder Website verwenden?<\/h3>\n Ja, Inspect Element funktioniert universell auf allen modernen Websites. Einige Websites rendern jedoch Code auf der Serverseite und \u00fcbertragen nur JavaScript-Objekte an das Frontend. Dies wird im Allgemeinen durchgef\u00fchrt, um zu verhindern, dass Web-Scraper Daten abrufen, und es kann f\u00fcr Sie schwierig werden, die Struktur der Website mit Inspect Element zu verstehen.<\/p>\n
Werden \u00c4nderungen, die im Inspektionselement gemacht werden, dauerhaft gespeichert?<\/h3>\n Nein. \u00c4nderungen, die \u00fcber Inspektionswerkzeuge gemacht werden, werden nur vor\u00fcbergehend lokal in Ihrer Browseransicht gerendert. Durch das Aktualisieren wird wieder zum standardm\u00e4\u00dfigen externen Seiteninhalt zur\u00fcckgekehrt. \u00c4nderungen haben keinerlei Auswirkungen auf die tats\u00e4chlichen Quelldateien.<\/p>\n
K\u00f6nnen andere Benutzer \u00c4nderungen sehen, wenn sie Websites inspizieren?<\/h3>\n Element-Inspektionen k\u00f6nnen von anderen Benutzern, die Websites durchsuchen, nicht eingesehen werden, selbst wenn sie sich im selben Browserprofil auf mehreren Ger\u00e4ten anmelden. Betrachten Sie \u00c4nderungen als ausschlie\u00dflich f\u00fcr Ihren Rechner.<\/p>\n
Gibt es weitere Entwicklertools au\u00dfer Element untersuchen?<\/h3>\n Absolut. Wie bereits erw\u00e4hnt, erweisen sich Konsole, Quellen, Netzwerk und andere Analyse-Registerkarten auch w\u00e4hrend der Entwicklung als unsch\u00e4tzbar. Dar\u00fcber hinaus erweitern Browsererweiterungen die F\u00e4higkeiten von DevTools noch weiter.<\/p>\n
Betrachten Sie nicht nur Websites, interagieren Sie mit dem Code<\/h2>\n Mit der Inspect-Element-Funktion k\u00f6nnen Sie hinter die Kulissen schauen, wie Websites funktionieren. Sie erm\u00f6glicht Ihnen einen Blick auf das HTML, CSS und JavaScript unter jeder Seite, auf die Sie klicken, und hilft Ihnen leicht zu verstehen, warum etwas so aussieht und sich so anf\u00fchlt, wie es ist.<\/p>\n
Also, w\u00e4hrend Sie im Internet surfen, halten Sie das Inspect-Element-Tool griffbereit. Lassen Sie sich von der Neugier leiten, wenn Sie herumklicken, um zu sehen, was die Dinge so erscheinen l\u00e4sst, wie sie sind. Wer wei\u00df, vielleicht entdecken Sie neue Methoden, um das Internet noch zug\u00e4nglicher und unterhaltsamer zu machen!<\/p>","protected":false},"excerpt":{"rendered":"
Stellen Sie sich das Internet als einen riesigen Eisberg vor. Der durchschnittliche Benutzer sieht nur die Spitze der Oberfl\u00e4che: die Website-Oberfl\u00e4chen, die auf unseren Bildschirmen angezeigt werden, aber jede Webseite ruht auf massiven Grundlagen aus Code. Zeilen und Zeilen von HTML, CSS und JavaScript verschmelzen, um die Erfahrungen zu konstruieren, durch die wir t\u00e4glich gedankenlos scrollen und tippen. Was [\u2026]<\/p>\n","protected":false},"author":1079,"featured_media":42774,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"Was ist Inspect Element?\"],[\"reasons\",\"Warum Websites \u00fcberpr\u00fcfen?\"],[\"how-it-works\",\"Wie Browser-Entwicklertools funktionieren\"],[\"chrome\",\"Elemente in Google Chrome untersuchen\"],[\"firefox\",\"Elemente in Firefox untersuchen\"],[\"safari\",\"Elemente in Safari inspizieren\"],[\"ways\",\"M\u00f6glichkeiten zur Nutzung von Inspect Element\"],[\"faqs\",\"H\u00e4ufig gestellte Fragen\"],[\"summary\",\"Betrachten Sie nicht nur Websites, interagieren Sie mit dem Code\"]]","hide_toc":false,"footnotes":""},"categories":[14495,14509],"tags":[],"class_list":["post-57310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-de","category-webdesign-de"],"acf":[],"yoast_head":"\n
Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox] - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox]\" \/>\n<meta property=\"og:description\" content=\"Stellen Sie sich das Internet als einen riesigen Eisberg vor. Der durchschnittliche Benutzer sieht nur die Spitze der Oberfl\u00e4che: die Website-Oberfl\u00e4chen, die auf unseren Bildschirmen angezeigt werden, aber jede Webseite ruht auf massiven Grundlagen aus Code. Zeilen und Zeilen von HTML, CSS und JavaScript verschmelzen, um die Erfahrungen zu konstruieren, durch die wir t\u00e4glich gedankenlos scrollen und tippen. Was [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-21T15:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T14:07:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Stamp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Stamp\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox] - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/","og_locale":"en_US","og_type":"article","og_title":"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox]","og_description":"Stellen Sie sich das Internet als einen riesigen Eisberg vor. Der durchschnittliche Benutzer sieht nur die Spitze der Oberfl\u00e4che: die Website-Oberfl\u00e4chen, die auf unseren Bildschirmen angezeigt werden, aber jede Webseite ruht auf massiven Grundlagen aus Code. Zeilen und Zeilen von HTML, CSS und JavaScript verschmelzen, um die Erfahrungen zu konstruieren, durch die wir t\u00e4glich gedankenlos scrollen und tippen. Was [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-12-21T15:00:57+00:00","article_modified_time":"2025-01-07T14:07:11+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","type":"image\/jpeg"}],"author":"Matt Stamp","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Matt Stamp","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/"},"author":{"name":"Matt Stamp","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/43673746e4de1ea74d12de479cd1b7e1"},"headline":"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox]","datePublished":"2023-12-21T15:00:57+00:00","dateModified":"2025-01-07T14:07:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/"},"wordCount":3484,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","articleSection":["Tutorials","Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/","name":"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox] - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","datePublished":"2023-12-21T15:00:57+00:00","dateModified":"2025-01-07T14:07:11+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/How-to-Inspect-a-Web-Page-HERO-Image.jpg","width":1460,"height":1095,"caption":"The Rider webpage in the background with a code snipper foreground from the inspect element"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/wie-man-eine-website-inspiziert\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie man eine Website in jedem Browser untersucht [Chrome, Safari, Firefox]"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/43673746e4de1ea74d12de479cd1b7e1","name":"Matt Stamp","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/matt-stamp-dreamhost-150x150.jpeg","caption":"Matt Stamp"},"description":"Matt is a DevOps Engineer at DreamHost. He is responsible for infrastructure automation, system monitoring and documentation. In his free time he enjoys 3D printing and camping. Follow Matt on LinkedIn: Lhttps:\/\/www.linkedin.com\/in\/matt-stamp-7a8b3a10a","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/mattstamp\/"}]}},"lang":"de","translations":{"de":57310,"es":42796,"en":42764,"uk":52143,"pl":57315,"pt":57340,"ru":57352,"it":68735,"fr":71047,"nl":71077},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1079"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=57310"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57310\/revisions"}],"predecessor-version":[{"id":59886,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57310\/revisions\/59886"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42774"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=57310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=57310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=57310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Das](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/what-is-navigation.jpg\")
<\/figure>\n![\"DreamHost-Webseite](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/inspect-element-h1.jpg\")
<\/figure>\n![\"die](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/font-weight-edited.jpg\")
<\/figure>\n![\"die](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/12\/font-family-edited.jpg\")
<\/figure>\n