本記事では、WebアプリケーションやWebサイト制作で必須の検証ツール・開発者ツールをMacで開く方法について解説しています。
【月額980円で読み放題!】
Amazon Kindle Unlimited
Amazon Kindle Unlimited
![](https://web-engineer-wiki.com/wp-content/uploads/2023/02/amazon-kindle-1024x474.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
環境設定の変更
Windowsでは、設定をせずにF12キーや右クリック→検証で開くことが出来ますがMacでは設定が必要になります。
![環境設定を開く](https://web-engineer-wiki.com/wp-content/uploads/2023/06/0bb8c761e4d591a742b532bfac286771.png)
![環境設定を開く](https://web-engineer-wiki.com/wp-content/uploads/2023/06/0bb8c761e4d591a742b532bfac286771.png)
Macでブラウザを立ち上げ画面左上に表示される「Safari」にカーソルを合わせ、環境設定をクリックします。
![環境設定→詳細画面](https://web-engineer-wiki.com/wp-content/uploads/2023/06/0596441cd8a9b72ea78ab9d97d490dee-1024x526.jpg)
![環境設定→詳細画面](https://web-engineer-wiki.com/wp-content/uploads/2023/06/0596441cd8a9b72ea78ab9d97d490dee-1024x526.jpg)
詳細画面が表示されるので、「詳細」を選択し下部の「メニューバーに”開発”メニューを表示」にチェックを入れ閉じます。
これで準備が整いました。「command」+「option」+「i」キーを3つ同時押しします。すると、検証ツール・開発者ツールが開けるようになります。
![検証ツール・開発者ツール](https://web-engineer-wiki.com/wp-content/uploads/2023/06/f26e9aee0ba4c55620a790122b74e0cd-1024x356.jpg)
![検証ツール・開発者ツール](https://web-engineer-wiki.com/wp-content/uploads/2023/06/f26e9aee0ba4c55620a790122b74e0cd-1024x356.jpg)