MacでのSafariの開発者ツール(Webインスペクタ)の使い方
WindowsのIEだとF12キーを押すと出てくる開発者ツール。
あれをMacのSafariだとどう出すのか調べました。
目次
Safariの開発メニューを表示するように設定する
Safariの環境設定を開く。
「メニューバーに"開発"メニューを表示」にチェックを入れて、環境設定ウィンドウを閉じる。
Webインスペクタを開く
Webインスペクタで見たい画面をSafariで開きます。
今回は、自端末に保存したhtmlファイルを選びました。
Safariの"開発"メニューから「Webインスペクタを接続」をクリック。
Webインスペクタが開きました。
WebインスペクタでJavaScriptをデバッグする
リソースタブを開き、左側のサイドバーでjsファイルを選びます。
デバッグしたい行をクリックしてブレークポイントを設定します。
Webページをリロードするなどしてブレークポイントを置いた関数を実行すると、Webインスペクタは自動的にデバッガタブを開きます。
右端のサイドバーボタンをクリックすると、
変数の値を確認できます。