Google Chrome wurde nicht nur für normale Internetnutzer entwickelt, sondern auch für Webentwickler, die oft eine Website erstellen, Blogs entwerfen usw. Die Option Inspect Element oder Inspect von Google Chrome hilft Benutzern, einige Informationen über eine Website zu finden , die nicht sichtbar ist . Hier sind einige Tipps zur Verwendung des Inspect-Elements^{(Inspect Element)} des Google Chrome - Browsers für Windows-PCs^{(Windows PC)} .

Überprüfen Sie das Element von Google Chrome

1] Find hidden JavaScript/Media files

Viele Websites zeigen Popups, wenn der Besucher länger als 15 oder 20 Sekunden auf der Webseite bleibt. Oder oft öffnet sich ein Bild, eine Anzeige oder ein Symbol, nachdem Sie zufällig irgendwo geklickt haben. Um diese versteckten Dateien auf einer Webseite zu finden, können Sie die Registerkarte Quellen^(Sources) von Inspect Element verwenden^{(Inspect Element)} . Es zeigt auf der linken Seite eine Baumansichtsliste, die erkundet werden kann.

2] Get HEX/RGB color code in Chrome

Manchmal mögen wir eine Farbe und möchten vielleicht ihren Farbcode herausfinden. Sie können den HEX- oder RGB -Farbcode, der auf einer bestimmten Webseite verwendet wird, leicht finden, indem Sie die native Option in Google Chrome verwenden . Klicken Sie mit der rechten^{(Right-click)} Maustaste auf die Farbe und klicken Sie auf Prüfen^(Inspect) . Meistens erhalten Sie den Farbcode auf der rechten Seite mit anderen CSS . Wenn Sie es nicht sehen, müssen Sie möglicherweise eine kostenlose Farbauswahlsoftware verwenden.

TIPP^(TIP) : Sehen Sie sich auch diese Farbwähler-Online-Tools^{(Color Picker online tools)} an .

3] Holen Sie sich Tipps zur Verbesserung der Webseitenleistung^{(3] Get web page performance improvement tips)}

Jeder liebt es, auf einer Website zu landen, die sich schnell öffnet. Wenn Sie Ihre Website gestalten, sollten Sie dies immer im Hinterkopf behalten. Es gibt viele Tools, um die Ladegeschwindigkeit von Seiten zu überprüfen und zu optimieren. Google Chrome verfügt jedoch auch über ein integriertes Tool, mit dem Benutzer Tipps zur Verbesserung der Ladegeschwindigkeit der Website erhalten können. Um auf diese Tools zuzugreifen, gehen Sie zur Registerkarte Audits und vergewissern Sie sich, dass Network Utilization , Web Page Performance und Reload Page and Audit on Load ausgewählt sind. Klicken Sie dann auf die Schaltfläche Ausführen . ^{(Run )}Es lädt die Seite neu und zeigt Ihnen einige Informationen, die verwendet werden können, um die Seite schneller zu machen. Beispielsweise können Sie alle Ressourcen abrufen, die keinen Cache-Ablauf haben, JavaScriptdie in einer Datei kombiniert werden können, und so weiter.

4] Reaktionsfähigkeit prüfen^{(4] Check responsiveness)}

Heutzutage ist es entscheidend, eine Webseite reaktionsschnell zu machen. Es gibt unzählige Tools, die überprüfen können, ob Ihre Website vollständig reaktionsfähig ist oder nicht. Dieses Tool von Google Chrome hilft Benutzern jedoch zu wissen, ob die Website reaktionsfähig ist oder nicht , und zu überprüfen, wie sie auf einem bestimmten Mobilgerät aussehen würde. Öffnen Sie eine beliebige Website, rufen Sie die Registerkarte „ Inspect Element“ auf, klicken Sie auf die mobile Schaltfläche, stellen Sie die Auflösung ein oder wählen Sie das gewünschte Gerät aus, um die Webseite zu testen.

5] Live-Website bearbeiten^{(5] Edit live website)}

Nehmen wir an, Sie erstellen eine Webseite, sind aber verwirrt über das Farbschema oder die Größe des Navigationsmenüs oder den Inhalt oder das Seitenleistenverhältnis. Sie können Ihre Live-Website mit der Option „Inspect Element “ von Google Chrome bearbeiten . Obwohl Sie die Änderungen nicht auf einer Live-Website speichern können, können Sie die gesamte Bearbeitung durchführen, um sie weiter zu verwenden. Öffnen Sie dazu Inspect Element^{(Inspect Element)} , wählen Sie die HTML -Eigenschaft auf der linken Seite aus und nehmen Sie auf der rechten Seite Styling-Änderungen vor. Wenn Sie Änderungen in CSS vornehmen , können Sie auf den Dateilink klicken, den gesamten Code kopieren und in die Originaldatei einfügen.

Inspect Element von Google Chrome ist ein echter Begleiter für jeden Webentwickler. Egal, ob Sie eine One-Page-Website oder eine dynamische Website entwickeln, Sie können diese Tipps sicherlich verwenden.

Tips on using the Inspect Element of Google Chrome browser

Gоogle Chrome is deѕigned not just for regular internеt users but also for web developers, whо often create a website, design blogs, etc. Τhe Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome reagiert nicht, jetzt neu starten?

• So beheben Sie Fehler beim Herunterladen von Dateien im Google Chrome-Browser

• So ändern Sie die Standarddruckeinstellungen in Google Chrome

• So zerstören Sie das Profil beim Schließen des Browsers in Google Chrome

• Anna Assistant ist ein perfekter Sprachassistent für Google Chrome

• Deaktivieren Sie den Profilmanager in Google Chrome unter Windows 11/10

• So aktivieren Sie die neue Material Design-Benutzeroberfläche für den Google Chrome-Browser

• Probleme mit Google Chrome und Probleme mit Windows 10

• So verhindern Sie, dass Benutzer Erweiterungen in Google Chrome installieren

• Beheben Sie den Fehler beim Herunterladen des Proxy-Skripts in Google Chrome

• So überprüfen Sie die Geschwindigkeit Ihrer Internetverbindung mit Google Chrome

• Tab Manager-Erweiterungen zur Steigerung der Produktivität in Google Chrome

• Video Speed ​​Controller für Mozilla Firefox und Google Chrome

• So erstellen und löschen Sie Profile im Google Chrome-Webbrowser

• Google Chrome wartet auf Cache – was kann ich tun?

• Google Chrome, um Abonnements für Push-Benachrichtigungen auf 90 Tage zu begrenzen

• So aktivieren und verwenden Sie die Commander-Funktion in Google Chrome

• Google Chrome-Downloads bleiben bei 100 % hängen

• So deaktivieren oder aktivieren Sie den Dunkelmodus in Google Chrome unter Windows 10

• Google Chrome vs. Firefox Quantum für Windows PC