Element inspizieren: So bearbeiten Sie vorübergehend jede Webseite

In Ihrem Browser verbirgt sich ein mächtiges Werkzeug: Inspect Element .

Klicken Sie mit der rechten Maustaste auf eine beliebige Webseite, klicken Sie auf Inspect , und Sie sehen das Innere dieser Site: den Quellcode, die Bilder und CSS, die das Design bilden, die verwendeten Schriftarten und Symbole, den Javascript-Code, der Animationen unterstützt, und mehr . Sie können sehen, wie lange das Laden der Site dauert, wie viel Bandbreite sie zum Herunterladen verwendet hat und die genaue Farbe im Text.

Oder Sie können damit alles ändern, was Sie auf der Seite möchten.

Inspect Element ist eine perfekte Möglichkeit, um zu erfahren, wie das Web tickt, herauszufinden, was auf Ihren Websites defekt ist, wie eine Farb- und Schriftartänderung aussehen würde, und um zu verhindern, dass Sie private Details in Screenshots mit Photoshop herausarbeiten müssen. Es ist eine Superkraft, von der Sie nie wussten, dass Ihr Browser sie besitzt.

Lassen Sie uns lernen, wie Sie Google Chrome Inspect Element für Ihre Arbeit verwenden können, egal ob Sie ein Entwickler oder ein Vermarkter sind, der noch nie eine Codezeile geschrieben hat. Wenn Sie dies auf Ihrem Telefon lesen, ist es an der Zeit, zu Ihrem Laptop zu wechseln, Google Chrome zu öffnen und den Code zu optimieren.

Warten Sie, warum sollte ich Inspect Element verwenden?

Wenn Sie sich noch nie aus Neugierde den Code einer Website angesehen haben, fragen Sie sich vielleicht, warum Sie lernen sollten, Inspect Element zu verwenden.

• Designer : Möchten Sie eine Vorschau anzeigen, wie ein Website-Design auf Mobilgeräten aussehen würde? Oder möchten Sie sehen, wie ein anderer Grünton auf einem Anmeldebutton aussehen würde? Mit Inspect Element können Sie beides in Sekundenschnelle tun.

• Marketer : Sind Sie neugierig, welche Keywords Konkurrenten in ihren Site-Headern verwenden, oder möchten Sie sehen, ob Ihre Site für den PageSpeed-Test von Google zu langsam lädt? Inspect Element kann beides anzeigen.

• Autor : Haben Sie es satt, Ihren Namen und Ihre E-Mail-Adresse in Screenshots unkenntlich zu machen? Mit Inspect Element können Sie jeden Text auf einer Webseite in Sekundenschnelle ändern.

• Support-Agent : Benötigen Sie eine bessere Möglichkeit, Entwicklern mitzuteilen, was auf einer Site behoben werden muss? Mit Inspect Element können Sie eine schnelle Beispieländerung vornehmen, um zu zeigen, wovon Sie sprechen.

Für diese und Dutzende anderer Anwendungsfälle ist Inspect Element ein praktisches Werkzeug, das Sie immer im Blick haben. Es ist Teil der Entwicklertools in Ihrem Browser, die eine Reihe zusätzlicher Funktionen enthalten: eine Konsole zum Ausführen von Code, eine Seite " Quellcode anzeigen", um nur den Rohcode einer Site anzuzeigen, eine Quellenseite mit einer Liste aller geladenen Dateien in a Webseite und mehr. Sie können all diese selbst erkunden, aber jetzt sehen wir uns an, wie Sie die Hauptregisterkarte " Elemente" verwenden , um eine Webseite selbst zu optimieren.

Erste Schritte mit Inspect Element

Es gibt mehrere Möglichkeiten, auf Google Chrome Inspect Element zuzugreifen. Öffnen Sie einfach eine Website, die Sie bearbeiten möchten (um diesem Tutorial zu folgen, öffnen Sie Zapier.com) und öffnen Sie dann die Inspect-Element-Tools auf eine dieser drei Arten:

• Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und ganz unten im angezeigten Menü sehen Sie " Inspect ". Klicken Sie darauf.

• Klicken Sie ganz rechts in Ihrer Google Chrome-Symbolleiste auf das Hamburger-Menü (das Symbol mit den drei gestapelten Punkten), klicken Sie auf Weitere Tools und wählen Sie dann Entwicklertools aus . Klicken Sie alternativ im Dateimenü auf Ansicht —> Entwickler —> Entwicklertools.

• Bevorzugen Sie Tastenkombinationen? Drücken Sie CMD + Option + I auf einem Mac oder F12 auf einem PC, um Inspect Elements zu öffnen, ohne auf etwas zu klicken.

Standardmäßig öffnen sich die Entwicklertools in einem Bereich ganz unten in Ihrem Browser und zeigen die Registerkarte „ Elemente“ an – das ist das berühmte Werkzeug „Element prüfen“, nach dem wir gesucht haben.

Sie werden nicht viel Platz haben, um mit Inspect Element am unteren Bildschirmrand zu arbeiten, klicken Sie also auf die drei vertikalen Punkte oben rechts im Bereich „Inspect Element“ in der Nähe des „X“ (auf das Sie klicken würden, um es zu schließen). die Scheibe). Jetzt sehen Sie eine Option, um den Bereich auf die rechte Seite Ihres Browsers zu verschieben (rechte Dock-Ansicht) oder den Bereich in einem völlig separaten Fenster zu öffnen (unddock-Ansicht).

Docken wir für dieses Tutorial den Bereich auf der rechten Seite Ihres Browserfensters an, um uns mehr Platz zum Arbeiten zu geben. Sie können das Entwicklertools-Bedienfeld breiter oder schmaler machen, indem Sie mit der Maus über den linken Rand fahren. Sobald die Cursor angezeigt wird, ziehen Sie den Bereich nach links, um ihn zu erweitern, oder nach rechts, um ihn zu verkleinern.

Jetzt, da wir in Inspect Element sind, haben wir eine Reihe nützlicher Tools zur Hand, mit denen wir jede Site genau so aussehen lassen können, wie wir es wollen. In diesem Tutorial konzentrieren wir uns auf die Registerkarten Elemente, Emulation und Suche.

Suche

Auf der Registerkarte "Suchen" können Sie eine Webseite nach bestimmten Inhalten oder einem HTML-Element durchsuchen. Es ist etwas versteckt: Sie müssen auf die 3 Punkte klicken und dann auf Alle Dateien durchsuchen klicken, um es aufzudecken. Dann können Sie jede Datei auf einer Webseite nach allem durchsuchen, was Sie wollen.

Elemente

"Element prüfen" ist das Werkzeug, das wir in diesem Tutorial am meisten erkunden werden, und es wird zuerst geöffnet, wenn Sie die Entwicklertools in den meisten Browsern starten. Oder klicken Sie in den Entwicklertools auf die Registerkarte "Elemente", um dorthin zurückzukehren, wenn Sie woanders gesucht haben.

Auf der Registerkarte "Erkunden" können Sie alle HTML-, JavaScript- und CSS-Dateien anzeigen, die eine Website erstellt haben. Es ist fast dasselbe wie das Anzeigen des Quellcodes einer Website, mit einem entscheidenden Unterschied: Sie können jeden Code ändern und die Änderungen in Echtzeit auf der geöffneten Website sehen. Sie können alles von der Kopie bis zur Schriftart ändern, dann einen Screenshot des neuen Designs erstellen oder Ihre Änderungen speichern (gehen Sie einfach zu Ansicht> Entwickler> Quelltext anzeigen und speichern Sie die Seite als HTML-Datei oder kopieren Sie die Codeänderungen in Ihren Texteditor). Sobald Sie die Seite jedoch neu laden, werden alle Ihre Änderungen für immer gelöscht.

Emulation

Wollten Sie schon immer eine Vorschau einer Webseite auf einem Telefon anzeigen, ohne Ihr Telefon aus der Tasche zu ziehen? Auf der Registerkarte "Emulation" können Sie eine Webseite so anzeigen, wie sie auf jedem Gerät aussehen würde, mit Voreinstellungen für gängige Geräte oder einer Option zum Einstellen der Bildschirmauflösung und des Seitenverhältnisses. Sie können sogar eine emulierte Internetgeschwindigkeit einstellen, um zu sehen, wie schnell eine Site über eine Einwahl geladen wird.

Es ist auch etwas versteckt: Sie müssen Inspect Element öffnen und auf die Telefonsymbol-Schaltfläche klicken, um es zu starten. Dann haben Sie ein perfektes Werkzeug, um zu verstehen, wie andere eine Webseite erleben.

Es ist Zeit, sich an die Arbeit zu machen. Wir verwenden zuerst die Suche, um Dinge auf einer Webseite zu finden, verwenden dann Elements, um Text und mehr auf einer Site zu bearbeiten, und verwenden schließlich Emulation, um zu sehen, wie unsere Site von einem bestimmten Standort aus auf einem Telefon aussehen würde.

Finden Sie alles auf einer Site mit Inspect Element Search

Sie fragen sich, was in Ihren Lieblingsseiten steckt? Die Suche ist dafür das beste Werkzeug, abgesehen vom Lesen des gesamten Quellcodes einer Site. Sie können einfach die Standardansicht der Elemente öffnen, CTRL + F oder CMD + F drücken und den Quellcode durchsuchen, aber mit dem vollständigen Suchwerkzeug können Sie jede Datei auf einer Seite durchsuchen und dabei Text in CSS- und JavaScript-Dateien finden oder Suchen Sie ein Symbolbild, das Sie für einen Artikel benötigen.

Um zu beginnen, öffnen Sie Zapier.com in Chrome, wenn Sie dies noch nicht getan haben, öffnen Sie dann Inspect Element, klicken Sie auf die 3 vertikalen Punkte in der oberen rechten Ecke des Bereichs Entwicklertools (in der Nähe des schließenden "X") und wählen Sie " Alle Dateien durchsuchen." Die Registerkarte Suchen wird in der unteren Hälfte des Bereichs Entwicklertools angezeigt.

In das Suchfeld können Sie alles eingeben – ALLES –, das Sie auf dieser Webseite finden möchten, und es wird in diesem Bereich angezeigt. Mal sehen, wie wir das nutzen können.

Geben meta name in das Suchfeld ein , und drücken Sie Ihre Eingabe - Taste, und Sie werden sofort jedes Vorkommen von „meta name“ im Code auf dieser Seite sehen. Jetzt können Sie die Metadaten dieser Seite, die SEO-Keywords und das Targeting sehen und ob sie so konfiguriert ist, dass Google sie für die Suche indiziert. Auf diese Weise können Sie ganz einfach sehen, worauf Ihre Mitbewerber abzielen – und sicherstellen, dass Sie nichts auf Ihrer Website vermasselt haben.

Versuchen wir es mit einer anderen Abfrage. Löschen Sie den meta name , geben Sie stattdessen h2 in das Suchfeld ein und drücken Sie die Eingabetaste. Sie sehen jedes Vorkommen von "h2" in den JavaScript-Dateien von Zapier oben, aber wenn Sie nach unten scrollen, können Sie jeden "h2"-Header auf dieser Seite sehen.

Die Suche ist auch für Designer ein effektives Werkzeug, da Sie auch nach Farbe suchen können. #ff4a00 in das Suchfeld ein und drücken Sie "Enter" (und achten Sie darauf, das Kontrollkästchen neben "Fall ignorieren" zu #ff4a00 , um alle Ergebnisse zu sehen). Sie sollten jetzt jedes Mal die Farbe #ff4a00, Zapiers Orangeton, in den CSS- und HTML-Dateien dieser Site sehen. Klicken Sie dann einfach auf die Zeile "color: #ff4a00;" um zu dieser Zeile im HTML-Code der Site zu springen und sie selbst zu optimieren (etwas, das wir uns im nächsten Abschnitt ansehen werden).

