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

パソコン

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で文字を書く時によく使っているアプリがテキストエディットです。テ…

  2. Macの複合キーを有効

    パソコン

    Macの複合キーを有効にしてショートカットなどを使いやすくする

    Macの複合キーの有効化が地味に便利だったのでご紹介します。システム環…

  3. パソコン

    Bywordでフルスクリーンにするためのショートカットキー

    ここ最近BywordというMacアプリでブログを書いています。Mark…

  4. パソコン

    Macのメールアプリ「Airmail 2.0」を使ってみた!アカウントの設定など

    ここ最近自分のMacで使うアプリやサービスを色々と見直しているわけなの…

  5. MemoZou

    パソコン

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

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

  6. パソコン

    iPhotoの画像データの保存先フォルダの場所

    Macの画像管理アプリ「iPhoto」を使っていてちょっと気になったん…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP