Safariでウェブページのソースコード(HTML & CSS)を見る方法

Safariのアドレスバーに完全なURLを表示する方法

「Safariでウェブページのソースコードを見ようと思ったら、出来ない!!」

と思いきや、ちゃんと見る方法があったので、備忘録。

メニューバーに”開発”を表示させる

Safariは、なぜかデフォルトではメニューバーに”開発”が表示されていないので、まずそれを表示させます。

メニューバーの「Safari」>「環境設定…」をクリックします。↓Safari環境設定

次に、「詳細」タブを開き、最下部の「メニューバーに”開発”を表示」にチェックを入れます。↓メニューバーに開発を表示

メニューバーに”開発”が追加され、ページのソースを表示することができるようになります。

これで、準備完了です。

ページのソースを表示

それでは、ソースコードを見てみます。

任意のページで、メニューバーの「開発」>「ページのソースを表示」をクリック、↓ページのソースを表示

もしくは、右クリック>「ページのソースを表示」でも見れます。↓ページのソースを表示

ショートカットキーを使う場合は、『command + option + U』で見れます。

すると、ウィンドウが上下に分割され、下部にページのソースが表示されます。↓ページのソースを表示

別ウィンドウアイコンをクリックすると、↓別ウィンドウアイコンをクリック

こんな感じで別ウィンドウで表示され、広々と快適にみる事もできます。↓別ウィンドウで表示

あとがき

といった感じで、無事にSafariでウェブページのソースコードをチェックすることができたわけですが、要素の検証等に関しても、ちゃんと要所を押さえてあり、中々イイ感じでした。

というわけでもうちょっと弄ってみて、開発に役立てようかと思います。

  • このエントリーをはてなブックマークに追加

『naouniverse.com』では、管理人が気になるモノ・コト・セカイについて、つらつらと書いています。
ガジェット・カメラ・デザイン・プログラミング・L'Arc~en~Cielなどなど・・・