Macで要素の検証のやり方を調べると、「ショートカットキーを使う」と出てきます。
でもまったく無反応 ｡°(°´ω`°)°｡シクシク
ちゃんと［option + command + I ］を押してるのに何も起きない。
と、何日も悩んでやっと解決できたのでシェアします。
5分もかからずに解決しますよ！
使用機種は
MacBook Air M1
ですが、Mac (Safari) なら同じ方法で解決できると思います。
ショートカットキーで検証が出てこない
ググってもひたすら、
F12を押す
とか、
option + command + I を押す
しか出てきません。
他には
Chromeで検証を出す方法
とか。
私はSafariを使ってるので、Safariでの出し方を知りたい。
F12押したら音量上がるし。
［option + command + I ］押しても、うんもすんも言わないし。
どうにかファンクションキーを有効にさせようとして、
- SHIFT + F12
- control + F12
- option + F12
- command + F12
- fn + F12
と、ひたすら試しても音量上がるだけ。いつの間にか音量MAX。
そもそも要素の検証の仕方を調べる人も少ないのか、みんなすんなり成功しているのか、検索かけてもピンポイントで欲しい答えが出てこない。
何時間もひたすらググって探したら、
環境設定から開発
という言葉が出てきたけど、私のPCに「環境設定」というコマンドがない。
手詰まり ﾟ(ﾟ`ω´ ﾟ)ﾟびえーん
と思ったけど、悔しいので片っ端から試したら、やっとうまくいきました！
検証ができなかった理由
開発機能がオフになっていたから。
デフォルトではこの機能はオフになっているのかもしれません。
あんまり要素の検証する人いないですよね。
なのでこの『開発』という機能をメニューバーに追加してあげれば表示されるようになるのです。
Mac (Safari)での検証の出し方
ではわかりやすく説明していきます。
メニューバーに開発を追加する方法
画面左上の『Safari』をクリックします。
するとこんなコマンドが出てきます。
このコマンドの『設定…』がどこかのサイトで見かけた『環境設定』というものです。
これをクリックします。
するとこんなコマンド画面が出てくるので『詳細』のページをクリックし、
一番下にある『Webデベロッパ用の機能を表示』にチェックを入れます。
デベロッパは、”開発という意味です
チェックが入ると、上のメニューバー(青いところ)に開発が追加されました！
これで要素の検証ができるようになりました。
要素の検証の出し方
デベロッパ機能が使えるようになったので、ショートカットキーでも呼び出せるようになりました。
検証したい画面を表示して、［option + command + I ］を押すと検証の画面が出てきます。
メニューバーからも出せます。
『開発』のコマンドにある『Webインスペクタを接続』をクリックすると要素の検証ができます。
F12でSafariの検証は呼び出せない
なぜかF12のファンクションキーを有効にしても、Safariの要素の検証は呼び出せませんでした。
Chromeは呼び出せます。(一応インストールしてるので試したらできました)
ファンクションキーは音量調節に使いたいので、私は使えなくても問題ないのですが、
もしMacでChromeを使っていて、F12を通常のファンクションキーとして使いたい場合は、
Safariのコマンドのサービスから『サービス設定…』をクリックします。
サービスのコマンド画面が出てくると思うので、『ファンクションキー』をクリックします。
ファンクションキーのページが呼び出したら、
『F1, F2などのキーを標準のファンクションキーとして使用』のスイッチを有効(青)にして、完了を押します。
これでファンクションキーを通常の状態で使えます。
まとめ
［option + command + I ］で検証できない場合は、『開発』を有効にする。
もしサファリでもF12が使えるようになったら、こちらでお知らせしますね。
そして私はこんなに何日も悩んで、やっと呼び出せるようになった要素の検証は結局使いませんでした｡°(°´ω`°)°｡
というか検証しても解決方法がわかりませんでした。もっとコードの勉強しなきゃ…
どうぞみなさんは解決できますように。
