aboutsummaryrefslogtreecommitdiff
path: root/files/ja/tools/debugger/index.html
blob: bb317e2874f97d9e4e6c92acb7f537a2ca838f3c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
---
title: デバッガー
slug: Tools/Debugger
tags:
  - Debugger
  - Debugging
  - Dev Tools
  - Tools
  - 'l10n:priority'
  - ツール
  - デバッガー
  - デバッグ
  - 開発ツール
translation_of: Tools/Debugger
---
<div>{{ToolsSidebar}}</div>

<div>JavaScriptデバッガを使用すると、JavaScriptコードをステップ実行してその状態を調べたり変更したりして、バグを追跡することができます。</div>

<div class="note">
<p>このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。</p>

<p>これより前のバージョンの Firefox や Firefox Beta および Release については、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p>

<p>このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に <code>false</code> を設定してください。</p>
</div>

<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>

<p>JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。</p>

<p>Firefox でローカル実行しているコードや、例えば Android 版 Firefox が動作する Android デバイスなどのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、<a href="/ja/docs/Tools/Remote_Debugging">リモートデバッグ</a> のページをご覧ください。</p>

<p>デバッガーは Firefox に内蔵して提供しており、本ページでは Firefox に埋め込まれているデバッガーの使用方法を説明します。一方、デバッガーはスタンドアローンのウェブアプリケーションとして使用することもでき、他のブラウザーや Node で実行しているコードをデバッグできます。詳しくは <a href="https://github.com/devtools-html/debugger.html">プロジェクトの GitHub リポジトリー</a> をご覧ください。</p>

<p>新しいデバッガーは、旧デバッガーの一部機能を (まだ) サポートしていません。<a href="/ja/docs/Tools/Debugger/Limitations_of_the_new_debugger">新しいデバッガーの制限事項</a> をご覧ください。</p>

<hr>
<h2 id="User_Interface_Tour" name="User_Interface_Tour">ユーザーインターフェイスツアー</h2>

<p>デバッガーについてひととおり理解するために、<a href="/ja/docs/Tools/Debugger/UI_Tour">UI のクイックツアー</a> を用意しました。</p>

<hr>
<h2 id="How_to" name="How_to">使い方</h2>

<p>デバッガーで何ができるかを知るために、以下のガイドをご覧ください:</p>

<div class="twocolumns">
<ul>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Open_the_debugger">デバッガーを開く</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_breakpoint">ブレークポイントを設置する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">条件付きブレークポイントを設置する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Disable_breakpoints">ブレークポイントの無効化</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Step_through_code">コードをステップ実行する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Breaking_on_exceptions">例外でブレークする</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Set_Watch_Expressions">監視式を設定する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">圧縮されたファイルを整形表示する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Search">検索する</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval ソースをデバッグする</a></li>
 <li><a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップを使用する</a></li>
</ul>
</div>

<hr>
<h2 id="Reference" name="Reference">リファレンス</h2>

<div class="twocolumns">
<ul>
 <li><a href="/ja/docs/Tools/Debugger/Keyboard_shortcuts">キーボードショートカット</a></li>
 <li><a href="/ja/docs/Tools/Debugger/Source_map_errors">ソースマップのエラー</a></li>
</ul>
</div>