Dies ist eine praktische Möglichkeit für Designer, sicherzustellen, dass eine Website dem Styleguide ihrer Marke folgt. Mit dem "Suchen"-Tool können Designer ganz einfach das CSS einer Webseite überprüfen, um zu sehen, ob eine Farbe auf das falsche Element angewendet wird, ob eine falsche Schriftfamilie auf einer Webseite verwendet wird oder ob Sie noch Ihre verwenden alte Farbe irgendwo auf Ihrer Website.

Das "Suchen"-Tool ist auch der perfekte Weg, um mit Entwicklern besser zu kommunizieren, da Sie ihnen genau zeigen können, wo Sie einen Fehler gefunden haben oder was genau geändert werden muss. Teilen Sie ihnen einfach die Zeilennummer mit, in der das Problem auftritt, und Sie erhalten Ihre Lösung viel schneller.

Oder Sie können die Webseite selbst mit den Elements ändern, dem Kernstück der Chrome-Entwicklertools.

Ändern Sie alles mit Elementen

Frontend-Entwickler verwenden das Inspect Element-Tool täglich, um das Erscheinungsbild einer Webseite zu ändern und mit neuen Ideen zu experimentieren – und das können Sie auch. Mit Inspect Elements können Sie das Erscheinungsbild und den Inhalt einer Webseite optimieren, indem Sie den CSS- und HTML-Dateien der Site temporäre Änderungen hinzufügen.

Sobald Sie die Seite schließen oder neu laden, werden Ihre Änderungen gelöscht. Sie sehen nur die Änderungen auf Ihrem Computer und bearbeiten nicht die eigentliche Website selbst. Auf diese Weise können Sie frei experimentieren und alles ändern – und dann die besten Änderungen kopieren und speichern, um sie später erneut zu verwenden.

Mal sehen, was wir damit machen können.

Klicken Sie im Bereich "Entwicklertools" auf die Registerkarte "Elemente". Wenn Sie mehr Platz benötigen, tippen Sie auf Ihre "Esc"-Taste, um das zuvor geöffnete Suchfeld zu schließen. Sie sollten den HTML-Code für diese Seite sehen – jetzt wissen Sie, wie die Wurst hergestellt wird.

In der oberen linken Ecke des Entwicklerbereichs sehen Sie ein Maussymbol über einem Quadrat. Klicken Sie darauf, dann können Sie jedes Element auf der Seite auswählen, das Sie ändern möchten. Also lasst uns einiges ändern!

Ändern Sie den Text auf einer Webseite

Wollten Sie schon immer den Text auf einer Website ändern – vielleicht um zu sehen, wie ein neuer Slogan auf Ihrer Startseite aussehen würde, oder um Ihre E-Mail-Adresse aus einem Gmail-Screenshot zu entfernen? Jetzt kannst du.

Klicken Sie auf das Symbol "Maus über einem Quadrat" und dann auf einen beliebigen Text auf der Seite – vielleicht den Slogan auf der Zapier-Startseite. In Ihrem Entwicklertools-Bereich sehen Sie eine Textzeile mit einer blauen Hervorhebung, die ungefähr so ​​​​aussieht:

Doppelklicken Sie im Bereich Entwicklertools auf den blau hervorgehobenen Text "Verbinden Sie Ihre Apps". Er wird zu einem bearbeitbaren Textfeld.

Geben Sie in dieses Textfeld alles ein, was Ihnen gefällt ("Auri ist ein Genie" sollte gut funktionieren) und drücken Sie die Eingabetaste. Voila! Sie haben gerade den Text auf der Webseite geändert.

Aktualisieren Sie die Seite und alles wird wieder normal.

