Tipps zur Verwendung des Inspect-Elements im Google Chrome-Browser

Angenommen, Sie möchten Tipps zur Verwendung der Funktion „Inspect Element“ im Google Chrome-Browser: Klicken Sie mit der rechten Maustaste auf das Element, das Sie prüfen möchten, und wählen Sie im Dropdown-Menü „Prüfen“ aus. Sie können auch die Tastenkombination Strg+Umschalt+I (Windows) oder Cmd+Opt+I (Mac) verwenden, um den Inspektor zu öffnen. Sobald Sie den Inspektor geöffnet haben, sehen Sie links den HTML-Code für die Seite und rechts den CSS-Code. Sie können im Inspektor Änderungen an HTML und CSS vornehmen und sehen, wie diese Änderungen sofort auf der Seite wirksam werden. Um den Inspektor zu verlassen, klicken Sie einfach auf das X in der oberen rechten Ecke.

Google Chrome ist nicht nur für allgemeine Webbenutzer, sondern auch für Webentwickler, die häufig Websites erstellen, Blogs erstellen usw. Element prüfen oder Prüfen Die Google Chrome-Option hilft Benutzern, einige Informationen über eine Website zu finden, die nicht sichtbar ist. Hier sind einige Tipps zur Verwendung von Inspect Element im Google Chrome-Browser für Windows-PCs.

Überprüfen Sie das Google Chrome-Element

1] Finden Sie versteckte JavaScript-/Mediendateien

Benutzerprofilfenster löschen 10

Viele Websites zeigen Pop-ups, wenn ein Besucher länger als 15 oder 20 Sekunden auf einer Webseite bleibt. Oder in vielen Fällen wird ein Bild, eine Anzeige oder ein Symbol geöffnet, nachdem versehentlich irgendwo geklickt wurde. Um diese versteckten Dateien auf einer Webseite zu finden, können Sie verwenden Quellen Registerkarte Element prüfen. Auf der linken Seite wird eine baumartige Liste angezeigt, die Sie durchsuchen können.

2] Holen Sie sich den HEX/RGB-Farbcode in Chrome

Manchmal mögen wir eine Farbe und möchten ihren Farbcode wissen. Mit der integrierten Option in Google Chrome können Sie den auf einer bestimmten Webseite verwendeten HEX- oder RGB-Farbcode leicht finden. Klicken Sie mit der rechten Maustaste auf eine Farbe und wählen Sie sie aus Prüfen . In den meisten Fällen erhalten Sie auf der rechten Seite einen Farbcode mit unterschiedlichem CSS. Wenn Sie es nicht sehen, müssen Sie möglicherweise eine kostenlose Farbauswahlsoftware verwenden.

So legen Sie einen Standarddrucker in Windows 10 fest

SPITZE : Sehen Sie sich diese an Online-Tools zur Farbauswahl Dasselbe.

Windows Aero aktivieren

3] Holen Sie sich Tipps zur Verbesserung der Webseitenleistung

Jeder liebt es, eine Website zu besuchen, die sich schnell öffnet. Wenn Sie Ihre Website gestalten, sollten Sie dies immer im Hinterkopf behalten. Es gibt viele Tools zum Testen und Optimieren der Seitenladegeschwindigkeit. Google Chrome verfügt jedoch auch über ein integriertes Tool, mit dem Benutzer Tipps zur Verbesserung der Ladegeschwindigkeit von Websites erhalten können. Um auf diese Tools zuzugreifen, gehen Sie zu Prüfung Registerkarte und vergewissern Sie sich Netzwerknutzung , Webseitenleistung , ich Seite neu laden und beim Laden prüfen ausgewählt. Dann klicken Sie auf laufen Taste. Es lädt die Seite neu und zeigt Ihnen einige Informationen, die zur Beschleunigung der Seite verwendet werden können. Beispielsweise können Sie alle Ressourcen abrufen, deren Cache nicht abgelaufen ist, JavaScript, das in einer Datei kombiniert werden kann, und so weiter.

4] Testansprechverhalten

Heutzutage ist es äußerst wichtig, eine Webseite responsive zu gestalten. Es gibt viele Tools, mit denen Sie überprüfen können, ob Ihre Website vollständig responsive ist. Dieses Google Chrome-Tool hilft Benutzern jedoch wissen, ob eine Website responsive ist oder nicht und überprüfen Sie auch, wie es auf einem bestimmten Mobilgerät aussehen wird. Öffnen Sie eine beliebige Website, erhalten Sie Element prüfen Registerkarte, klicken Sie auf Handy, Mobiltelefon Klicken Sie auf die Schaltfläche, stellen Sie die Auflösung ein oder wählen Sie das gewünschte Gerät aus, um die Webseite zu überprüfen.

Deaktivieren Sie sichere Startfenster 10

5] Live-Website bearbeiten

Angenommen, Sie erstellen eine Webseite, wissen aber nicht, welches Farbschema, die Größe des Navigationsmenüs, der Inhalt oder das Seitenverhältnis der Seitenleiste ist. Sie können Ihre Live-Website mit der Option „Inspect Element“ in Google Chrome bearbeiten. Während Sie Änderungen an einer Live-Website nicht speichern können, können Sie die gesamte Bearbeitung vornehmen, damit Sie sie später verwenden können. Öffnen Sie dazu das Inspect-Element, wählen Sie auf der linken Seite die HTML-Eigenschaft aus und nehmen Sie auf der rechten Seite Stiländerungen vor. Wenn Sie Änderungen am CSS vornehmen, können Sie auf den Link zur Datei klicken, den gesamten Code kopieren und in die Originaldatei einfügen.

Inspect Element von Google Chrome ist ein treuer Begleiter für jeden Webentwickler. Unabhängig davon, ob Sie eine Single-Page-Website oder eine dynamische Website entwerfen, können Sie sicherlich von diesen Tipps profitieren.