こんにちは。國府です。
はじめに
この記事では、Safariに標準搭載されている「開発ツール」を使って、JavaScriptのデバッグを効率的に行う方法をわかりやすく解説します。ChromeやFirefoxのDevToolsは有名ですが、MacユーザーならSafariでも十分に高度なデバッグが可能です。
目次
目次
- 開発ツールを有効にする方法
- 開発ツールの基本構成
- Consoleを使った簡易デバッグ
- Sourcesタブでブレークポイントを設定
- 変数の確認方法（スコープ・ウォッチ式）
- ネットワーク通信の確認方法
- イベントリスナーのデバッグ
- デバッガの便利機能（条件付きブレークポイント/ログポイント）
- モバイルSafariのデバッグ方法（iPhone/iPad）
- まとめ
1. 開発ツールを有効にする方法
Safariの開発ツールは、初期設定では無効になっています。以下の手順で有効にしましょう。
- Safariを開く
- メニューから
Safari > 設定を選択 詳細タブを開く- 「メニューバーに“開発”メニューを表示」にチェック
これでSafariのメニューバーに「開発」という項目が表示され、開発ツールが使えるようになります。
2. 開発ツールの基本構成
Webページ上で右クリック → “要素の詳細を表示” または ⌥⌘I で開発ツールを起動できます。主なパネルは以下の通りです：
| パネル名 | 役割 |
|---|---|
| Elements | HTML/CSSの確認と編集 |
| Console | JavaScriptのログやエラー表示、コード実行 |
| Sources | JavaScriptファイルのデバッグ |
| Network | 通信状況の確認 |
| Storage | Cookie/LocalStorageの確認 |
| Timelines | パフォーマンス解析 |
次章ではJavaScriptデバッグの中心となるConsoleとSourcesパネルを中心に解説します。
3. Consoleを使った簡易デバッグ
JavaScriptのデバッグを始める時、まず使うのがConsoleです。console.log() で値を確認したり、エラーの原因を探したりできます。
Consoleの開き方
開発ツールを開いた状態で、上のタブから Console をクリックするだけです。
よく使うConsoleコマンド
console.log(‘デバッグ用のログ表示’);
console.error(‘エラーの表示’);
console.table([{id:1,name:’Alice’},{id:2,name:’Bob’}]);
特に console.table() は配列やオブジェクトを表形式で表示できるので便利です。
4. Sourcesタブでブレークポイントを設定
本格的にデバッグしたいなら、console.log() だけじゃ限界があります。そこで使うのが ブレークポイント。コードの任意の行で処理を一時停止して、中の状態を確認できます。
ブレークポイントの設定方法
- 開発ツールの Sources タブを開く
- 左側に読み込まれたJavaScriptファイル一覧が出る
- 止めたい行番号をクリック
青いマーカーがつけばブレークポイントが設定されています。
デバッガ操作ボタンの説明
| ボタン | 動作 |
| ▶️ 再開 | 一時停止から再開 |
| ⏭ Step over | 次の行に進む（関数の中には入らない） |
| ⏬ Step into | 関数の中に入る |
| ⏫ Step out | 関数から抜ける |
5. 変数の確認方法（スコープ・ウォッチ式）
ブレークポイントで一時停止すると、画面右側に変数の状態が表示されます。ここで実行中の関数の状態を詳しく追いながらデバッグできます。
変数の確認パネル
一時停止中に右側に表示される内容は次の通りです：
| エリア | 概要 |
| Call Stack | 現在の関数呼び出しの履歴 |
| Scope Variables | ローカル変数・クロージャ変数・グローバル変数 |
| Watch Expressions | 監視したい式や変数を手動で追加 |
特に Watch Expressions は便利で、追いかけたい変数名（例: user.id）を登録しておくと常に値が追えるようになります。
6. ネットワーク通信の確認方法
AjaxのエラーやAPIレスポンスのチェックもSafariの開発ツールで確認できます。
Networkタブの使い方
- 開発ツールで Network タブを開く
- ページをリロードすると通信の一覧が表示される
- 任意の通信をクリックすると詳細を確認できる
確認できる項目
| 項目 | 説明 |
| Headers | 通信のヘッダー情報（URL、メソッド、ステータス） |
| Preview | JSONレスポンスのプレビュー |
| Response | APIの生データ |
| Timing | 通信の速度情報 |
重要なのは 失敗したリクエストが赤色で表示される 点です。CORSエラーや404/500トラブルもここで発見できます。
7. イベントリスナーのデバッグ
クリックイベントやマウス操作、フォーム送信などのイベントが正しく動かないときは、Safariの開発ツールでイベントリスナーを確認できます。
イベントリスナーを確認する方法
- Elementsタブを開く
- 対象のHTML要素をクリック
- 右側パネルの Event Listeners を展開
ここに、その要素に紐付いたイベント（click、change、submit など）が表示され、クリックするとコードの設置場所を確認できます。
実践例
ボタンにイベントが効かない場合：
- そもそもイベントが追加されていなかった
- JavaScriptの読み込み順が間違っていた
- stopPropagation() が影響していた
このような原因を簡単に特定できるため、DOMイベントのトラブルにはかなり有効です。
8. デバッガの便利機能（条件付きブレークポイント / ログポイント）
デバッグ効率を上げるなら、普通のブレークポイントだけじゃなく 条件付きブレークポイント と ログポイント も活用しましょう。
条件付きブレークポイント
ループ内などで、特定の条件のときだけ停止したいケースに使います。
設定方法
- ブレークポイントを右クリック
- Edit Breakpoint を選択
- 例:
i === 10のように条件を書く
ログポイント（Logpoint）
処理を止めずにログだけ出したい場合に使える機能。
設定方法
- 行番号を右クリック
- Add Logpoint を選択
- ログさせたい内容を入力（例:
user.id）
これは console.log() をいちいち書かなくても済むので、コードを汚さずに調査できます。
9. モバイルSafariのデバッグ（iPhone/iPad）
スマホ表示の不具合を調べたいときは、iPhone実機を使ったデバッグが便利です。Safariの開発ツールはMacとiPhoneをUSB接続すれば、スマホの中身をそのまま確認できます。
実機デバッグの手順
- iPhoneをUSBケーブルでMacに接続
- iPhoneで
設定 > Safari > 詳細 > Webインスペクタをオン - MacでSafariを開き、メニューバーの 開発 をクリック
- 接続中のiPhone名が表示されるので選択
これで、iPhoneで開いているWebページのHTML/CSS/JavaScriptをMacから確認・デバッグできるようになります。
✅ ポイント 実機でしか再現しないバグ（特にiOS特有の挙動やCSS問題）を調査できるのがメリットです。
10. まとめ
Safariの開発ツールはChrome DevToolsより情報が少ないですが、実はデバッグ機能はかなり充実しています。特にApple製デバイスでWeb開発をするなら、Safariのデバッガは必須です。
本記事で紹介した機能まとめ
- Consoleでログ確認と軽い検証
- Sourcesでブレークポイントを使った本格デバッグ
- Scope/Watchで変数の状態を確認
- NetworkでAPI通信を調査
- Event Listenersでイベントの発火確認
- 条件付きブレーク・ログポイントで効率アップ
- iPhone実機デバッグにも対応
この記事があなたのSafariデバッグの助けになれば嬉しいです。