Spaß? Lassen Sie uns auf dieser Seite noch einige Dinge ändern.

Ihr Entwicklertools-Bereich wird mit der Seite neu geladen, aber schließen wir ihn. Drücken Sie das "X" in der oberen rechten Ecke der Seite.

Cool. Jetzt öffnen wir es wieder – direkt an dem Text, den wir bearbeiten möchten. Sie müssen lediglich mit der rechten Maustaste auf den Teil der Seite klicken, den Sie ändern möchten, und dann auf den Link Inspect oder Inspect Element klicken, der unten im Kontextmenü angezeigt wird .

Wenn Ihr Entwicklertools-Bereich geöffnet wird, sollte dieser Satz automatisch hervorgehoben werden. Ziemlich ordentlich, oder? Es sind die kleinen Dinge, die zählen.

Nachdem wir nun den Slogan auf der Zapier-Site ausgewählt haben, ändern wir das Aussehen.

Ändern Sie die Farbe und Schriftart von Elementen

Rechts neben diesem Satz im Bereich Entwicklertools sehen Sie einen Unterbereich mit 3 zusätzlichen Registerkarten: Stile, Berechnet und Ereignislistener. Mit jedem können Sie ändern, wie dieser Satz auf der Seite aussieht. Beginnen wir mit der Registerkarte "Stile".

Möglicherweise stellen Sie fest, dass auf der Registerkarte "Stile" einige Dinge durchgestrichen sind. Dies bedeutet, dass diese Stile für das von uns ausgewählte Element nicht aktiv sind, sodass das Ändern dieser Werte keine Auswirkungen hat. Diese können wir für unsere Zwecke ignorieren.

Versuchen wir, etwas zu ändern. Klicken Sie erneut auf das Pfeilsymbol oben in Element prüfen und wählen Sie den Text direkt unter der Schaltfläche "Anmelden" auf der Seite aus. Suchen Sie auf der Registerkarte "Stile" nach "text-align" (Sie müssen möglicherweise ein wenig scrollen, um dies zu finden).

Im Moment ist es auf "center" eingestellt, aber doppelklicken Sie auf "center" und geben Sie left . Dadurch wird der Text linksbündig auf der Seite ausgerichtet.

Jetzt spielen wir mit der Farbe herum. Verwenden Sie dieses Mal das Maussymbol in Element prüfen, um die Schaltfläche auszuwählen, und suchen Sie dann auf der Registerkarte Stile diese Zeile:

Und doppelklicken Sie auf "#ff4a00". #4199ad (vergessen Sie das # nicht) und drücken Sie die Eingabetaste.

Wir haben gerade die Farbe unseres Buttons von Orange auf Blau geändert! Jetzt versuchen wir etwas wirklich Cooles.

Elementstatus ändern

Möchten Sie sehen, wie eine Schaltfläche oder ein Link aussieht, wenn jemand mit der Maus darüber fährt oder darauf klickt? Chrome Inspect Element kann dies auch mit seinen Force-Element-Status-Tools zeigen. Sie können sehen, wie das Element aussehen wird, wenn ein Besucher mit der Maus über das Element fährt (Hover-Zustand), das Element auswählt (Fokus-Zustand) und/oder auf diesen Link geklickt hat (Besucht-Zustand).

Lassen Sie uns das ausprobieren. Vergewissern Sie sich, dass Sie auf der Zapier-Startseite die Schaltfläche „Anmelden“ ausgewählt haben. Klicken Sie dann mit der rechten Maustaste auf diesen Code auf der Registerkarte Elemente und wählen Sie :active: in diesem Menü.

Dadurch wird die Schaltfläche grau, die auf der Zapier-Site angezeigt wird, wenn Sie auf die Schaltfläche klicken.

Ändern Sie nun den Wert für die Hintergrundfarbe in #FF4A00 , und Sie sollten sofort sehen, wie sich die Schaltflächenfarbe ändert.

