- Photoshopの最新便利機能!生成AIが自動で削除?! 画像に写り込んだ電線やケーブル、人物を自動で検出し、ワンクリックで削除する方法
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の豆知識]関連記事
- 【YouTube新機能】3分間のショート動画でタブが変わらない件やリーチについて
- Google Analytics(GA4)で時間帯別のアクセス状況を確認する方法
- Illustratorのパスから3Dデザインを作る!イラレで簡単3Dモデリング
- Google Chromeリーディングモードの使い方とその便利な機能を紹介
- Google Chromeでタブを整理!タブのグループ化機能の使い方ガイド
Service
Contact
インフォコネクトに相談してみませんか?
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。