Keine Website ist perfekt aufgebaut. Wie bei allen Produkten, die von Menschen hergestellt werden, sind Codefehler Teil des Prozesses. Aus diesem Grund ist es wichtig, jede neue Website, die Sie erstellen, gründlich zu testen, um sicherzustellen, dass sie so fehlerfrei wie möglich ist, um Ihren Benutzern das bestmögliche Erlebnis zu bieten. 

Sie sollten eine Website nicht testen, ohne zuerst das DevTools- Kit von Google Chrome auszuprobieren . ^(DevTools)Der Chrome^(Chrome) -Entwicklermodus ermöglicht es Ihnen, eine neue Website (oder eine vorhandene) auszuprobieren und gründlich zu testen, um Fehler zu finden und zu beheben. Es kann Ihnen auch einen Einblick geben, wie andere Websites ausgeführt werden, einschließlich der Anzeige des Quellcodes. 

Hier finden Sie alles, was Sie über den Google Chrome^{(Google Chrome)} -Browser -Entwicklermodus wissen müssen , welche Tools er hat und wie Sie ihn effektiv nutzen.

Was ist der Chrome-Entwicklermodus?^{(What Is Chrome Developer Mode?)}

Wenn wir uns auf den Chrome- Entwicklermodus beziehen, sprechen wir nicht über denselben Entwicklermodus^{(same developer mode)} , den Sie auf Chromebooks sehen werden . Gemeint sind die umfangreichen Chrome - Entwicklungstools (genannt Google DevTools ), die in den Browser selbst integriert sind.

Dies sind Tools, die entwickelt wurden, um eine Webseite, die Sie zu Testzwecken in den Google Chrome -Browser geladen haben, zu testen, zu analysieren und (falls erforderlich) absichtlich zu unterbrechen. ^{(Google Chrome)}Auf einer grundlegenden Ebene können Sie DevTools verwenden , um den Quellcode für eine Website anzuzeigen, sodass Sie einen Blick unter die Haube werfen können, um zu sehen, wie eine Website erstellt wurde und wie gut sie läuft.

Google DevTools bietet jedoch mehr als das. Sie können den Chrome -Entwicklermodus verwenden, um eine Seite nach dem Laden zu ändern, Google Chrome - Konsolenbefehle ausführen, um die Seite zu steuern und zu manipulieren, sowie Geschwindigkeits- und Netzwerktests ausführen, um den Webverkehr zu überwachen.

Im Chrome DevTools-^{(Chrome DevTools)} Modus können Sie auch andere Geräte emulieren, einschließlich verschiedener Betriebssysteme und Bildschirmauflösungen . Auf diese Weise können Sie sehen, ob eine Website über ein responsives Webdesign verfügt und wo sich Websiteinhalte und -layouts je nach Geräteauflösung oder -typ ändern.

Während sich diese Tools an professionelle Webentwickler oder Tester richten, ist es auch für Standard- Chrome - Benutzer praktisch, sich mit der DevTools- Suite vertraut zu machen. Wenn Sie ein Problem mit einer Website sehen, das Sie nicht lösen können, können Sie durch Wechseln in den Chrome- Entwicklermodus feststellen, ob das Problem bei der Website oder bei Ihrem Browser liegt.

So greifen Sie auf das Google Chrome DevTools-Menü zu^{(How To Access Google Chrome DevTools Menu)}

Je nachdem, welches Tool Sie verwenden möchten, gibt es verschiedene Möglichkeiten, auf das Google Chrome DevTools- Menü zuzugreifen.^{(Google Chrome DevTools)}

Am einfachsten geht das über das Google Chrome- Menü. Klicken Sie dazu oben rechts auf das Menüsymbol mit den drei Punkten . ^{(three-dots menu icon)}Klicken Sie im angezeigten Menü auf More Tools > Developer Tools .

Dadurch wird das DevTools- Kit in einem neuen Menü auf der rechten Seite Ihres geöffneten Chrome - Tabs oder -Fensters geöffnet.

