blob: ba248e01fc969fbdd77516a876fd0b26b0a35b08 (
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
---
title: 開発ツール
slug: Tools
tags:
- Developing Mozilla
- Guide
- Tools
- Web Development
- 'Web Development:Tools'
- 'l10n:priority'
- ツール
- 開発ツール
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<p class="summary">デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。</p>
<div class="column-container">
<p>Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。</p>
サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (<a href="https://developer.mozilla.org/ja/docs/Tools#Join_the_Developer_tools_community">ページ最下部のコミュニティリンク</a>をご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、<a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> が投書するのに良いサイトです。<br>
<div class="note">
<p><strong>注記</strong>: もしウェブ開発や開発ツールの使用について初心者ならば、<a href="https://developer.mozilla.org/ja/docs/Learn">ウェブ開発を学ぶ</a> が役に立つでしょう — 良いスタートラインとして <a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> と <a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは？</a> をご覧ください。</p>
</div>
</div>
<h2 id="The_Core_Tools" name="The_Core_Tools">主要ツール</h2>
<p>Windows と Linux では <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 、OS X では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
<table class="standard-table" style="height: 178px; width: 840px;">
<tbody>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
<td>このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
<td>
<p>現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(<strong>注意:</strong> この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。)</p>
</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
<td>レスポンシブデザインモードに切り替えます。</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
<td>
<p>分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。</p>
</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
<td>開発ツールを閉じます。</td>
</tr>
</tbody>
</table>
<div class="column-container">
<div class="column-half">
<h3 id="Page_Inspector" name="Page_Inspector">ページインスペクター</h3>
<p><a href="/ja/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。</div>
<div class="column-half">
<h3 id="Web_Console" name="Web_Console">ウェブコンソール</h3>
<p><a href="/ja/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとやり取りします。</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="JavaScript_Debugger" name="JavaScript_Debugger">JavaScript デバッガー</h3>
<p><a href="/ja/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。</p>
</div>
<div class="column-half">
<h3 id="Network_Monitor" name="Network_Monitor">ネットワークモニター</h3>
<p><a href="/ja/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
ページを読み込むときに実施したネットワークリクエストを確認します。</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Performance_Tools" name="Performance_Tools">パフォーマンスツール</h3>
<p><a href="/ja/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。</div>
<div class="column-half">
<h3 id="Responsive_Design_Mode" name="Responsive_Design_Mode">レスポンシブデザインモード</h3>
<p><a href="/ja/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。</p>
</div>
</div>
<div class="note">
<p><strong>注</strong>: 開発ツールの入っている UI の総称は<a href="https://developer.mozilla.org/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Accessibility_inspector" name="Accessibility_inspector">アクセシビリティインスペクタ</h3>
</div>
</div>
<div class="column-container">
<div class="column-half">
<p><a href="/ja/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>ページのアクセシビリティツリーにアクセスする手段を提供し、欠落しているものや注意が必要なものを確認することができます。</p>
</div>
</div>
<div class="note">
<p><strong>メモ</strong>: DevTools がすべてその中にある UI の総称は、<a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a>です。</p>
</div>
<h2 id="More_Tools" name="More_Tools">その他のツール</h2>
<p>これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。</p>
<div class="twocolumns">
<dl>
<dt><a href="/ja/docs/Tools/Memory">メモリー</a></dt>
<dd>どのオブジェクトがメモリーを使用し続けているかを明らかにします。</dd>
<dt><a href="/ja/docs/Tools/Storage_Inspector">ストレージインスペクター</a></dt>
<dd>ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。</dd>
<dt><a href="/ja/docs/Tools/DOM_Property_Viewer">DOM プロパティビューアー</a></dt>
<dd>ページの DOM 属性や関数などを調査します。</dd>
<dt><a href="/ja/docs/Tools/GCLI">開発ツールバー</a></dt>
<dd>開発ツール用のコマンドラインインターフェイスです。</dd>
<dt><a href="https://developer.mozilla.org/ja/docs/Tools/Accessibility_inspector">アクセシビリティインスペクター</a></dt>
<dd>ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。</dd>
<dt><a href="/ja/docs/Tools/Eyedropper">スポイト</a></dt>
<dd>ページ内の色を選択します。</dd>
<dt><a href="/ja/docs/Tools/Scratchpad">スクラッチパッド</a></dt>
<dd>JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。</dd>
<dt><a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a></dt>
<dd>現在表示しているページの CSS スタイルの閲覧や編集を行います。</dd>
<dt><a href="/ja/docs/Tools/Shader_Editor">シェーダーエディター</a></dt>
<dd><a href="/ja/docs/Web/WebGL">WebGL</a> で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。</dd>
<dt><a href="/ja/docs/Tools/Web_Audio_Editor">Web Audio エディター</a></dt>
<dd>オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。</dd>
<dt><a href="/ja/docs/Tools/Taking_screenshots">スクリーンショットを撮影</a></dt>
<dd>ページ全体またはひとつの要素のスクリーンショットを撮影します。</dd>
<dt><a href="https://developer.mozilla.org/ja/docs/Tools/Measure_a_portion_of_the_page">ページの一部分を計測する</a></dt>
<dd>ウェブページの特定のエリアを計測します。</dd>
<dt><a href="https://developer.mozilla.org/ja/docs/Tools/Rulers">定規</a></dt>
<dd>ウェブページ上に水平、垂直な定規を重ねます。</dd>
</dl>
</div>
<div class="column-container">
<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
<p style="text-align: center;">最新の開発ツールと機能については、Firefox Developer Edition を試してみてください。</p>
<p><a href="https://www.mozilla.org/ja/firefox/developer/" style="width: 330px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Developer Edition のダウンロード</a></p>
</div>
</div>
<hr>
<h2 id="Connecting_the_Developer_Tools" name="Connecting_the_Developer_Tools">開発ツールに接続する</h2>
<p><a href="/ja/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">キーボードショートカット</a> や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。</p>
<div class="twocolumns">
<dl>
<dt><a href="/ja/docs/Tools/about:debugging">about:debugging</a></dt>
<dd>アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。</dd>
<dt><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Android 版 Firefox に接続する</a></dt>
<dd>Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。</dd>
<dt><a href="/ja/docs/Tools/Working_with_iframes">iframe に接続する</a></dt>
<dd>現在のページ内の、特定の iframe に開発ツールを接続します。</dd>
<dt><a href="/ja/docs/Tools/Valence">ほかのブラウザーに接続する</a></dt>
<dd>Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。</dd>
</dl>
</div>
<hr>
<h2 id="Debugging_the_browser" name="Debugging_the_browser">ブラウザーのデバッグ</h2>
<p>通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。</p>
<div class="twocolumns">
<dl>
<dt><a href="/ja/docs/Tools/Browser_Console">ブラウザーコンソール</a></dt>
<dd>ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。</dd>
<dt><a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a></dt>
<dd>開発ツールをブラウザー自体に接続します。</dd>
</dl>
</div>
<hr>
<h2 id="Extending_the_devtools" name="Extending_the_devtools">開発ツールの拡張</h2>
<p>Firefox 開発ツールの拡張についての情報は、MDN の<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>セクションの<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールの拡張</a> を見てください。</p>
<h2 id="Migrating_from_Firebug" name="Migrating_from_Firebug">Firebug からの移行</h2>
<p>Firebug は寿命が近づいています（理由の詳細については <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> を参照してください）。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「<a href="/ja/docs/Tools/Migrating_from_Firebug">Firebug からの移行</a>」書いています。</p>
<hr>
<h2 id="Contribute" name="Contribute">貢献</h2>
<p>開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。</p>
<div class="twocolumns">
<dl>
<dt><a href="https://devtools-html.github.io/#getting-in-to">Get Involved</a></dt>
<dd>始め方を解説した Mozilla wiki ページです。</dd>
<dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
<dd>作業中のバグを探せるツールです。</dd>
</dl>
</div>
|