Experimentieren Sie – ändern Sie die Farbe von :hover: deaktivieren Sie dann :hover: im Kontextmenü und ziehen Sie Ihre Maus über die Schaltfläche, um die neue Schaltflächenfarbe anzuzeigen.

Bilder ändern

Sie können mit Inspect Element auch Bilder auf einer Webseite einfach ändern. Tauschen wir den Superhelden-Hintergrund auf der Zapier-Site gegen dieses dramatische Foto einer Sonneneruption der NASA aus.

Kopieren Sie zuerst diesen Link und fügen Sie ihn in das Bild ein:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Öffnen Sie nun Inspect Element im Hintergrund der Zapier-Homepage und vergewissern Sie sich, dass Sie die signup-hero im Code ausgewählt haben. Doppelklicken Sie im Bereich "Stile" auf den Hintergrund-URL-Link und fügen Sie den oben kopierten Link ein.

Drücken Sie "Enter" und sehen Sie sofort den Unterschied.

Das Bearbeiten von Text ist praktisch, das Austauschen von Bildern macht Spaß und das Ändern von Farben und Stilen kann Ihnen helfen, die Änderungen, die Sie an Ihrer Website vornehmen möchten, schnell nachzuahmen. Aber wie wird dieser neue Slogan und das neue Button-Design auf dem Handy aussehen?

Hier kommt Emulation ins Spiel – hier kann alles, was wir bisher überprüft haben, noch weiter angewendet werden. Mal sehen wie.

Testen Sie eine Site auf einem beliebigen Gerät mit Emulation

Alles muss heute ansprechbar sein. Websites werden nicht mehr nur auf Computern angezeigt – sie werden mit größerer Wahrscheinlichkeit auf einem Telefon, Tablet, Fernseher oder auf jedem anderen Bildschirm angezeigt. Das sollte man bei der Erstellung neuer Inhalte und Designs immer im Hinterkopf behalten.

Die Emulation ist ein großartiges Werkzeug, um ungefähr zu ermitteln, wie Websites für Benutzer über verschiedene Geräte, Browser und sogar Standorte hinweg aussehen. Obwohl dies das Testen auf einer Vielzahl von Geräten und Browsern nicht ersetzt, ist es ein guter Anfang.

Im Bereich Entwicklertools sehen Sie ein kleines Telefonsymbol in der oberen linken Ecke. Klick es. Dies sollte die Seite in eine kleine Seite im Telefonstil mit einem Menü oben ändern, um die Größe zu ändern.

Ändern Sie die Größe des kleinen Browsers, um zu sehen, wie die Dinge aussehen, wenn Sie auf einem Tablet, Telefon oder einem noch kleineren Bildschirm surfen. Oder klicken Sie oben auf das Menü, um Standardgerätegrößen wie iPad Pro oder iPhone 8 Plus auszuwählen – fahren Sie fort und wählen Sie letzteres aus.

Der Webseitenbildschirm sollte auf die Größe eines iPhone 8 Plus verkleinert werden, und Sie können ein wenig hineinzoomen, indem Sie auf das +-Symbol neben der Zahl oben rechts im Raster klicken – so würde die Site aussehen, wenn jemand hineinzoomen würde Handy, Mobiltelefon.

Vergrößern Sie die Ansicht, indem Sie den rechten Rand der Webseitenemulation nach rechts ziehen. Schau was passiert? Wir befinden uns nicht mehr in der iPhone 8 Plus-Ansicht. Wenn Sie den Bildschirm entlang des Rasters ziehen, können Sie sehen, wie sich die Webseite ändert, wenn sich die Bildschirmgröße ändert, aber Ihre Ansicht spiegelt nicht mehr das zuvor ausgewählte Gerätemodell wider.

Kehren wir zur iPhone 8 Plus-Ansicht zurück, indem wir diese erneut in der Modell-Dropdown-Liste auswählen. Neben der Dropdown-Liste steht das Wort "Porträt". Wie Sie vielleicht schon vermutet haben, können Sie zwischen der Landschafts- und der horizontalen Ansicht wechseln.

