読者の皆様こんにちは！今回はSafariを使ったJavaScriptのステップ実行について解説します。
「コードが思ったように動かない！」という経験は誰にでもありますよね。そんなとき、Safariの「Webインスペクタ」を使えば、コードを1行ずつ確認しながら原因を特定できます。
この記事では、デバッグ初心者の方でも分かりやすいように、設定方法からステップ実行の手順までを丁寧に説明します。さっそく始めてみましょう！
1. Safariでデバッグを始める前に
SafariでJavaScriptをデバッグするには、"開発メニュー"を有効化する必要があります。この設定をしておくことで、"Webインスペクタ"と呼ばれる便利なデバッグツールを使えるようになります。
開発メニューを有効化する手順
- Safariを起動します。
- メニューバーから"Safari"→"設定"を開きます。
- "詳細"タブをクリック。
- 一番下にある"Webデベロッパ用の機能を表示"にチェックを入れます。
これで準備完了！Safariのメニューバーに"開発"という項目が追加されているはずです。
2. SafariのWebインスペクタを使ってみよう
Safariには、Webページの構造や動作を調査できる"Webインスペクタ"というツールが搭載されています。このツールを使えば、JavaScriptのステップ実行も簡単にできます。
Webインスペクタを開く方法
- SafariでデバッグしたいWebページを開きます。
- メニューバーの"開発"→"Webインスペクタを表示"をクリックします。(ショートカットキーなら⌘⌥I)
Webインスペクタを開くと、画面下や右側にデバッグツールが表示されます。中でも、JavaScriptのステップ実行に使うのは"ソース"タブです。
3. ステップ実行をしてみよう
ここからは、実際にステップ実行をする手順を解説します。
手順1：JavaScriptコードを探す
- Webインスペクタの上部にある"ソース"タブをクリックします。
- 左側に現在のページで使われているファイルとフォルダが表示されており、その中の"スクリプト"を開くとJavaScriptファイルの一覧が表示されます。デバッグしたいファイルを選んで開きましょう。
手順2：ブレークポイントを設定する
- JavaScriptコードの止めたい行の行番号をクリックすると、ブレークポイントが設定されます。
- 設定したブレークポイントは、行番号の横に青いマークが表示されます。(設定により色は異なります。)
手順3：ステップ実行を開始する
- ページをリロード（⌘R）すると、設定したブレークポイントでコードが一時停止します。
- 画面上部にあるコントロールボタンを使って、ステップ実行を行います。主なボタンの機能は以下の通りです：
- ▶︎ 再開：次のブレークポイントまでコードを進める。
- → ステップオーバー：現在の行を実行して次の行へ進む。
- ↘︎ ステップイン：関数の内部に入り、詳細を確認する。
- ↗︎ ステップアウト：現在の関数から抜け出し、次の処理に進む。
4. Safariでのデバッグをもっと便利にするヒント
条件付きブレークポイントを活用しよう
特定の条件が満たされたときだけコードを停止させる「条件付きブレークポイント」が便利です。例えば、変数がある値になったときだけ停止したい場合などの設定を行うことができます。
条件を設定するには、ブレークポイントを右クリックして"イベントブレークポイントを編集"を選びます。
コンソールを活用しよう
ステップ実行中に"コンソール"タブを開くと、JavaScriptでコンソールに出力した変数の値を手動で確認できます。
<code>console.log(myVariable);<span style="background-color: initial; color: inherit; font-family: inherit; font-size: inherit;"></span>コードの挙動が気になるときは、コンソールで試しながらデバッグを進めるのがおすすめです。
5. Safariでのデバッグの注意点
ミニファイされたコードに注意
多くのWebサイトでは、JavaScriptが「ミニファイ（圧縮）」されていることがあります。この場合、コードが読みにくくなるため、可能であれば開発用の元ファイルをデバッグするのが理想です。
仕様によっては読み込むファイルをミニファイされていない物に切り替えるだけで通常ファイルに切り替えられる場合もあるため、ぜひ確認してみてください。
キャッシュを無効化しよう
Safariはキャッシュを使ってWebページを高速に表示しますが、これが原因で最新のコードが反映されないことがあります。Webインスペクタの"ネットワーク"タブでキャッシュを無効化しておくと安心です。
最後に
Safariの「Webインスペクタ」を使えば、JavaScriptコードの動作を詳細に確認でき、エラーの原因を素早く特定できます。初心者でも簡単に使えるので、ぜひ活用してみてください。
