プレビューモードについて
プレビューモードとは何でしょうか？それは何かをプレビューするためのモードです。その通りなのですが、ここでは隠された便利な機能についていくつか紹介します。
現在作業を行っている書類とプレビューモードとを現在のタブの中で切り替えるには Cmd-2 および Cmd-3 のショートカットを使用するのが便利です。
最新を常に
静的な HTML ファイルを編集している場合、Coda は常に最新の状態をプレビューしようとしています。保存する前の変更であったり、リモートファイルでさえも常に最新状態をプレビューします。
サーバからパースされる PHP の様な動的な言語の場合、保存される毎にプレビュー内容を更新します。
HTML から <link> などで CSS ファイルを参照しており、HTML ファイルをプレビューしている場合、CSS ファイルを編集し保存するたびにプレビュー内容が更新されます。ひとつのタブを分割し HTML プレビューと CSS ファイル編集を表示して作業するのはとても便利です。
Safari もその他も
Safari が人気だと言っても、世の中には他のブラウザがたくさんあります。Web デベロッパならば尚のこと、あらゆるブラウザを考慮しなければならないでしょう。そのため、我々はプレビューモードのアドレスバーの隣に小さなボタンを設けました。
クリックしホールドすると、あなたの Mac にインストールされているブラウザがポップアップメニューに現れます。プレビューしたいブラウザをメニューから選択すると、次回からはこのボタンをクリックするだけで外部プレビューブラウザとして機能するようになります。
ソースを見る
プレビューウインドウの左下にある左右大括弧のボタンを押すと、現在プレビューされているページのソースを表示します。Coda のソースビューアは編集可能です。ソースビューアでの変更内容は即座に反映され、プレビューすることが可能です。
これは一時的な変更で、変更内容をエディタから書類にペーストしない限り実際に反映されることはありません。しかし、いくつかある案が実際にどのように表示されるかを試すのにとても役立ちます。
コンソールをチェックする
プレビューウインドウの下にある吹き出しボタンを押すと、JavaScript コンソールが表示されます。もしあなたがコーディングした JavaScript に問題があれば、このコンソールから原因をさぐることができるでしょう。
JavaScript エラーがある場合、それをダブルクリックするとエディタに切り替わり該当の行がハイライトされます。
エラーは順に追加され蓄積します。作業が終わったら "消去" ボタンを押してください。
インスペクタガジェット
プレビューウインドウの下にある虫眼鏡ボタンを押すと、DOM インスペクタがオンになります。
ページの各エレメントにマウスカーソルを合わせると Coda はそれらをハイライトし、またウインドウの下に CSS の階層構造を表示します。
エレメントをクリックするとウインドウ下部の階層表記が固定されます。
X ボタンを押すと固定が解除され、また虫眼鏡ボタンをクリックすると DOM インスペクタがオフになります。
すばやくホームにジャンプ
最後のプレビューに関するテクニック: サイト設定から Web ページを編集している場合、サイトメニューにある "ホームページを表示" が便利です。これを選択するとダイレクトに設定されたルート URL にジャンプします。