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

パソコン

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. Clipy

    パソコン

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

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

  2. 設定の開き方

    パソコン

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

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

  3. パソコン

    MacのSafariでリンク済みテキストの色を元に戻すやり方

    ちょっと気になったのでメモしておきます。MacのSafariでリンクを…

  4. パソコン

    Macの定番ランチャーアプリ「Alfred」を使ってみた

    今さらながらMacの定番ランチャーアプリ「Alfred」を使ってみまし…

  5. 「/(スラッシュ)」を「・(中黒)」に変更

    パソコン

    Macで「/(スラッシュ)」を「・(中黒)」に変更する設定方法

    Macでキーボード入力しているときに全角の状態で「/」キーを押すと「/…

  6. Macアプリのアンインストール

    パソコン

    MacでApp Storeからインストールしたアプリをデフォルト機能でアンインストールするやり方

    MacでApp Storeからインストールしたアプリをデフォルト機能で…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP