Debugging und Fehler

Last updated:

Das Debuggen von Code und das Verständnis dafür, wo und wie Fehler angezeigt werden können, ist ein wichtiger Teil der Entwicklung mit dem CMS von HubSpot. Es gibt eine Reihe von Tools, die Sie verwenden können, um die Effizienz beim Erstellen und Deguggen zu erhöhen und um sicherzustellen, dass Ihre Website beim Weiterentwickeln optimiert wird. 

Fehler

Das CMS-Entwicklerdateisystem von HubSpot bietet viele Formen der Validierung, um sicherzustellen, dass Ihre Vorlagen und Module auf den Seiten korrekt dargestellt werden. 

Schwerwiegende Fehler

Schwerwiegende Fehler sind Fehler, die das erfolgreiche Rendern einer Seite verhindern würden. Um sicherzustellen, dass Live-Inhalte korrekt wiedergegeben werden, verhindert das CMS von HubSpot die Veröffentlichung von Vorlagen, die schwerwiegende Fehler aufweisen. Ein Beispiel für einen schwerwiegenden Fehler wäre das Fehlen erforderlicher HubL-Variablen, wie standard_header_includes. Dies führt zu Fehlern beim Entwickeln im Design-Manager oder beim Hochladen von Dateien über das CMS CLI. Die VS-Code-Erweiterung unterstützt HubL-Linting und kann die schwerwiegenden Fehler im Kontext anzeigen, bevor die Datei hochgeladen wird.

Screenshot eines schwerwiegenden Fehlers – Design-Manager
Screenshot eines schwerwiegenden Fehlers – CMS-CLI

Schwerwiegende Fehler müssen behoben werden, um Dateien zu veröffentlichen. 

Warnungen

Warnungen sind Fehler oder Probleme, die die Veröffentlichung von Dateien nicht verhindern. Warnungen sind oft Vorschläge zur Syntax oder zu möglichen Problemen, die ein Entwickler übersehen könnte. Die VS-Code-Erweiterung unterstützt HubL-Linting und kann die die Warnungen im Kontext anzeigen, bevor die Datei hochgeladen wird. Wenn Sie z. B. versuchen, eine Datei einzubinden, die nicht existiert, wird eine Warnung ausgegeben, um den Entwickler zu warnen.

Warnung – Design-Manager

Warnungen können die Veröffentlichung von Dateien nicht verhindern, es wird jedoch empfohlen, Warnungen zu untersuchen. 

Debug-Modus auf Live-Seiten

Sie können den Debug-Modus auf einer Live-Seite aktivieren, indem Sie die Seite mit einer ?hsDebug=true-Abfragezeichenfolge in der URL laden.

Hinweis Der Debug-Modus wird auf Systemseiten, z. B. 404- und Passwortseiten, nicht unterstützt. 

Beim Laden einer Live-Seite mit dieser Abfragezeichenfolge wird die Seite gerendert:

  • mit nicht minimierten Dateien.
  • mit nicht kombinierten CSS-Dateien (einzelne CSS-Dateien werden bedient).
  • ohne Zwischenspeichern von Dateien.

Wenn Sie eine Seite mit ?hsDebug=true laden, werden außerdem Debugging-Informationen am Ende des Seitenquellcodes hinzugefügt, einschließlich:

  • Ob die Seite vorgerendert werden kann, und die Gründe, warum sie nicht vorgerendert werden kann.
  • Eine Aufschlüsselung des Timings der Rendering-Anfrage, die hilfreich sein kann, um zu wissen, welche Seitenkomponenten länger dauern. Diese Aufschlüsselung wird auch der Registerkarte „Timing“ in der Entwicklerkonsole Ihres Browsers unter Doc-Anfragen hinzugefügt.
timing-tab-request-details
  • Fehler und Warnungen, wie HubL-Funktionseinschränkungen oder fehlende Dateien.
debug-page-source-elements-tab

Entwickler-Modus im Seiten-Editor

Sie können den Seiten-Editor in HubSpot auch mit der Abfragezeichenfolge laden, um Entwicklerfunktionen zu aktivieren, z. B. Abschnitte als HubL kopieren und die Möglichkeit, bestimmte Module im Design-Manager über den Seiten-Editor öffnen zu können.
  • Fügen Sie im Seiten-Editor den folgenden Parameter zur URL hinzu und drücken Sie dann die Eingabetaste: ?developerMode=true
  • Wenn die Seite neu geladen wird, befinden Sie sich jetzt im Entwicklermodus. Sie können den Entwicklermodus jederzeit beenden, indem Sie oben rechts auf „Entwicklermodus beenden“ klicken.

developer-mode-top-navigation-barWährend Sie sich im Entwicklermodus befinden, können Sie zum Code für ein bestimmtes Modul gehen, indem Sie auf das zugehörige Modul klicken und dann im Seitenleisten-Editor auf „Im Design-Manager öffnen“ klicken.

developer-mode-open-design-manager-for-module

Sie können auch alle unveröffentlichten Änderungen auf den Standardinhalt der Vorlage zurücksetzen:

  • Klicken Sie auf die Registerkarte „Inhalt“.
  • Klicken Sie rechts neben dem Vorlagennamen auf „Content zurücksetzen“.

developer-mode-reset-contents

  • Klicken Sie im Dialogfeld auf „Ja, zurücksetzen“.

HubL-Ausgabe anzeigen

Innerhalb des Design-Managers haben Code-Dateien den Schalter „Ausgabe anzeigen“, der einen zweiten Code-Editor-Bereich mit einem konvertierten Code der Datei, die Sie betrachten, öffnet. Dies ist hilfreich, um zu sehen, wie Ihr HubL-Code in CSS, HTML oder JavaScript konvertiert wird, anstatt die Live-Seiten, in denen die Datei enthalten ist, neu zu laden. Es ist auch ein hilfreiches Tool, um neue Funktionen von HubL zu erkunden oder die Grundlagen von HubL zu erlernen, da Sie leicht sehen können, was Ihre HubL-Eingabe ausgeben wird. 

HubL-Ausgabe anzeigen

|pprint-HubL-Filter

Der HubL-Filter |pprint kann für HubL-Variablen verwendet werden, um wertvolle Debugging-Informationen zu drucken. Sie gibt den Typ der HubL-Variable aus, was nützlich sein kann, um zu verstehen, mit welchen Ausdrücken, Filtern, Operatoren oder Funktionen sie verwendet werden kann.

