好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

MacでのSafariの開発者ツール(Webインスペクタ)の使い方

WindowsIEだとF12キーを押すと出てくる開発者ツール。
あれをMacSafariだとどう出すのか調べました。

目次

Safariの開発メニューを表示するように設定する

Safariの環境設定を開く。
f:id:Sukinakoto:20170816141600p:plain

「メニューバーに"開発"メニューを表示」にチェックを入れて、環境設定ウィンドウを閉じる。
f:id:Sukinakoto:20170816141801p:plain

Webインスペクタを開く

Webインスペクタで見たい画面をSafariで開きます。
今回は、自端末に保存したhtmlファイルを選びました。
f:id:Sukinakoto:20170816150842p:plain

Safariの"開発"メニューから「Webインスペクタを接続」をクリック。
f:id:Sukinakoto:20170816151130p:plain

Webインスペクタが開きました。
f:id:Sukinakoto:20170816152216p:plain

WebインスペクタでJavaScriptデバッグする

リソースタブを開き、左側のサイドバーでjsファイルを選びます。
f:id:Sukinakoto:20170816180707p:plain

デバッグしたい行をクリックしてブレークポイントを設定します。
f:id:Sukinakoto:20170816151227p:plain

Webページをリロードするなどしてブレークポイントを置いた関数を実行すると、Webインスペクタは自動的にデバッガタブを開きます。
f:id:Sukinakoto:20170816151246p:plain

右端のサイドバーボタンをクリックすると、
f:id:Sukinakoto:20170816151323p:plain
変数の値を確認できます。
f:id:Sukinakoto:20170816151416p:plain

 参考サイト

d.hatena.ne.jp