Topics インフォコネクト最新情報

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

iPhone・iPad・Macの豆知識

この記事は公開から1年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。

今回の豆知識では、Mac SafariでGoogle Chromeのように開発者ツールデベロッパーツール)を利用する手順についてご紹介したいと思います。

メニューバーの確認と開発メニューの表示

Mac Safariで開発者ツールを表示するには、メニューバーの開発メニューから選択するのですが、この開発メニューがデフォルトでは表示されていないため、開発メニューの表示から進める必要があります。

①メニューバーに[開発]メニューが表示されているか確認します。
※開発メニューが表示されている場合は事項に進んでください

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

②開発メニューが表示されていない場合は、左上の[Safari]→[環境設定]→[詳細]と進み、「メニューバーに“開発”メニューを表示」項目にチェックを入れます。

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

③チェックを入れると、メニューバーに開発メニューが表示されました。

Mac Safariで開発者ツール(デベロッパーツール)の表示方法


Safariの開発者ツールを表示

開発メニューが表示されていれば、開発者ツールを表示できます。

④メニューバー[開発]→「Webインスペクタを表示」をクリックします。

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

⑤Safariの開発者ツールが表示されました。

Mac Safariで開発者ツール(デベロッパーツール)の表示方法


その他の方法

上記で紹介した方法では毎回表示させるのに面倒なので、もう少し簡単な方法もご紹介しますね。

ショートカットで表示する方法

ショートカットキー『Option + Command + I』で表示可能です。

右クリックで表示する方法

Safariのブラウザ上で右クリックして[要素の詳細を表示]をクリックすると表示されます。

Mac Safariで開発者ツール(デベロッパーツール)の表示方法

このように、ショートカットキーや右クリックdeの表示は簡単なのですが、どちらもメニューバーに開発メニューが表示されていなければ実行されないので注意が必要です。
 

あとがき

Mac Safariではデフォルトで開発者ツールを利用できない仕様になっているため、Chromeのようなデベロッパーツールが存在しないと勘違いされているユーザーも多いようです。

弊社でもMacで開発しているスタッフも多く、当然Safariでのチェックも行なっていますので開発者ツールは必須となっています。

デザイナー・クリエイター志向の強いMacだからこそ、その機能を存分に使いこなせるようになると嬉しいですよね!ご存じなかった方はぜひ確認してみてください。
 

Webの豆知識]関連記事

Service

Contact

インフォコネクトに相談してみませんか?

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください