aboutsummaryrefslogtreecommitdiff
path: root/files/ja/tools/web_console/console_messages/index.html
blob: 5c6167813655eec5fdeccdbcbd25658e735590b0 (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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
---
title: コンソールのメッセージ
slug: Tools/Web_Console/Console_messages
translation_of: Tools/Web_Console/Console_messages
---
<div>{{ToolsSidebar}}</div><p>ウェブコンソールのほとんどは、メッセージ表示ペインが占めています:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p>

<p>それぞれのメッセージは、個別の行に表示します:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td><strong>時刻</strong></td>
   <td>メッセージを記録した時刻です。これはデフォルトで表示しません。<a href="/ja/docs/Tools/Tools_Toolbox#Settings">開発ツールのオプション</a> で、タイムスタンプを表示するように設定できます。</td>
  </tr>
  <tr>
   <td><strong>カテゴリー</strong></td>
   <td>
    <p>メッセージの種類を示します:</p>

    <ul style="margin-left: 40px;">
     <li><strong>黒色</strong>: ネットワークリクエスト</li>
     <li><span style="color: #0099ff;"><strong>青色</strong></span>: CSS の警告/エラー/ログ</li>
     <li><strong><span style="color: #ff8c00;">橙色</span></strong>: JavaScript の警告/エラー</li>
     <li><span style="color: #ff0000;"><strong>赤色</strong></span>: セキュリティの警告/エラー</li>
     <li><span style="color: #90b090;"><strong>緑色</strong></span>: サーバーのログ</li>
     <li><span style="color: #a9a9a9;"><strong>薄い灰色</strong></span>: <a href="/ja/docs/Web/API/console" title="Web/API/console">Console</a> API のメッセージ</li>
     <li><span style="color: #696969;"><strong>濃い灰色</strong></span>: 対話式 <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a> の入出力</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><strong>タイプ</strong></td>
   <td>ネットワークリクエストと対話式の入出力を除くすべてのメッセージにおいて、メッセージがエラー (X)、警告 (!)、ログ (i) のどれかを示すアイコンです。</td>
  </tr>
  <tr>
   <td><strong>メッセージ</strong></td>
   <td>メッセージ本文です。</td>
  </tr>
  <tr>
   <td><strong>発生回数</strong></td>
   <td>警告やエラーを表す行が複数発生した場合はログを 1 回だけ記録して、何回発生したかを示すカウンターを表示します。</td>
  </tr>
  <tr>
   <td><strong>ファイル名と行番号</strong></td>
   <td>
    <p>JavaScript、CSS、console API のメッセージでは、メッセージからコードの特定の行までたどることができます。コンソールはメッセージが発生したファイル名および行へのリンクを提供します。</p>

    <p>Firefox 36 より、列番号も表示します。</p>
   </td>
  </tr>
 </tbody>
</table>

<p>デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。<a href="/ja/docs/Tools/Tools_Toolbox#Common_preferences">オプション</a> で "ログ出力を残す" にチェックを入れると、この動作が変わります。</p>

<h2 id="Message_categories" name="Message_categories">メッセージのカテゴリー</h2>

<h3 id="Network" name="Network">ネットワーク</h3>

<div class="note">
<p>ネットワークのログメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a>機能を使用してください。</p>
</div>

<p>ネットワークリクエストは、以下のような行で記録されます:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td><strong>時刻</strong></td>
   <td>メッセージを記録した時刻</td>
  </tr>
  <tr>
   <td><strong>カテゴリー</strong></td>
   <td>メッセージが HTTP リクエストであることを示す</td>
  </tr>
  <tr>
   <td><strong>メソッド</strong></td>
   <td>
    <p>具体的な HTTP リクエストメソッド</p>

    <p><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> として実行したリクエストである場合は、それを示すマークをつけます:</p>

    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
   </td>
  </tr>
  <tr>
   <td><strong>URI</strong></td>
   <td>ターゲットの URI</td>
  </tr>
  <tr>
   <td><strong>サマリー</strong></td>
   <td>HTTP バージョン、ステータスコード、完了までにかかった時間</td>
  </tr>
 </tbody>
</table>

<h4 id="Viewing_network_request_details" name="Viewing_network_request_details">ネットワークリクエストを詳しく確認する</h4>

<p>メッセージをクリックすると <a href="/ja/docs/Tools/Network_Monitor">ネットワークパネル</a> に移動します。ネットワークパネルでは該当するリクエストを選択して、詳細なリクエストおよびレスポンスの情報を右側のパネルに表示します。Firefox 43 以前では、ポップアップウィンドウでこれらの情報表示します。</p>

<p>Firefox 48 より、これらの詳細情報の多くをウェブコンソールから離れることなくインラインで確認できます。ネットワークリクエストの項目の隣に、展開用の三角印があります。クリックすると以下の情報を表示します:</p>

<ul>
 <li><strong>ヘッダー:</strong> 要求ヘッダーと応答ヘッダー</li>
 <li><strong>応答:</strong> 応答ボディ</li>
 <li><strong>Cookie:</strong> リクエストとともに送信した Cookie</li>
 <li><strong>コールスタック</strong> (Firefox 50 の新機能): <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a><a href="/ja/docs/Web/API/Fetch_API">Fetch</a> のように JavaScript が開始したリクエストで、リクエストを行った個所のコールスタックを確認できます。</li>
</ul>

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

<h3 id="JS" name="JS">JS</h3>

<p>JavaScript のメッセージは以下のようなものです:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 id="Learn_more_link" name="Learn_more_link">"詳細" リンク</h4>

<div class="geckoVersionNote">Firefox 49 の新機能</div>

<p>JavaScript のエラーには、問題を解決するための付加的なアドバイスを提供する <a href="/ja/docs/Web/JavaScript/Reference/Errors">JavaScript エラーリファレンス</a> に案内する、"詳細" リンクがあります:</p>

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

<h4 id="Source_maps" name="Source_maps">ソースマップ</h4>

<div class="geckoVersionNote">Firefox 55 の新機能</div>

<p>Firefox 55 より、ウェブコンソールが <a href="http://blog.teamtreehouse.com/introduction-source-maps">ソースマップ</a> を理解します。つまり JavaScript のソースが圧縮されている場合に、ソースマップを与えることができます。ソース内でメッセージやエラーが発生すると、ウェブコンソールは非圧縮版の元のソースに基づいてそれらを表示します。</p>

<h3 id="CSS" name="CSS">CSS</h3>

<div class="note">
<p>CSS の警告とリフローのメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a> 機能を使用してください。</p>
</div>

<p>CSS のメッセージは以下のようなものです:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 id="Reflow_events" name="Reflow_events">リフローイベント</h4>

<p>ウェブコンソールは、CSS カテゴリーでリフローのイベントも記録します。リフローは、ブラウザーがページの全体あるいは一部分のレイアウトを計算する処理に与えられた名称です。レイアウトに影響があるとブラウザーが考えるような変化がページで起きたときに、リフローが発生します。以下に挙げるものを含めて、多くのイベントがリフローを発生させます: ブラウザーウィンドウのリサイズ、<a href="/ja/docs/Web/CSS/:hover">:hover</a> のような疑似クラスのアクティブ化、JavaScript による DOM の操作。</p>

<p>リフローは計算負荷が高い場合があり、またユーザーインターフェイスに直接作用するため、ウェブサイトやウェブアプリの応答性に大きな影響を与えることがあります。ウェブコンソールはリフローイベントを記録することにより、リフローイベントが発生した時の実行にどれだけ時間がかかったか、またリフローが JavaScript によって発生された <a href="/ja/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">同期リフロー</a> である場合に、どのコードが発生させたかの情報を手供します。</p>

<p>リフローイベントは "リフロー" メッセージとして、CSS のエラーや警告とは別に記録されます。デフォルトでは、これは無効になっています。有効にするには <a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">ツールバー</a> の "CSS" ボタンをクリックして、"リフロー" を選択してください。</p>

<p>各々のメッセージは "リフロー" というラベルがつき、リフローの実行にかかった時間を表示します:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">リフローが JavaScript によって発生された同期リフローである場合は、リフローを発生させたコードの行へのリンクも表示します:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">リンクをクリックすると、そのファイルを <a href="/ja/docs/Tools/Debugger">デバッガー</a> で開きます。</p>

<h4 id="Synchronous_and_asynchronous_reflows" name="Synchronous_and_asynchronous_reflows">同期リフローと非同期リフロー</h4>

<p>現在のレイアウトを無効にする変更がなされる、例えばブラウザーのウィンドウをリサイズしたり、ある JavaScript が要素の CSS を変更したりしても、レイアウトが直ちに再計算されるわけではありません。代わりにリフローは非同期に、ブラウザーが必要と判断した時点 (通常、ブラウザーが次に再描画を行うとき) で実行します。この方法により、ブラウザーは無効化する変更点を蓄えておいて一度にそれらの影響を再計算することができます。</p>

<p>しかし、ある JavaScript コードが変更されたスタイルを読み取ると、ブラウザーは返す計算値を算出するために同期リフローを実行しなければなりません。例えば以下のようなコードでは、<code>window.getComputedStyle(thing).height</code> を呼び出したときに直ちに同期リフローが発生します:</p>

<pre class="brush: js">var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;</pre>

<p>以前のスタイル書き込みによって無効化されたスタイルを読み取るたびに同期リフローを強いるため、DOM の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。</p>

<h3 id="Security" name="Security">セキュリティ</h3>

<p>セキュリティの警告とエラーは以下のようなものです:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">ウェブコンソールに表示されるセキュリティメッセージは、サイト内の潜在的あるいは実在の脆弱性を開発者が発見することを支援します。加えて、これらのメッセージの多くは開発者の教育に役立ちます。これは、背景に関する情報や問題を緩和するためのアドバイスを記載したページに案内する、"詳細" リンクが終わりにあるためです。</p>

<p>すべてのセキュリティメッセージの一覧を以下に掲載します:</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">メッセージ</th>
   <th scope="col">詳細</th>
  </tr>
  <tr>
   <td>混在アクティブコンテンツの読み込みをブロックしました</td>
   <td>ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツをブロックしました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>混在表示コンテンツの読み込みをブロックしました</td>
   <td>ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツをブロックしました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>安全なページ上で (安全でない) 混在アクティブコンテンツを読み込んでいます</td>
   <td>ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこのアクティブコンテンツを読み込みました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>安全なページ上で (安全でない) 混在表示コンテンツを読み込んでいます</td>
   <td>ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザーは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザーはこの表示コンテンツを読み込みました。詳しくは <a href="/ja/docs/Security/MixedContent">混在コンテンツ</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>サイトに X-Content-Security-Policy/Report-Only ヘッダーと Content-Security-Policy/Report-Only ヘッダーの両方が指定されています。X-Content-Security-Policy/Report-Only ヘッダーは無視されます。</td>
   <td>詳しくは <a href="/ja/docs/Security/CSP">Content Security Policy</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>X-Content-Security-Policy ヘッダーと X-Content-Security-Report-Only ヘッダーは推奨されなくなります。代わりに CSP 仕様に準拠した構文の Content-Security-Policy ヘッダーと Content-Security-Report-Only ヘッダーを使用してください。</td>
   <td>詳しくは <a href="/ja/docs/Security/CSP">Content Security Policy</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>パスワードフィールドが安全でない (http://) ページ上にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td>
   <td>ログインフォームを含むページは、HTTP ではなく HTTPS で提供しなければなりません。</td>
  </tr>
  <tr>
   <td>パスワードフィールドが安全でない (http://) フォームアクションを持つフォーム要素内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td>
   <td>パスワードフィールドを含むフォームは、HTTP ではなく HTTPS で送信しなければなりません。</td>
  </tr>
  <tr>
   <td>パスワードフィールドが安全でない (http://) iframe 内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。</td>
   <td>ログインフォームを含む iframe は、HTTP ではなく HTTPS で提供しなければなりません。</td>
  </tr>
  <tr>
   <td>サイトに無効な Strict-Transport-Security ヘッダーが指定されています。</td>
   <td>詳しくは <a href="/ja/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> をご覧ください。</td>
  </tr>
  <tr>
   <td>
    <p>このサイトは SHA-1 証明書を利用しています。SHA-1 より強固なハッシュアルゴリズムを使用した証明書の利用をお勧めします。</p>
   </td>
   <td>
    <p>SHA-1 アルゴリズムを署名で使用している証明書を、サイトで使用しています。</p>

    <p>SHA-1 はまだ証明書で広く使用されていますが、陳腐化し始めています。ウェブサイトや認証局は将来、より強いハッシュアルゴリズムに切り替えることを推奨します。詳しくは <a href="/ja/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> の記事をご覧ください。</p>

    <p>サイト自体の証明書が SHA-1 証明書ではないとしても、サイトの証明書への署名に使用する認証局の証明書で SHA-1 を使用している場合がありますので注意してください。</p>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> は、ウェブコンソールで適切なセキュリティメッセージを記録することに関するメタバグです。ここで議論されているような役に立つ機能のアイデアがある、あるいは貢献に興味がある場合は、メタバグとその依存関係を確認してください。</p>

<h3 id="Logging" name="Logging">ロギング</h3>

<div class="note">
<p><a href="/ja/docs/Web/API/SharedWorker">Shared Worker</a><a href="/ja/docs/Web/API/ServiceWorker_API">Service Worker</a>、アドオン、<a href="/ja/docs/Mozilla/ChromeWorkers">ブラウザー Worker</a> から発生したメッセージは、デフォルトで表示しません。ログを表示するには、<a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category">フィルタリング</a> 機能を使用してください。</p>
</div>

<p>ロギングカテゴリーには、<a href="/ja/docs/Web/API/Console">Console</a> API を使用して発生させたログが含まれます。<br>
 <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>ウェブコンソールでは、以下の <a href="/ja/docs/Web/API/Console">Console API</a> のメッセージをサポートします:</p>

<ul>
 <li><a href="/ja/docs/Web/API/Console.assert"><code>assert()</code></a></li>
 <li><code><a href="/ja/docs/Web/API/Console/clear">clear()</a></code> (Firefox 48 の新機能)</li>
 <li><a href="/ja/docs/Web/API/Console.count"><code>count()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.dir"><code>dir()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.error"><code>error()</code></a></li>
 <li><code>exception()</code></li>
 <li><code><a href="/ja/docs/Web/API/Console.group">group()</a></code></li>
 <li><code><a href="/ja/docs/Web/API/Console/groupEnd">groupEnd()</a></code></li>
 <li><code>info()</code></li>
 <li><a href="/ja/docs/Web/API/Console.log"><code>log()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.table"><code>table()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.time"><code>time()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.trace"><code>trace()</code></a></li>
 <li><a href="/ja/docs/Web/API/Console.warn"><code>warn()</code></a></li>
</ul>

<p>コンソールは以下のように、すべてのエラーメッセージでスタックトレースを表示します:</p>

<pre class="brush: js">function foo() {
  console.error("it explodes");
}

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p>

<h3 id="Server" name="Server">サーバー</h3>

<div class="note">
<p>サーバーサイドのログメッセージは、Firefox 43で導入されましたが、Firefox 56で削除されました。この機能を(再度)使用するには <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a> インストールしてください。</p>
</div>

<p><a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a>を使うと、サーバーから送信されたメッセージをウェブコンソールで表示できます。これにより、サーバーサイドのコードのデバッグにウェブコンソールを使用できます。</p>

<p>これは、<a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> プロトコルを使用します。手短に言えば、仕組みは以下のとおりです:</p>

<ul>
 <li>サーバーサイドのコード (Python、PHP、Node.js など) に、console API を提供するライブラリーを含めます。</li>
 <li>サーバーサイドのコードで、console API を使用してメッセージを記録します。</li>
 <li>サーバーサイドのライブラリーがメッセージから JSON オブジェクトを作成して、送信用にエンコードします。</li>
 <li>メッセージを <code>X-ChromeLogger-Data</code> というレスポンスヘッダーで、クライアントに送信します。</li>
 <li>ウェブコンソールが、ヘッダーをデコードして表示します。</li>
</ul>

<p>サーバー側のコードに適したライブラリーを探すには、<a href="https://craig.is/writing/chrome-logger">Chrome Logger のドキュメント</a> をご覧ください。</p>

<h3 id="Command_line_inputoutput" name="Command_line_inputoutput">コマンドラインの入力/出力</h3>

<p><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">ウェブコンソールのコマンドライン</a> を使用してブラウザーに送信したコマンドとそれに対する応答は、以下のような行で記録されます:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。</p>

<h2 id="Filtering_and_searching" name="Filtering_and_searching"><a name="filtering-and-searching">フィルタリングと検索</a></h2>

<h3 id="Filtering_by_category" name="Filtering_by_category">カテゴリーでフィルタリング</h3>

<p>上段のツールバーで、表示する結果を制限できます。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">カテゴリー名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、そのカテゴリー全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します。</p>

<ul>
 <li>ネットワーク
  <ul>
   <li>エラー</li>
   <li>警告</li>
   <li>XHR</li>
   <li>ログ</li>
  </ul>
 </li>
 <li>CSS
  <ul>
   <li>エラー</li>
   <li>警告</li>
   <li>リフロー</li>
  </ul>
 </li>
 <li>JS
  <ul>
   <li>エラー</li>
   <li>警告</li>
  </ul>
 </li>
 <li>セキュリティ
  <ul>
   <li>エラー</li>
   <li>警告</li>
  </ul>
 </li>
 <li>ロギング
  <ul>
   <li>エラー</li>
   <li>警告</li>
   <li>メッセージ</li>
   <li>ログ</li>
   <li>Shared Worker</li>
   <li>Service Worker</li>
   <li>アドオンまたはブラウザー Worker</li>
  </ul>
 </li>
 <li>サーバー
  <ul>
   <li>エラー</li>
   <li>警告</li>
   <li>メッセージ</li>
   <li>ログ</li>
  </ul>
 </li>
</ul>

<h3 id="Filtering_by_text" name="Filtering_by_text">文字列でフィルタリング</h3>

<p>"出力を絞り込み" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。</p>

<h3 id="Clearing_the_log" name="Clearing_the_log">ログを消去する</h3>

<p>最後に、このツールバーでログを消去することもできます。Firefox 48 より前のバージョンでは、ツールバーの右側にある "消去" ボタンです。Firefox 48 以降では、左側にあるゴミ箱のアイコンです。</p>