Jetzt können wir sehen, wie dieser Beitrag aussehen würde, wenn Sie ihn auf einem iPhone 8 Plus lesen. Fühlen Sie sich frei, mit den anderen Geräten herumzuspielen, um zu sehen, wie sich diese Webseite und die Bildschirmauflösung ändern. Alle anderen Entwicklertools, die wir bisher besprochen haben, reagieren auch auf die Geräteansicht. Wählen Sie beispielsweise erneut den Text von Zapiers Slogan aus.

In der iPhone 8 Plus-Ansicht können wir sehen, dass dieser Text 2em ist, während er in der Standardansicht auf einem Computer 3em ist.

Das "em" ist eine Einheit für die Schriftgröße, mit der Sie die Textgröße im Verhältnis zum umgebenden Text automatisch ändern können. Angenommen, wir haben einen Benutzer mit großen benutzerdefinierten Schriftarteinstellungen in seinem Browser. Wenn Sie die Schriftgröße Ihres Absatzes auf 14px einstellen, wird Ihre Schriftart für diesen Benutzer immer 14px groß sein, egal was passiert. Wenn Sie jedoch Ihre Absatzschriftgröße auf 1em einstellen, verwendet der Browser Ihres Benutzers diese Einheit, um Ihren Text an die großen Einstellungen Ihres Benutzers anzupassen. Telefone und Tablets tun dies, um Text gut zu zoomen.

Wechseln wir nun zur Apple iPad-Ansicht und wählen Sie oben die Überschrift "Geräteübergreifend testen". Diesmal ist die Schriftgröße 3em. Die Schriftgröße änderte sich basierend auf der Geräteansicht, zurück auf die Standardgröße, die sie auf einem Computer verwenden würde, dank des größeren Bildschirms des Tablets.

Emulieren von Sensoren für Mobilgeräte

Sie haben vielleicht bemerkt, dass Ihre Maus jetzt als kleiner Kreis auf der Webseite angezeigt wird. Auf diese Weise können Sie mit der Seite interagieren, als ob Sie auf Ihrem mobilen Gerät wären. Wenn Sie klicken, während Sie die Seite nach unten ziehen, wird der Text nicht wie normalerweise in Ihrem Browser hervorgehoben, sondern der Bildschirm wird wie auf einem Touchscreen-Gerät nach unten gezogen. In dieser Ansicht können Sie sehen, wie groß die Berührungszonen auf einer Webseite sind. Das bedeutet, dass Sie sehen können, welche Schaltflächen, Symbole, Links oder andere Elemente leicht mit dem Finger berührt werden können.

Sie können Ihren Browser sogar wie ein Telefon verhalten. Drücken Sie Ihre "Esc"-Taste, um den Suchbereich in Inspect Element erneut zu öffnen, und klicken Sie diesmal auf das 3-Punkte-Menü auf der linken Seite, um ein Menü mit Optionen anzuzeigen. Wählen Sie Sensoren , um drei neue Werkzeuge zu erhalten: Geolocation, Orientation und Touch.

Mit Touch können Sie die standardmäßige Kreisauswahl ein- oder ausschalten, die eher wie ein Finger als ein normaler Mauszeiger funktioniert. Mit der Ausrichtung können Sie mit bewegungsempfindlichen Websites wie Online-Spielen interagieren, mit denen Sie Dinge bewegen können, indem Sie Ihr Telefon bewegen. Und mit Geolocation können Sie so tun, als wären Sie an einem anderen Ort.

Versuchen wir, diese Website von der Google-Zentrale in Mountain View, CA, aus anzuzeigen.

Aktivieren Sie das Kontrollkästchen neben "Geolocation-Koordinaten emulieren" und geben Sie den Wert 37 in das Textfeld Lat = und 122 in das Textfeld Lon= ein. Drücken Sie die Eingabetaste auf Ihrer Tastatur.

