しかし Blocs 実際にサイトを設計するときに、最終的なサイトの非常に正確な表現を提供します。サイトをすばやくプレビューして、次のような他の設計面を確認およびテストする必要がある場合があります。 相互作用, FXをスクロール • アニメーション. Blocs より自然で包括的な方法でサイトをテストできるように設計されたさまざまなプレビューオプションが組み込まれています。
のプレビューモード Blocs HTMLをローカルでプレビューできるだけでなく、PHPのプレビューもサポートしています。 ページに ファイルの種類 でPHPに設定 ページ設定、プレビューは、を介して追加されたPHPコードをレンダリングします コードウィジェット リアルタイム。
アプリプレビュー内
アプリ内プレビューでは、メイン画面を離れることなく、Web ブラウザーで行うようにサイトをプレビューできます Blocs 応用。 プレビューモードに入るには、単に 左クリック ブレークポイント コントロールの右側にある再生ボタン、またはキーボード ショートカットを使用 ⌃V.
ブレークポイントの切り替え
デザインモードだけでなく、プレビューモードもメインにアクセスできます ブレークポイントコントロール。 これらのコントロールを使用すると、サイトのレスポンシブ特性を確認するために、さまざまな画面サイズをすばやく簡単に切り替えることができます。
開発者ツール
アプリのプレビューでは、強力な WebKit 開発者インスペクター ツールにもアクセスできます。 インスペクター ツールは、サイトのコードを検査し、発生している潜在的な問題をデバッグするための優れた方法です。 プレビュー フレームの左上にあるメニュー ボタンを使用してアクセスできます。
または単に 右クリック ページ上の任意の要素（プレビューモード中）および選択 検査する.
ブラウザでプレビュー
アプリのプレビューだけでなく、 Blocs また、Macにインストールした任意のブラウザでサイトをすばやくプレビューすることもできます。 ブラウザでサイトをプレビューするには、 右クリック プレビューボタンを押して、ポップアップメニューからブラウザを選択します。
ブラウザでのプレビューについて詳しく読むことができます （茶事の話はこちらをチェック）.
プレビューモードで問題が発生した場合、または単に機能しない場合は、これを読むことをお勧めします トラブルシューティングガイド.
ローカルネットワークプレビュー
この Blocs プレビュー サーバーには、Mac と同じネットワーク上の任意のデバイスからアクセスすることもできます。 プレビュー モードでは、 アンテナ メイン アプリケーション フレームの左上にあるシンボル。 このボタンをクリックすると、XNUMX つのオプションを含むポップアップ メニューが開きます。
エアドロッププレビュー
最初のオプションでは、Air Drop 経由で同じローカル ネットワーク上の他のデバイスとプレビュー URL をすばやく簡単に共有できます。 Air Drop を使用して共有された URL は、受信デバイスの Web ブラウザで自動的に開きます。
Air Drop オプションが利用できない場合、またはデバイスが利用可能として表示されない場合は、次の手順を実行します。 この専用のトラブルシューティング ガイド 問題の解決に役立つ可能性があります。
プレビュー URL をコピー
XNUMX 番目のボタンは、ローカル ネットワーク URL を Mac のペーストボードにコピーします。 Mac と同じネットワークに接続されているデバイスの Web ブラウザにこの URL を入力すると、実際のデバイスでサイトをプレビューしてテストできるようになります。