Safariで閲覧サイトのソースコードはどうしたら見られるの？

Safariでは表示サイトのソースコードを見ることができないと思ってました。IEやFirefoxにはタグメニューの「表示」や右クリックで「ソース（C）」が現れてソースコードを簡単に見ることができます。でもSafariにはそれらしきメニューが見つかりません。たまたまネットサーフィン（死語？）していて見つけました、Safariで閲覧サイトのソースコードを見る方法。当然といえば当然ですが、やっぱりあったんですね、Safariにもソースコードを見る方法。HTMLのソースコードやイメージ画像だけじゃなく、スタイルシートやスクリプトのコードまで見れちゃう強力な開発支援ツールが隠れてたんですね。これはかなりの優れものです。

1. 「環境設定」をクリック
Safariを起動してタグメニューの「Safari」をクリックすると、プルダウンメニューの中に「環境設定」が表示されます。「環境設定」をクリックします。





2. 「詳細」ボタンをクリック
「環境設定」の画面が表示されたらタグメニューの「詳細」をクリックします。





3. 「メニューバーに”開発”メニューを表示」にチェック
「詳細」設定画面が表示されたら、「メニューバーに”開発”メニューを表示」にチェックを入れます。これで晴れてあなたもSafariで閲覧サイトのソースコードが見られるようになりました。試しにSafariで適当なサイトを開いてみましょう。





4. 「ページのソースを表示」をクリック
Safariのタグメニューを見ると、先ほどまでは無かった｢開発｣というメニューが新たに加わっていることが確認できます。その「開発」メニューの中に「ページのソースを表示」があるのでクリックしてみましょう。ちなみに閲覧サイトをアクティブ表示している状態で右クリック（control＋クリック）するとメニュー表示されます。また、ショートカットキー「command＋option＋U」だと直接ソースコード画面が表示されます（別ウインドウ表示）。





5. ブラウザの下部にソースコード
「ページのソースを表示」をクリックするとアクティブブラウザの下部に表示サイトのソースコードが表示されます。




ソースコード表示画面（Webインスペクタ）の左上に「別のウインドウに切り離す」ボタンがあるので、それをクリックすると別ウインドウ表示になります。




下の画像は別ウインドウでの表示画面です。





6. こりゃすごい!!
Webインスペクタ画面の右側にあるフォルダの中を見てびっくり！イメージ画像をはじめ、スクリプトやスタイルシート、フレームの中まで全部丸見えです。


イメージ画像を表示




スタイルシートを表示


他のブラウザ、例えばFirefoxでも画像の一覧を見ることができたりするのは知っていましたが、スクリプトやスタイルシートの中身まで見えてしまうというのには驚かされました。 これって自分のサイトの開発にむちゃくちゃ役に立っちゃいますよね。CSSがどうなっているのかとかの要素の確認やらしながら、自分のサイトのコーディングに役立てることが出来るわけですから…。CSSの値を変え足りすると即ブラウザに反映させることが出来るようです。コーディングをする際に使える機能ですね。 「開発」というメニュー・タイトルは伊達じゃないってことですね。本当にウェブ開発環境の強力な助っ人って言えますよね。この機能を使うとサイト開発のネタにはきっと困らなくなりますね。

News Source Site

• Safariでウェブページのソースコードを見る方法。（HTML ＆ CSS）　－ 和洋風