MacのSafariに「開発メニュー」を追加すれば要素の検証が可能に

1 min

これまで開発をする時は、Chromeの「検証」機能を利用してHTMLやスタイルシートを操作していました。

Macを使いはじめてからメインブラウザがSafariになったのですが、デフォルト状態ではChromeの「検証」に相当する機能が見当たらず……。

あれこれ探していると少し設定をするだけで同等のものが使えるようになりましたので、設定方法をご紹介します。

Safariの”開発”メニューを表示させる

  1. メニューから[Safari]->[環境設定]を選択。

  2. タブの[詳細]をクリック。

  3. [メニューバーに”開発”メニューを表示]にチェックを入れる。

    「保存」などのボタンはありませんので、そのまま閉じてしまいましょう。

以上の手順で開発メニューを表示することができました。

Safariの”開発”機能でできること

Safariの「開発」機能では、ChromeやFirefoxの開発ツールでできることは一通り使えるようになっています。

DOMやスタイルの操作をしたい時には[ページのソースを表示]などを選択すればいいですし、スマホやタブレットでのビューを確認したいなら[レスポンシブ・デザイン・モードにする]を選べば簡単に切り替えができます。

ショートカットを使えば様々な機能をダイレクトに使えますので、よく使う機能はショートカットを覚えておくと効率がグンと良くなりますよ。

Safariの”開発”で使えるショートカット一覧

機能ショートカット
レスポンシブ・デザイン・モード⌃⌘R
Webインスペクタを接続⌥⇧⌘I
JavaScriptコンソールを表示⌥⌘C
ページのソースを表示⌥⌘U
ページのリソースを表示⌥⌘A
タイムライン記録を開始⌥⇧⌘T
要素選択を開始⇧⌘C
キャッシュを空にする⌥⌘E

未経験からITエンジニアになりました!

今までは趣味としてプログラミングを独学してきたけど、やっぱりこれを仕事にしたい……!

そう思い立ったはいいものの、世間の情勢などもあり未経験でのエンジニア職の中途採用が絶望的な状況

大手転職エージェントを通して何社も面接を受けては落ちてを繰り返し、諦めかけていたのですが……。

気分転換で登録した転職サービスで、とある企業から内定をいただくことができました

同じように未経験からITエンジニアを目指している方へ、どんなに厳しくても可能性がゼロではないことを伝えたい。

ポイントは、IT業界に精通した転職サービスを利用すること。
これだけで少なくとも面接へ進める可能性がグッと高くなります。

あなたがもしIT特化の転職サービスに未登録で苦しんでいるなら、ぜひ利用してみてください。きっと可能性が広がりますよ!

\無料のIT系転職サービス/

/優良案件がたくさん\

関連記事
はるしか

はるしか

ゲーム・漫画・アニメ・クルマ・ガジェットなど多趣味な雑食系で、趣味でプログラミングをポチポチしてたら本業エンジニアになってしまった人。
動物占いは子鹿。
忘れっぽい自分へのメモ代わりの記事が多めです。

FOLLOW

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です