Was ist eine Entwicklerkonsole?
Die Entwicklerkonsole ist eine eingebettete Entwicklungsumgebung mit einer Reihe von Werkzeugen, mit denen Sie Anwendungen direkt in Ihrem Browser erstellen, debuggen und testen können. Sie protokolliert Informationen zu einer Webseite, wie Netzwerkanfragen, HTML, CSS, JavaScript, Warnungen und Fehler. Die Screenshots von Warnungen in der Entwicklerkonsole können dem Elfsight-Support-Team äußerst hilfreich sein, falls sie das Problem lösen, das Sie mit unseren Widgets haben.
So öffnen Sie die Konsole in verschiedenen Browsern
Mit nur wenigen Klicks öffnen Sie die Konsole in Ihrem bevorzugten Browser, und Sie können sie auch per Tastenkürzel starten. In der untenstehenden Anleitung finden Sie kurze Hinweise, wie Sie die Konsole in allen gängigen Browsern öffnen – inklusive Screenshots des Ablaufs.
So öffnen Sie die Entwicklerkonsole in Chrome
Um das Entwicklerpanel in Google Chrome zu öffnen, klicken Sie auf das Dreipunkt-Menü in der oberen rechten Ecke des Browserfensters, klicken Sie auf Weitere Tools, dort finden Sie Entwicklerwerkzeuge in der Ausklapp-Liste.
Eine weitere Option ist die Verwendung der Chrome-Entwicklertools-Tastenkombination: F12 (Windows/Linux) und Option + ⌘ + J (macOS).
Sie sehen die Konsole entweder unten oder rechts im Chrome-Fenster. Wählen Sie die Konsole Option und beginnen Sie mit der Prüfung der Leistungsfähigkeit Ihres Codes.
Außerdem machen Sie sich mit dem Öffnen von Entwicklertools in verschiedenen Browsern vertraut.
Opera-Entwicklertools öffnen
Sie können die Opera-Konsole verwenden, um HTML, CSS und JavaScript zu untersuchen, zu bearbeiten und zu debuggen. Um damit zu arbeiten, verwenden Sie die folgende Tastenkombination: Ctrl+Shift+C, um die Entwicklertools-Konsole zu öffnen, oder Ctrl+Shift+I, um zunächst die Entwicklertools zu öffnen und anschließend Console auszuwählen.
Starten Sie die Firefox-Webkonsole
Die Mozilla-Konsole lässt sich öffnen, indem Sie im oben rechts befindlichen Menü auf Web-Entwickler klicken und anschließend Browser-Konsole auswählen. Außerdem können Sie die Firefox-Entwicklerwerkzeuge mit der Tastenkombination Ctrl+Shift+J verwenden.
Entwicklertools in Safari aktivieren
Um die Konsole in Safari zu öffnen, müssen Sie das Entwickler-Menü aktivieren. Gehen Sie dazu in die Safari-Einstellungen (Safari-Menü > Einstellungen) und wählen Sie die Erweiterte Registerkarte.
Außerdem öffnen Sie die Entwicklertools in Safari, indem Sie auf Develop > Show Javascript Console klicken. Sie können auch die Tastenkombination Option + ⌘ + C verwenden. Die Konsole-Registerkarte öffnet sich automatisch; Sie müssen sie nicht auswählen.
Öffnen Sie die Microsoft Edge-Konsole
Nach Format: Welche Inhaltstypen (Posts, Karussells, Reels, Stories) erzeugen das meiste Produkt-Engagement?
Öffne die Internet Explorer-Konsole
Die IE-Entwicklungskonsole lässt sich analog zur Edge-Konsole öffnen. Klicken Sie im Dropdown-Menü auf F12-Entwicklertools oder drücken Sie einfach die F12-Taste. So greifen Sie zuverlässig auf die Internet Explorer-Konsole zu und können sie untersuchen.
Die Hauptregisterkarten der Entwicklertools
Unten finden Sie eine kurze Übersicht der wichtigsten Registerkarten der Konsole, die sich in den Entwicklertools befinden. Wir haben sie alle anhand des Google Chrome-Browsers geprüft.
Elemente-Registerkarte
Das Elements Panel ist ein hervorragendes Tool für alle, die die CSS- und HTML-Performance ihrer Webseite analysieren möchten. Sie können mit der rechten Maustaste auf jedes Element der Seite klicken, Element untersuchen auswählen und die Attribute des Elements im Code hervorgehoben sehen.
Konsole
Der Console-Tab in den Chrome Developer Tools zeigt, wie Skripte auf der Webseite funktionieren. Er dient als Interpreter von Befehlszeilen, mit dem du eine Skript-Engine starten und Befehle eingeben kannst, um Skripte auszuführen. Wenn unser Support-Team dich bittet, einen Screenshot deiner Konsole zu machen, benötigen sie ein Bild, das im Console-Tab aufgenommen wurde.
Quellen-Panel
Sie können die Sources-Registerkarte in Chrome DevTools verwenden, um JavaScript und CSS zu bearbeiten, Dateien anzuzeigen, JavaScript-Schnipsel zu erstellen und sie weiterzuverwenden. Außerdem kann Ihnen diese Registerkarte beim Debuggen von JavaScript-Code helfen.
Netzwerk-Registerkarte
Der Netzwerk-Panel kann als Testwerkzeug genutzt werden, das die Leistung der Webseite prüft und Probleme erkennt, die die Seite verlangsamen. Die Netzwerk-Registerkarte in Chrome beginnt mit der Aufzeichnung aller Netzwerkanfragen, sobald Sie DevTools öffnen. Sie können sie außerdem nach unterschiedlichen Eigenschaften sortieren.
Leistungstab
Der Leistung-Bereich ermöglicht es Ihnen, Laufzeit- und Ladeleistungen im Zeitverlauf aufzuzeichnen. Dieses Panel zeigt, wie gut die Website funktioniert, sobald sie vollständig geladen ist und von Besuchern genutzt wird. Sie können entweder die Leistung aufzeichnen oder eine Reihe von Screenshots des Prozesses erstellen.
Speicher-Reiter
Verwenden Sie den Chrome-Speicher-Reiter, um Speicherprobleme wie Speicheraufblähung, Speicherbereinigung und Speicherlecks zu diagnostizieren und zu beheben. All diese Probleme wirken sich auf die Seitenleistung aus. Wenn diese Probleme nicht behoben werden, wird Ihre Website langsam und für Besucher unattraktiv.
Anwendungs-Panel
Mit Hilfe des Application Tabs können Sie Progressive Web-Apps debuggen; Speicher, Datenbanken und Caches inspizieren und verwalten; Cookies prüfen und löschen; Ressourcen untersuchen.
Sicherheit
Die Sicherheits-Registerkarte kann nützlich sein, wenn Sie Probleme mit gemischten Inhalten und Zertifikatsproblemen debuggen möchten. Die Website gilt als unsicher, wenn die von Ihnen besuchte URL über HTTP angefordert wurde. Nach modernen Web-Anforderungen sollte dies über das HTTPS-Protokoll erfolgen. Wenn Sie feststellen, dass die Seite gemischte Inhalte enthält, bedeutet dies, dass sie teilweise geschützt ist und anfällig für Sniffer ist.
Lighthouse-Registerkarte
Lighthouse ist ein automatisiertes Werkzeug zur Verbesserung der Qualität von Web-Anwendungen. Es ist direkt in Chrome DevTools integriert. Es bietet Leistungs-Audits, Barrierefreiheit, Progressive Web Apps, SEO und mehr.
Typische Konsolenwarnungen und Fehler bei der Arbeit mit Elfsight-Widgets
Manchmal läuft etwas schief bei Elsfight-Widgets. Scheuen Sie sich nicht, wenn Sie rote Warnungen oder Fehler in der Konsole sehen. Wenn Sie den Grund kennen, warum sie aufgetreten sind, können Sie wahrscheinlich alles selbst beheben. Unten finden Sie eine Liste häufiger Fehler, die Ihnen in der Konsole begegnen können.
Dies sind zwei Fehler in Bezug auf alle unsere Widgets:
WIDGET BLOCKIERT – Sie haben die Website-Domain in Ihrem Elfsight-Konto blockiert, falls der Fehler auf apps.elfsight.com verweist.
Widget nicht gefunden – Möglicherweise haben Sie das Widget versehentlich in Ihrem Konto gelöscht. Prüfen Sie es.
Sehen Sie? Kein Problem. Nun schauen wir uns einige Fehler bei bestimmten Widgets und Integrationen an.
Häufige Probleme mit Google Maps
Bei Google Maps treten in der Regel Fehler auf, wenn der API-Schlüssel nicht korrekt ist.
ExpiredKeyMapError – Der API-Schlüssel ist abgelaufen oder wird nicht erkannt. In den meisten Fällen sollten Sie einen neuen generieren. Falls dieser Fehler direkt nach der Erstellung eines neuen API-Schlüssels auftritt, müssen Sie entweder 1 bis 8 Minuten warten oder die Places API separat aktivieren.
RefererNotAllowedMapError – Die Elfsight-URL, die die Maps JavaScript API lädt, darf nicht als Referrer verwendet werden. Prüfen Sie die Referrer-Einstellungen Ihres API-Schlüssels in der Google Cloud Platform Console. Während der Nutzung unseres Widgets müssen Sie uns als Referrer hinzufügen. Hier ist ein Artikel, wie Sie dies korrekt einrichten.
ClientBillingNotEnabledMapError – Für die Nutzung des Google Maps-Widgets benötigen Sie ein Billing-Konto. Dieses Problem trat auf, weil Sie die Abrechnung in Ihrem Projekt nicht aktiviert haben. Die Lösung besteht darin, die Abrechnung im Google Cloud-Projekt zu aktivieren, das mit dieser Client-ID verknüpft ist. Sie können dies hier tun.
BillingNotEnabledMapError – Wenn Sie Google Maps verwenden, müssen Sie die Abrechnung aktivieren.
YouTube-Galerie-Fehler in der Konsole
Wenn Sie die Elfsight YouTube Video Gallery verwenden, müssen Sie sich nicht um die meisten der unten aufgeführten Probleme kümmern. Es können jedoch auch zwei allgemeine Probleme bei unserem Widget auftreten.
quotaExceeded – YouTube uses quotas for people to reach its content and fetch it to websites or applications. Once YouTube quota exceeded, you’ll notice that your YouTube Gallery accidentally stops working or works slowly on the website. The solution may be the following:
- Beantragen Sie einen neuen API-Schlüssel, falls Sie YouTube-Inhalte selbst abrufen.
- Kontaktieren Sie unser Support-Team unter support@elfsight.com, wenn Sie die Elfsight YouTube-Galerie verwenden – das geht deutlich leichter.
Video nicht gefunden – Diese Warnung kann auftreten, wenn die eingegebene URL, die Sie zum Verlinken auf das YouTube-Video verwenden, falsch ist. Manchmal fügen Benutzer einen Link zur Seite mit dem Video ein, der jedoch nicht die eigentliche Speicheradresse des Videos ist, was den Fehler verursacht. Überprüfen Sie alles und fügen Sie den Link zum ursprünglichen Video ein.
Facebook-Feed- und Instagram-Feed-Fehler
Wenn der Facebook-Feed oder Instagram nicht funktioniert, können Sie in der Entwicklerkonsole nachsehen, was passiert. Da beide beliebten Anwendungen auf der Facebook-API basieren, können die folgenden Fehlermeldungen gleichermaßen für beide gelten.
err_ssl_protocol_error Beim Einbinden des Facebook- oder Instagram-Feed-Widgets auf Ihrer Website können verschiedene Ursachen vorliegen. Um das Problem zu beheben, versuchen Sie Datum und Uhrzeit korrekt zu setzen, Chrome-Browsing-Daten zu löschen oder Ihren SSL-Status zu löschen. Falls die Facebook Graph API Fehler wirft, können Sie die fbtrace_id verwenden, um mehr Informationen darüber zu erhalten. Falls nichts davon hilft, wenden Sie sich bitte an unser Support-Team.
rest_cannot_access – bedeutet in der Regel, dass ein Drittanbieter-Widget wie das Password Protect-Plugin verhindert, dass unser Widget ordnungsgemäß funktioniert. Durch Deaktivieren eines solchen Dienstes klappt es oft besser.
Die von Ihnen angeforderte Seite kann derzeit nicht angezeigt werden – dies kann bedeuten, dass Ihre Facebook-Anwendung im Entwicklermodus ist. Falls Sie ein Elfsight Facebook-Feed-Nutzer sind, erhalten Sie diese Fehlermeldung nicht. Wenn Sie diese Meldung sehen, wenden Sie sich an unser Support-Team.
OAuthException bei Instagram bedeutet insbesondere, dass der Login-Status oder der Zugriffstoken widerrufen, abgelaufen oder aus irgendeinem Grund ungültig ist. In diesem Fall kontaktieren Sie unser Support-Team; die Elfsight-Entwickler erhalten ggf. ein neues Zugriffstoken oder prüfen ggf. einen Subcode.
Die häufigsten Konsolenfehler
Als erfahrener Webentwickler haben Sie diese Fehler wahrscheinlich schon öfter gesehen, als Ihnen lieb ist. Sie können sie in Chrome sehen, wenn Sie eine Eigenschaft lesen oder eine Methode auf einem undefinierten Objekt aufrufen. Sie können diese speziellen Fehler in der Chrome- und Safari-Entwicklerkonsole testen, indem Sie Try-Catch verwenden.
Wenn du kein professioneller Programmierer bist, kannst du diese Richtlinie weglassen.
Uncaught TypeError: Eigenschaft kann nicht gelesen werden.
Dies kann aus vielen Gründen passieren, am häufigsten aufgrund einer fehlerhaften Zustandsinitialisierung beim Rendern von UI-Komponenten. Das lässt sich leicht beheben. Der einfachste Weg: Initialisieren Sie den Zustand im Konstruktor mit sinnvollen Standardwerten.
TypeError: ‘undefined’ ist kein Objekt
Dies ist ein Fehler, der in Safari auftritt, wenn Sie eine Eigenschaft lesen oder eine Methode auf einem undefinierten Objekt aufrufen. Sie können ihn in der Safari-Entwicklerkonsole testen. Er ist praktisch derselbe Fehler wie der oben gezeigte für Chrome, jedoch verwendet Safari eine andere Fehlermeldung.
(unbekannt): Skriptfehler
Wenn Sie diesen Fehler sehen, sollten Sie zuerst die reale Meldung erhalten. Sie können sie erhalten, indem Sie Folgendes tun: Setzen Sie den Header Access-Control-Allow-Origin auf *; das bedeutet, dass die Ressource von jeder Domain aus korrekt abgerufen werden kann. Falls nötig, ersetzen Sie * durch Ihre Domain, z. B. Access-Control-Allow-Origin: www.example.org. Die Verwaltung mehrerer Domains wird jedoch kompliziert und lohnt sich möglicherweise nicht, wenn Sie ein CDN verwenden, da Caching-Probleme auftreten können.
So beheben Sie die häufigsten JavaScript-Fehler in der Konsole. Wir ergänzen diese Liste, sobald uns und unseren Kunden weitere Probleme begegnen.
Fazit
Die Entwicklerkonsole ist ein großartiges Instrument, das es jedem Programmierer ermöglicht, Zugriff auf eine Fülle von Daten über seine Website zu erhalten. Es ist nicht schwer, sie zu öffnen und dieses Tool zu verwenden; es wird jedoch etwas Zeit und Mühe kosten – Geduld zahlt sich aus.
Welche Fehler sind Ihnen jemals begegnet? Teilen Sie unten Ihre Erfahrungen in den Kommentaren – wir diskutieren sie gerne mit Ihnen!
Denken Sie daran: Wir haben auch weitere großartige Anleitungen, zum Beispiel erfahren Sie hier, wie Sie Google-Unternehmensbewertungen auf der Website einbetten können!Google-Unternehmensbewertungen auf der Website einbetten!
