デベロッパーツールの表示方法

パソコン

MacのSafariでデベロッパーツール(Webインスペクタなど)を表示する方法

普段はChromeをメインブラウザにしているんですが、ここ最近はSafariもよく使うようになってきました。そんな時にSafariでもWebインスペクタやソースコードを表示したいと思ったんですが、表示方法がイマイチ分かりづらい印象だったのでメモがてらご紹介します。

Safariの環境設定から開発メニューを表示

デベロッパーツールを表示させるやり方はSafariの環境設定から可能です。

上部メニューから「Safari」→「環境設定…」を開きます。ショートカットキー「command + ,」でも開くことができます。

Safariの環境設定を開く

続いてタブメニューから「詳細」を選択して、下にある「メニューバーに”開発”メニューを表示」にチェックを入れます。

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

すると、先ほどまで上部メニューになかった「開発」が表示されるようになりました。

開発

あとは開発メニューからWebインスペクタを表示させたりすることができます。WebインスペクタのショートカットキーはChromeと同じで「command + option + I」になります。

そんなわけで、SafariでもChromeみたいにデベロッパーツールを使いたいという方は、普段から開発メニューを表示させておくのがよさそうです。

JQuery lightSlider軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」前のページ

自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」次のページPongstagr.am

関連記事

  1. Macのテキストエディットで文字数カウント

    パソコン

    Macのテキストエディットで文字数カウントを実行させる設定方法(AppleScript)

    Macのテキストエディットで文章を書いている時に文字数を教えてしてほし…

  2. Clipy

    パソコン

    スニペットも登録できるMacの人気クリップボードアプリ「Clipy」

    Macのクリップボードアプリ「Clipy」をインストールしてみました。…

  3. パソコン

    Macで現在起動中のアプリをワンクリックで全て終了させるアプリ「QaLL」

    これはとても便利ですね。Macで現在起動中のアプリをボタン一つで全て終…

  4. パソコン

    MacのEvernoteで複数のノートを指定したノートブックに移動させるやり方

    Mac版のEvernoteで複数のノートを選択して自分が指定したノート…

  5. 設定の開き方

    パソコン

    Macのメモリ解放ソフト「Memory Clean」を使ってみた

    Macのメモリが不足した時なんかに活躍してくれるメモリ解放ソフト「Me…

  6. MemoZou

    パソコン

    画面にペタペタ付箋でメモれてEvernoteにも連携できるMacアプリ「MemoZou」

    MemoZouというMacアプリを使ってみました。画面にペタペタ付箋を…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP