でウェブサイトを構築する Blocs これは非常に単純で楽しいプロセスですが、サイトをエクスポートしてホストすると、問題が発生する場合があります。 どこを見ればよいかわからない場合、これらの問題の原因を見つけるのは非常に時間がかかる可能性があります。
幸いにも Blocs また、すべてのWebブラウザーには、Webインスペクターと呼ばれるツールが組み込まれています。このツールを使用すると、Webページのコードを検査して、問題をすばやく特定できます。
インスペクターへのアクセス
Google Chrome、FireFox、 Blocs （プレビューモードのみ）すべてデフォルトでWebインスペクターが有効になっていますが、Safariではこの機能を有効にする必要があります 設定を介して.
インスペクターにアクセスするには、ページ上の任意の要素を右クリックし、コンテキストメニューから[ 検査する。 これにより、Webインスペクターが開きます。
インスペクターを理解する
Webインスペクターは、これまでに見たことがない場合は少し威圧的になる可能性があります。心配しないでください。それほど複雑ではありません。問題を見つけるためにどこを見ればよいかを知る必要があります。
Webインスペクターウィンドウ内で、ウィンドウの上部にいくつかのタブがあることに気付くはずです。ラベルが付いたタブに移動します。 コンソール と 左クリック それ。 これにより、コンソールペインが表示されます。
コンソール
Webインスペクターコンソールは、サイトで発生したエラーなど、サイトの読み込み中にサイトに関するさまざまなメッセージを出力します。 コンソールのエラーメッセージは通常、次のように表示されます。 レッド テキスト、これはそれらを見つけるのを非常に簡単にします。
一般的な問題
Webデザイナーや開発者がサイトを公開するときに遭遇する最も一般的な問題は、コンソールで「アセット」と呼ばれるアセットの欠落です。 404エラー。 画像やその他のリソースなどのアイテムが見つからない場合、コンソールは、リソースがホストサーバーに見つからないことを示す404エラーメッセージをログに記録します。
404エラーは通常、画像の欠落、視覚的なスタイルの破損、サイトの機能の破損の原因です。
404エラーの修正
404エラーの修正は、通常、非常に簡単なプロセスです。 エラーログは、特定の場所にあるサーバーからリソースが欠落していることを示しています。問題を解決するには、欠落しているリソースをアップロードして、404エラーログに記載されているパスに追加するだけです。
で作成されたサイトでは、覚えておくことが重要です Blocs、不足している画像は通常、サーバー上のディレクトリにラベルを付けて配置する必要があります img、スタイルシート .css ラベルの付いたディレクトリ内のファイル CSS と 。Jsの ラベルの付いたディレクトリ内のファイル js.
その他のエラー
404エラーはおそらくウェブサイトの問題の最も一般的な原因ですが Blocs ユーザー、コンソールに記録できるさまざまなサーバー側エラーがあります。他のさまざまなエラータイプについて詳しく読むことができます。 こちら.