Es ändert sich nichts, oder?

Dies liegt daran, dass auf dieser Seite keine Inhalte vorhanden sind, die sich je nach Ihrem Standort ändern. Wenn Sie jedoch die Koordinaten auf einer Website wie Groupon.com , die Ihren Standort verwendet, um lokalisierte Inhalte Groupon.com , erhalten Sie andere Ergebnisse. Google.com an einem anderen Ort auf Google.com , sehen Sie vielleicht ein neues Google-Logo für einen Urlaub in einem anderen Land oder erhalten zumindest die Ergebnisse in einer anderen Sprache.

Emulation ist eine großartige Möglichkeit, sich in die Lage Ihres Benutzers zu versetzen und zu überlegen, was der Benutzer möglicherweise auf Ihrer Webseite sieht – und es ist eine unterhaltsame Möglichkeit, das internationale Web zu erkunden.

Emulation von Mobilfunknetzen

Sie können auch sehen, wie es ist, eine Site in verschiedenen Netzwerken zu durchsuchen, möglicherweise um zu sehen, ob Ihre Site geladen wird, auch wenn sich Ihre Benutzer in einem langsameren 3G-Netzwerk befinden.

Um es auszuprobieren, klicken Sie erneut auf die Schaltfläche mit den drei Kreisen links im Suchregister von Inspect Element und wählen Sie "Netzwerkbedingungen". Dort können Sie zwischen schnellem oder langsamem 3G oder offline wählen, um zu sehen, wie die Seite ohne Internet funktioniert. Oder klicken Sie auf Hinzufügen... , um Ihre eigenen Tests einzubeziehen (fügen Sie möglicherweise 56 Kbit/s hinzu, um das DFÜ-Internet zu testen). Laden Sie nun die Seite neu, und Sie werden sehen, wie lange es dauert, bis die Site bei einer langsamen Verbindung geladen wird – und wie die Site während des Ladens aussieht. Das zeigt, warum Sie Ihre Website verbessern sollten, damit sie bei langsamen Verbindungen schneller lädt.

Sie können auch Ihren Benutzeragenten ändern – deaktivieren Sie "Automatisch auswählen" neben "Benutzeragenten" und wählen Sie "Internet Explorer 7", um zu sehen, ob die Site ihre Darstellung für ältere Browser ändert. Das ist auch ein praktischer Hack, um Webseiten zu laden, auch wenn sie behaupten, dass sie nur in einem anderen Browser wie dem Internet Explorer funktionieren.

Herausforderungen

Lassen Sie uns mit ein paar Herausforderungen enden. Zeigen Sie uns, was Sie gelernt haben!

1. Ändern Sie die Schlagzeilen auf CNN.com und twittern Sie uns einen Screenshot Ihrer Trendartikel-Überschrift.

2. Duplizieren Sie Ihre Lieblingswebsite mit "Quellcode anzeigen" und experimentieren Sie mit dem HTML-Code, um sie zu Ihrer eigenen zu machen.

3. Sehen Sie, wie Ihre Website auf einem mobilen Gerät gerendert wird, und zeigen Sie Ihrem Entwickler, was besser gemacht werden könnte, indem Sie ihn selbst reparieren!

Das Marketingteam des Zapier-Teams verlässt sich auf Inspect Element, um private Informationen aus Screenshots in unseren App-Rezensionen zu optimieren, während unser Designteam es verwendet, um Änderungen zu simulieren und zu sehen, wie die Dinge auf verschiedenen Bildschirmen aussehen würden.

Wie verwenden Sie Inspect Element? Wir würden uns freuen, Ihre Geschichten in den Kommentaren unten zu hören!

Dieses Tutorial wurde ursprünglich am 5. Januar 2015 veröffentlicht, dann aktualisiert und am 6. Juni 2017 und 25. Januar 2018 mit Screenshots und Schritten aus der neuesten Version von Google Chrome erneut veröffentlicht.