デバッグとエラー

コードをデバッグすることと、エラーをどこでどのようにして表示するかを理解することは、HubSpot CMSでの開発で重要な役割を果たします。開発とデバッグの効率を高め、開発を進めながらウェブサイトの最適化を確認するために使用できる多数のツールがあります。 

HubSpotのCMSで利用できるデベロッパー ファイル システムには、テンプレートとモジュールをページ上に正常にレンダリングするための数多くの検証が用意されています。 

致命的なエラーとは、ページが正常にレンダリングされないエラーです。公開コンテンツが正しく表示されるように、致命的なエラーがあるテンプレートはCMSによって公開が妨げられます。致命的なエラーの例としては、standard_header_includesなどの必須のHubL変数が欠落しているケースがあります。このような場合、デザインマネージャーでの開発時や、CMS CLIでのファイルアップロード時にエラーが発生します。VS Code ExtensionはHubL Lintをサポートしているため、ファイルのアップロード前に具体的な箇所に致命的なエラーを表示できます。

ファイルを公開するには、致命的なエラーを解決する必要があります。 

警告とは、ファイルの公開を妨げないエラーまたは問題です。警告の大半は、構文に関する提案か、開発時に見落とされている潜在的な問題を示します。VS Code ExtensionはHubL Lintをサポートしているため、ファイルのアップロード前に具体的な箇所に警告を表示できます。例えば、存在しないファイルをインクルードしようとすると、開発者には警告が表示されます。

警告はファイルの公開の妨げにはなりませんが、調査することが推奨されます。 

HubSpotのCMSでは、ウェブサイトに対するさまざまな最適化が自動的に行われます。詳しくは、CDN、セキュリティー、パフォーマンスを参照してください。こうした最適化に関する問題を本番ウェブサイト上でデバッグするのは困難な場合があります。クエリー文字列?hsDebug=trueを指定してHubSpot上の公開ページを読み込むと、次のようにページがレンダリングされます。

• 非縮小ファイルを使用
• 非結合CSSファイルを使用（個別のCSSファイルが提供される）
• キャッシュされたファイルを使用しない

デザインマネージャー内では、コードファイルについて「出力の表示」トグルを使用できます。これによりもう1つのコードエディターのパネルが開いて、閲覧中のファイルのトランスパイル（ソース変換）されたコードが表示されます。ファイルが含まれている公開ページを再読み込みすることなく、HubLコードがどのようにCSS、HTML、またはJavaScriptへとトランスパイルされるかを確認する際に役立ちます。また、HubLの入力がどのように出力されるかを簡単に確認できるので、HubLの新機能を試すときや、HubLの基礎を学習するときにも役立つツールです。 

HubL変数で|pprint HubLフィルターを使用すると、有用なデバッグ情報を出力できます。HubL変数の型が出力されるので、このHubL変数を使用できる式、フィルター、演算子、関数を把握する際に役立ちます。

例えば、{{ local_dt }}は、2020-02-21 12:52:20を出力します。この変数をpprintした場合、出力値は(PyishDate: 2020-02-21 12:52:20)という日付になります。つまり、|datetimeformatのようなHubLフィルターを使用して、日付オブジェクトを操作したり書式設定したりできます。

ページの開発者情報は、ページがレンダリングされる際の全てのデータのコンテキスト出力です。このレンダリングコンテキストは、全てHubLによりアクセスできます。ページの開発者情報にアクセスするには、公開ページの右上隅にあるHubSpotスプロケットアイコンをクリックして、［開発者情報（Developer Info）］を選択します。 

これにより、新しいタブが開き、ページのレンダリングコンテキストがJSON形式で表示されます。開発者情報を読みやすくするために、Chrome拡張機能のJSON FormatterなどのJSON整形ツールをブラウザーにインストールすることをお勧めします。ページのコンテキストに含まれる情報の多くは社内利用向けですが、テンプレートの作成時にHubLで利用できるデータを確認する場合に役立ちます。

例えば、次の画像は、https://desigers.hubspot.com/docs/developer-reference/cdnの開発者情報を示しています。

このデータの値は、コンテンツエディターの［設定］タブで設定されます。

この値は、HubLでページをレンダリングするために利用できます。base templateのタイトルとメタディスクリプションを出力するには、次のHubLを使用します。

レンダリングコンテキストのデータはHubLによりアクセスできます。また、JSONツリーはドット表記を使用して走査できます。開発者が頻繁に出力する開発者情報データとしては、テンプレートコンテキストにエクスポートされたモジュールのフィールド値とタグがあります。