- 画像生成AIの進化！Adobefireflyの最新機能「構成参照」とは？
Topics
インフォコネクト最新情報
Mac Safariで開発者ツール（デベロッパーツール）の表示方法
Mac Safariで開発者ツール（デベロッパーツール）の表示方法
この記事は公開から1年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
今回の豆知識では、Mac SafariでGoogle Chromeのように開発者ツール（デベロッパーツール）を利用する手順についてご紹介したいと思います。
- \\ 目 次 //
- メニューバーの確認と開発メニューの表示
- Safariの開発者ツールを表示
- その他の方法
- あとがき
メニューバーの確認と開発メニューの表示
Mac Safariで開発者ツールを表示するには、メニューバーの開発メニューから選択するのですが、この開発メニューがデフォルトでは表示されていないため、開発メニューの表示から進める必要があります。
①メニューバーに［開発］メニューが表示されているか確認します。
※開発メニューが表示されている場合は事項に進んでください。
②開発メニューが表示されていない場合は、左上の［Safari］→［環境設定］→［詳細］と進み、「メニューバーに“開発”メニューを表示」項目にチェックを入れます。
③チェックを入れると、メニューバーに開発メニューが表示されました。
Safariの開発者ツールを表示
開発メニューが表示されていれば、開発者ツールを表示できます。
④メニューバー［開発］→「Webインスペクタを表示」をクリックします。
⑤Safariの開発者ツールが表示されました。
その他の方法
上記で紹介した方法では毎回表示させるのに面倒なので、もう少し簡単な方法もご紹介しますね。
ショートカットで表示する方法
ショートカットキー『Option + Command + I』で表示可能です。
右クリックで表示する方法
Safariのブラウザ上で右クリックして［要素の詳細を表示］をクリックすると表示されます。
このように、ショートカットキーや右クリックdeの表示は簡単なのですが、どちらもメニューバーに開発メニューが表示されていなければ実行されないので注意が必要です。
あとがき
Mac Safariではデフォルトで開発者ツールを利用できない仕様になっているため、Chromeのようなデベロッパーツールが存在しないと勘違いされているユーザーも多いようです。
弊社でもMacで開発しているスタッフも多く、当然Safariでのチェックも行なっていますので開発者ツールは必須となっています。
デザイナー・クリエイター志向の強いMacだからこそ、その機能を存分に使いこなせるようになると嬉しいですよね！ご存じなかった方はぜひ確認してみてください。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。