Zum Beispiel gibt {%{{ local_dt }}endraw %} 2020-02-21 12:52:20 aus. Wenn wir diese Variable als pretty print liefern, können wir sehen, dass der Wert ein Datum ist: (PyishDate: 2020-02-21 12:52:20). Das bedeutet, dass wir HubL-Filter verwenden können, die Datumsobjekte bearbeiten oder formatieren, z. B. den HubL-Filter |datetimeformat.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1582320065943" module_id=27662896347, tab='[{"code_snippet":"{{ local_dt }}\\n{{ local_dt|pprint }}\\n{{ local_dt|datetimeformat(\'%B %e, %Y\') }}","displayName":"HubL","language":"jinja2"},{"code_snippet":"2020-02-21 12:55:13\\n(PyishDate: 2020-02-21 12:55:13)\\nFebruary 21, 2020","displayName":"Ausgabe","language":"html"}]', label='Code - Input / Output' %} {% end_module_block %}
{% module_block module "widget_1582320216044" heading='Entwicklerinfo', hx='h2', module_id=27642531648, label='Heading' %} {% end_module_block %}
{% module_block module "widget_1582320283219" alert_text='

Viele der in den Entwicklerinformationen enthaltenen Daten werden intern verwendet und können sich ändern, wenn sie nicht anderweitig dokumentiert sind.

', module_id=27668707043, label='Article Alert' %} {% end_module_block %}
{% module_block module "widget_1613612551980" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Die Entwicklerinformation für eine Seite ist der Kontext aller Daten, die verfügbar sind, wenn eine Seite gerendert wird. Dieser Rendering-Kontext ist überall über HubL zugänglich. Um auf die Entwicklerinformationen für eine Seite zuzugreifen, wählen Sie das HubSpot-Symbol in der oberen rechten Ecke der Live-Seiten und dann „Entwicklerinfo“. 

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1613612545267" img='{"alt":"HubSpot-Menü „Entwicklerinfo“","height":766,"loading":"lazy","max_height":239,"max_width":580,"size_type":"auto_custom_max","src":"https://newinboundblog.hubspot.com/hubfs/Developer%20info%20sprocket%20menu.png","width":1860}', module_id=1155231, label='Image' %} {% end_module_block %}
{% module_block module "widget_1613612626707" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Dadurch wird eine neue Registerkarte geöffnet, die den Rendering-Kontext für eine bestimmte Seite in Form von JSON zurückgibt. Es wird empfohlen, einen JSON-Formatter in Ihrem Browser zu installieren, um die Entwicklerinformationen leichter lesen zu können, z. B. diese Chrome-Erweiterung eines JSON-Formatter. Obwohl viele der im Seitenkontext enthaltenen Informationen für interne Zwecke bestimmt sind, kann dieses Tool nützlich sein, um zu sehen, welche Daten bei der Erstellung von Vorlagen über HubL verfügbar sind.

Das folgende Bild zeigt zum Beispiel die Entwicklerinformationen für https://desigers.hubspot.com/docs/developer-reference/cdn.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1613612652241" img='{"alt":"Beispiel für Entwicklerinformationen","height":488,"loading":"lazy","max_height":1,"max_width":5,"size_type":"auto","src":"https://newinboundblog.hubspot.com/hubfs/Developer%20info%20example.png","width":2102}', module_id=1155231, label='Image' %} {% end_module_block %}
{% module_block module "widget_1613612632548" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Die Werte dieser Daten werden auf der Registerkarte „Einstellungen“ des Content-Editors festgelegt:

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1613612744087" img='{"alt":"Content-Editor – Einstellungen","height":1309,"loading":"lazy","max_height":380,"max_width":580,"size_type":"auto_custom_max","src":"https://newinboundblog.hubspot.com/hubfs/content%20editor%20-%20settings.png","width":1999}', module_id=1155231, label='Image' %} {% end_module_block %}
{% module_block module "widget_1582320272694" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Die Werte sind dann über HubL zum Rendern auf Seiten zugänglich. Um den Titel und die Meta-Beschreibung in einer Basisvorlage zu drucken, würden Sie den folgenden HubL-Code verwenden.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1582320438577" code_snippet='{{ page_meta.html_title }}\n', module_id=27668713892, showLangTab=True, useLineNumbers=True, label='Code' %} {% end_module_block %}
{% module_block module "widget_1582320483354" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Die Daten im Rendering-Kontext sind über HubL verfügbar, und der JSON-Baum kann mit der Punktnotation durchlaufen werden. Zu den Daten in den Entwicklerinformationen, die Entwickler häufig drucken, gehören Modulfeldwerte und Tags, die in den Vorlagenkontext exportiert wurden.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1644330422164" heading='Website-Performance und fehlerhafte Links überprüfen', module_id=27642531648, label='Heading' %} {% end_module_block %}
{% module_block module "widget_1644330622710" module_id=1155639, label='Rich Text' %} {% module_attribute "html" %}

Es muss unbedingt sichergestellt sein, dass die Besucher Ihrer Website nicht auf fehlerhafte Links geleitet werden. Es gibt zwei Tools, mit denen Sie sicherstellen können, dass Ihre Website-Besucher an die richtige Stelle gelangen. Sie können die Website-Performance-API verwenden, um HTTP-Statusmeldungen wie 404-Fehler zu erhalten und die Betriebszeit Ihrer Website anzuzeigen.

Wenn Sie 404-Fehler sehen, sollte der Besucher zu einer relevanten URL umgeleitet werden.

Sie können auch das Tool für SEO-Empfehlungen verwenden, um fehlerhafte Links in Ihrem Seiteninhalt zu identifizieren und schnell zu beheben.

{% end_module_attribute %} {% end_module_block %}
{% module_block module "widget_1644331070788" heading='Verbesserung der Website-Geschwindigkeit', module_id=27642531648, label='Heading' %} {% end_module_block %}
{% module_block module "widget_1644331090335" module_id=1155639, label='Rich Text' %} {% module_attribute "html" defer=True %}

Beim Optimieren und Testen der Website-Geschwindigkeit spielen viele Faktoren eine Rolle. Tools und Tipps zur Optimierung der Geschwindigkeit Ihrer Website finden Sie in unserem Leitfaden.

{{cta('841bbe22-70a6-4222-a6f0-85dd019711ae')}}

{% end_module_attribute %} {% end_module_block %}
War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.