Sie können dies auch mithilfe von Tastaturkürzeln tun. Öffnen Sie auf einem Windows- oder Linux-PC den ^{(Linux PC)}Chrome -Browser und drücken Sie die Taste F12 . Sie können auch in einem geöffneten Chrome - Tab oder -Fenster die Ctrl + Alt + J oder Ctrl + Alt + I

Drücken Sie unter macOS F12 oder die Tasten Wahl Option + Command + J oder Option + Command + IChrome DevTools- Menü zu öffnen . Dadurch wird die Chrome - Konsole mit Optionen zum Wechseln zu anderen Chrome -Tools oben im DevTools- Menü geöffnet.

Wenn Sie möchten, können Sie den Quellcode für eine Website (durch Öffnen der Registerkarte „ Elemente “ im Menü ^(Elements)„DevTools“ ) auf jeder geöffneten Webseite anzeigen, indem Sie mit der rechten Maustaste auf klicken und auf die Option „Inspizieren^{(Inspect )} “ klicken .

Verwenden von Chrome-DevTools^{(Using Chrome DevTools)}

Wie wir kurz angesprochen haben, können Sie das Chrome DevTools- Kit verwenden, um den Quellcode für eine Website auf der Registerkarte Elemente anzuzeigen. ^(Elements)Damit können Sie den Code hinter der von Ihnen geladenen Seite analysieren und Fehlermeldungen (die auf Probleme beim Laden der Website hinweisen) in der Chrome - Konsole auf der Registerkarte " Konsole " anzeigen.^(Console)

Sie können auch die verschiedenen Quellen für Inhalte von einer Website auf der Registerkarte Quellen anzeigen. ^(Sources)Wenn eine Website beispielsweise ein Content Delivery Network (CDN)^{(using a content delivery network (CDN))} verwendet, werden Medien von einer Website hier als andere Quelle aufgeführt.

Im Chrome^(Chrome) -Entwicklermodus können Sie diese Inhalte direkt herunterladen oder eine komplexere Analyse der Inhalte durchführen.

Wenn Sie die Leistung einer Website testen möchten, können Sie Ihre Netzwerknutzung auf der Registerkarte Netzwerk überwachen und aufzeichnen. ^(Network)Dies zeigt die Geschwindigkeit, Größe und Art der Netzwerkanfragen, die zwischen Ihrem Browser und der Website gestellt werden.

Wenn beispielsweise eine Seite zum ersten Mal geladen wird, lädt die Site den Seiteninhalt selbst, kann aber auch Daten aus Datenbanken von Drittanbietern anfordern. Wenn Sie sich beispielsweise anmelden, kann dies eine Datenbank abfragen, die hier als Netzwerkanfrage angezeigt wird.

Sie können dies unter der Registerkarte Leistung^{(Performance )} weiter analysieren , wo Sie Ihre Nutzung des Chrome - Browsers detaillierter aufzeichnen können, einschließlich der Aufnahme von Screenshots an verschiedenen Stellen. Dadurch wird protokolliert, wie lange das Laden Ihrer Website für weitere Analysen dauert.

Google Chrome hat den Ruf , Ihren PC-Speicher zu belasten^{(being hard on your PC memory)} , daher können Sie die JavaScript - Speichernutzung Ihrer Website auf der Registerkarte " Speicher " testen. ^(Memory)Hier können verschiedene Chrome^{(Different Chrome)} -Testprofile verwendet werden. Weitere Informationen zu diesen Tests finden Sie auf der Chrome DevTools-Dokumentationsseite^{(Chrome DevTools documentation page)} .

Für eine eingehendere Analyse Ihrer Website-Inhalte sowie des möglicherweise verwendeten Browserspeichers (z. B. zum Protokollieren von Daten) können Sie die Registerkarte Anwendung durchsuchen. ^{(Application)}Sie können Website-Cookie-Informationen hier im Abschnitt Cookies anzeigen oder den verwendeten Speicher löschen, indem Sie auf die Option Speicher löschen klicken.^{(Clear storage)}

Wenn Sie sich Sorgen um die Sicherheit Ihrer Website machen, können Sie auf der Registerkarte Sicherheit überprüfen, wie gut sie funktioniert. ^{(Security )}Dadurch erhalten Sie einen schnellen Überblick über die Sicherheitsanalyse von Chrome für eine Seite, einschließlich der Frage, ob die Seite über ein korrektes und vertrauenswürdiges SSL - Zertifikat verfügt.

Wenn Sie einen Bericht über die Leistung Ihrer Website erstellen möchten, einschließlich der Frage, ob sie typische Benutzerstandards erfüllt und ob die Websiteleistung die Suchmaschinenoptimierung beeinträchtigen könnte, können Sie auf die Registerkarte „ Leuchtturm^(Lighthouse) “ klicken . Dies bietet Einstellungen, die Sie für Ihren Bericht aktivieren oder deaktivieren können – klicken Sie auf Bericht erstellen, um den anzuzeigenden Bericht^{(Generate report)} zu erstellen.

Dies kratzt kaum an der Oberfläche des Potenzials, das der Chrome- Entwicklermodus Entwicklern bieten kann. Wenn Sie mehr erfahren möchten, sollte Ihnen die Chrome DevTools-Dokumentation^{(Chrome DevTools documentation)} mit den angebotenen Tools und Funktionen helfen, einschließlich der Erstellung Ihrer eigenen Benutzertests damit. 

Fortgeschrittene Google Chrome-Tricks^{(Advanced Google Chrome Tricks)}

Die meisten Chrome-Benutzer werden nie wissen, dass das Google Chrome DevTools- Kit in ihrem Browser vorhanden ist, aber für Power-User bleibt es eine äußerst nützliche Methode zum Testen und Analysieren von Websites. Es sind auch Chrome-Erweiterungen von Drittanbietern für Webentwickler^{(Chrome extensions for web developers)} verfügbar, mit denen Sie Ihre Website weiter testen können.

Wenn Sie eine einfache Website^{(building a basic website)} erstellen , kann der Wechsel in den Chrome -Entwicklermodus Ihnen helfen, Fehler auf Ihrer Website zu erkennen, die nicht sofort sichtbar sind. Sie können dies nur tun, wenn Chrome ordnungsgemäß funktioniert. Wenn Sie also Probleme mit Chrome-Abstürzen^{(struggling with Chrome crashes)} haben, müssen Sie möglicherweise zuerst Ihren Browser zurücksetzen oder neu installieren.

What Is Chrome Developer Mode & What Are Its Uses?

No webѕite is built perfectly. Like all рroducts madе by humans, code errors are part of the prоcess. That’ѕ why it’s important tо thoroughly test any new website you build to make sure that it’s as free of errors as possible to give your usеrs thе best рossible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Google Chrome Autofill: Eine vollständige Anleitung

• Die 10 besten Datenschutzerweiterungen für Chrome (2022)

• Verwenden Sie diese 4 Chrome-Plug-ins, um Ihre Gmail-Nachrichten zu verschlüsseln

• Inhaltseinstellungen von Google Chrome: Eine vollständige Anleitung

• Was ist der beste Telefonkonferenzdienst – Die besten Apps im Vergleich

• So verwenden Sie einen Windows-Paket-Manager zum Installieren von Windows-Programmen

• Die besten Apps zur Überwachung der Internetnutzung

• Verwenden Sie HP Print and Scan Doctor, um allgemeine Druckerprobleme zu beheben

• Zwei Transkriptionswerkzeuge zum Umwandeln von Audio in Text

• Beste CPU-, Grafikkarten- und RAM-Tuning-Dienstprogramme

• Die 5 besten IP-Scanner-Tools für Windows, Mac, iOS und Android

• Die 5 besten sicheren APK-Downloadseiten für Android-Apps

• Was ist ein Chatbot und wie verwendet man einen auf Ihrer Website?

• Automatisches Verschieben, Löschen oder Kopieren von Dateien in Windows

• 5 portable Apps, die Sie unbedingt auf Ihrem USB-Stick haben möchten

• 4 großartige Tools zum Erstellen von Windows Installer-Paketen

• 5 Eingabeaufforderungstricks, um CMD interessanter zu machen

• Die besten Wetter-Widgets für Windows 10/11

• So rippen Sie Ihre DVDs und Blu-Rays mühelos mit MakeMKV

• Die 5 besten Blaulichtfilter-Apps für Windows, Mac und Linux