SafariのWebインスペクタでJavaScriptをデバッグする方法

はじめに

Apple社のWebブラウザSafariにはWebインスペクタという開発者向けツールが標準で搭載されており、このツールを使うとJavaScriptをデバッグすることができるようになります。今日はこのWebインスペクタの使い方を少しご紹介したいと思います。

スクリーンショットはMacのものですが、Windows版Safariでもほとんど同じような手順でデバッグすることができると思います。

開発メニューを有効化する

Webインスペクタを利用するには、はじめに開発メニューを有効化する必要があります。

環境設定から詳細タブを選択し、「メニューバーに開発メニューを表示」にチェックを入れます。

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

開発メニューが有効になったら、続いてWebインスペクタでJavaScriptをデバッグする方法を説明します。
1.デバッグしたいページをSafariで表示します。
2.開発メニューからWebインスペクタを選択します。
3.Webインスペクタの起動時には、以下のような画面が表示されるので、「このセッションでのみ有効」か「常に有効」のどちらかを選択し、「デバッグを有効にする」ボタンをクリックします。

4.スクリプトタブを選択します。
5.スクリプトの実行をストップさせたい箇所の行番号をクリックして、ブレークポイントを設定します。

6.この状態でページをリロードすると、デバッグが開始されます。