initial commit

9 files changed, 1517 insertions, 0 deletions

diff --git a/files/ja/tools/web_console/console_messages/index.html b/files/ja/tools/web_console/console_messages/index.html
new file mode 100644
index 0000000000..5c61678136
--- /dev/null
+++ b/files/ja/tools/web_console/console_messages/index.html
@@ -0,0 +1,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>
diff --git a/files/ja/tools/web_console/helpers/index.html b/files/ja/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..a460b6915c
--- /dev/null
+++ b/files/ja/tools/web_console/helpers/index.html
@@ -0,0 +1,141 @@
+---
+title: Web コンソールヘルパー
+slug: Tools/Web_Console/Helpers
+tags:
+  - Debugging
+  - Web Development
+  - web console
+translation_of: Tools/Web_Console/Helpers
+---
+<p>{{ToolsSidebar}}</p>
+
+<h2 id="コマンド">コマンド</h2>
+
+<p>ウェブコンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。</p>
+
+<dl>
+ <dt id="$"><code>$(selector, element)</code></dt>
+ <dd>
+ <p>CSS セレクタ文字列 <code>selector</code> を検索し、一致する <code>element</code> の子孫ノードを返します。未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。{{ domxref("document.querySelector()") }} と同等で、ページ内に $ 関数が存在する場合はそれを呼び出します。</p>
+
+ <p><a href="/ja/docs/Code_snippets/QuerySelector">QuerySelector コードスニペット</a>参照してください。</p>
+ </dd>
+ <dt id="$$"><code>$$(selector, element)</code></dt>
+ <dd>CSS セレクタ文字列 <code>selector</code> を検索し、一致する <code>element</code> の子孫である DOM ノードの配列を返します。未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。これは {{ domxref("document.querySelectorAll()") }} と似ていますが、{{ domxref("NodeList") }} ではなく配列を返します。</dd>
+ <dt id="$0"><code>$0</code></dt>
+ <dd>ページ内で現在調査されている要素です。</dd>
+ <dt id="$_"><code>$_</code></dt>
+ <dd>コンソールのコマンドラインで最後に実行した式の結果を保持します。例えば "2+2 &lt;enter&gt;" と入力した後に "$_ &lt;enter&gt;" と入力すると、コンソールは 4 と出力します。</dd>
+ <dt id="$x"><code>$x(xpath, element, resultType)</code></dt>
+ <dd><code>element</code> のコンテキストで <a href="/ja/docs/XPath">XPath</a> <code>xpath</code> 式を評価し、一致するノードの配列を返します。 未指定の場合、<code>element</code> のデフォルトは <code>document</code> です。<code>resultType</code>には戻り値の型を指定します。取りうる値は <a href="https://developer.mozilla.org/ja/docs/Web/API/XPathResult#Constants">XPathResult定数</a>か <code>"number"</code>、 <code>"string"</code>、 <code>"bool"</code>、 <code>"node"</code>、 <code>"nodes"</code> のいずれかです。指定されなかった場合、 <code>ANY_TYPE</code> になります。</dd>
+ <dt id="keys"><code>keys()</code></dt>
+ <dd>オブジェクトを与えると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> のショートカットです。</dd>
+ <dt id="values"><code>values()</code></dt>
+ <dd>オブジェクトを与えると、そのオブジェクトの値の一覧を返します。これは <code>keys()</code> と対をなすものです。</dd>
+ <dt id="clear"><code>clear()</code></dt>
+ <dd>コンソールの出力エリアをクリアします。</dd>
+ <dt id="inspect"><code>inspect()</code></dt>
+ <dd>オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開きます。</dd>
+ <dt id="pprint"><code>pprint()</code></dt>
+ <dd>指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。</dd>
+ <dt id="help"><code>help()</code>{{Deprecated_Inline(62)}}<br>
+ <code style="margin-right: 1ch;">:help</code>{{Gecko_MinVersion_Inline(62)}}</dt>
+ <dd>ヘルプテキストを表示します。 実のところ、再びこのページに移動するという愉快な挙動を示します。</dd>
+ <dt id="cd"><code>cd()</code></dt>
+ <dd>
+ <p>JavaScript の評価を行うコンテキストを、ページ内の別の iframe に切り替えます。このコマンドは切り替え先のフレームを識別するための、さまざまな方法を受け入れます。以下のいずれかを与えることができます:</p>
+
+ <ul>
+  <li>iframe 要素を特定するため、<code>document.querySelector</code> に渡すセレクター文字列</li>
+  <li>iframe 要素自体</li>
+  <li>iframe 内部の content window</li>
+ </ul>
+
+ <p><a href="/ja/docs/Tools/Working_with_iframes">iframe での作業</a> をご覧ください。</p>
+ </dd>
+ <dt id="copy"><code>copy()</code></dt>
+ <dd><em>Firefox 38 の新機能。</em> 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの <code><a href="/ja/docs/Web/API/Element/outerHTML">outerHTML</a></code> をコピーします。他の値である場合は引数に対して <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code> を呼び出して、その結果をコピーします。</dd>
+ <dt id="clearHistory"><code>clearHistory()</code></dt>
+ <dd><em>Firefox 39 の新機能。</em>一般的なコマンドラインと同様に、コンソールのコマンドラインも <a href="/ja/docs/Tools/Web_Console#Command_history">過去に入力したコマンドを覚えています</a>。この関数を実行すると、コンソールのコマンドラインの履歴を消去します。</dd>
+ <dt id="screenshot"><code>:screenshot</code></dt>
+ <dd>提供されたファイル名で現在のページのスクリーンショットを作成します。ファイル名を指定しない場合、画像ファイルの名前は次のようになります。<br>
+ <br>
+ <code>Screen Shot yyy-mm-dd at hh.mm.ss.png</code><br>
+ <br>
+ このコマンドには、次のオプションのパラメータがあります。<br>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>コマンド</th>
+    <th>型</th>
+    <th>説明</th>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--clipboard</code></td>
+    <td>boolean</td>
+    <td>このパラメータがある場合は、スクリーンショットがクリップボードにコピーされます。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--delay</code></td>
+    <td>number</td>
+    <td>スクリーンショットを撮るまでに遅らせる秒数。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--dpr</code></td>
+    <td>number</td>
+    <td>スクリーンショットを撮るときに使用するデバイスのピクセル比率。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--file</code></td>
+    <td>boolean</td>
+    <td>これがある場合、他のオプション (<code style="white-space: nowrap;">--clipboard</code> など) が含まれていても、スクリーンショットはファイルに保存されます。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--filename</code></td>
+    <td>string</td>
+    <td>ファイルの保存に使用する名前。ファイルの拡張子は ".png" にする必要があります。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--fullpage</code></td>
+    <td>boolean</td>
+    <td>これがある場合は、Web ページ全体が保存されます。このパラメータを使用すると、ウィンドウの現在の範囲外にある Web ページの部分であってもスクリーンショットに含まれます。使用したときは、ファイル名に "<span style="white-space: nowrap;">-fullpage</span>" が追加されます。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--selector</code></td>
+    <td>string</td>
+    <td>ページ上の単一要素の CSS クエリーセレクタ。これが渡されると、この要素のみがスクリーンショットに含まれます。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<p>コンテンツからログを出力する機能について、詳しくは <a href="/ja/docs/Web/API/console">Console API</a> をご覧ください。</p>
+
+<h2 id="Variables" name="Variables">変数</h2>
+
+<dl>
+ <dt id="tempN">temp<em>N</em></dt>
+ <dd>インスペクターの "<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">コンソールで使う</a>" は、参照しているノードを表す変数 <code>temp0</code>、<code>temp1</code>、<code>temp2</code> などを生成します。</dd>
+</dl>
+
+<h2 id="例">例</h2>
+
+<h3 id="DOM_ノードの内容を閲覧する">DOM ノードの内容を閲覧する</h3>
+
+<p>例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここでウェブコンソールを開いて試してみることができます。</p>
+
+<p><code>$()</code> および <code>inspect()</code> を用いて、ノードのコンテンツを確認してみましょう:</p>
+
+<pre class="brush: js; no-line-numbers notranslate">inspect($("#title"))</pre>
+
+<p>自動的にオブジェクトインスペクターが開き、CSS セレクター "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。</p>
+
+<h3 id="DOM_ノードの内容をダンプする">DOM ノードの内容をダンプする</h3>
+
+<p>これは、あなたがブラウザー上で起きている問題を調査することになり、ユーザーのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザーにウェブコンソールを開いてもらい、<code>pprint()</code> を用いてノードの内容をログにダンプし、その出力結果をメールにコピー &amp; 貼り付けして送付してもらうことができます:</p>
+
+<pre class="brush: js; no-line-numbers notranslate">pprint($("#title"))</pre>
+
+<p>これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。</p>
diff --git a/files/ja/tools/web_console/index.html b/files/ja/tools/web_console/index.html
new file mode 100644
index 0000000000..ab647c2924
--- /dev/null
+++ b/files/ja/tools/web_console/index.html
@@ -0,0 +1,48 @@
+---
+title: Webコンソール
+slug: Tools/Web_Console
+tags:
+  - Guide
+  - Security
+  - Web Development
+  - 'Web Development:Tools'
+  - 'l10n:priority'
+  - web console
+  - ツール
+  - デバッグ
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><strong>Webコンソールとは:</strong></p>
+
+<ol>
+ <li>ウェブページに関する情報、ネットワークリクエスト、JavaScript、CSS、セキュリティのエラーや警告のほか、ページ内で実行されている JavaScript コードによって記録されたエラー、警告、情報メッセージを記録できます。</li>
+ <li>ページコンテキスト内で JavaScript の式を実行することにより、ウェブページと対話できます。</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ja/docs/Tools/Web_Console/Opening_the_Web_Console">Webコンソールを開く</a></dt>
+ <dd>Webコンソールを開く方法です。</dd>
+ <dt><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter">コマンドラインインタープリター</a></dt>
+ <dd>コンソールを使用してドキュメントと対話する方法です。</dd>
+ <dt><a href="/ja/docs/Tools/Web_Console/Split_console">コンソールの分割</a></dt>
+ <dd>コンソールを別のツールと並べて使用します。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ja/docs/Tools/Web_Console/Console_messages">コンソールのメッセージ</a></dt>
+ <dd>コンソールが記録するメッセージを詳しく説明します。</dd>
+ <dt><a href="/ja/docs/Tools/Web_Console/Rich_output">高度な出力</a></dt>
+ <dd>コンソールが記録したオブジェクトを確認して対話する方法です。</dd>
+ <dt><a href="/ja/docs/Tools/Web_Console/Keyboard_shortcuts">キーボードショートカット</a></dt>
+ <dd>ショートカットのリファレンスです。</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ja/tools/web_console/keyboard_shortcuts/index.html b/files/ja/tools/web_console/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..890a011a3f
--- /dev/null
+++ b/files/ja/tools/web_console/keyboard_shortcuts/index.html
@@ -0,0 +1,10 @@
+---
+title: キーボードショートカット
+slug: Tools/Web_Console/Keyboard_shortcuts
+translation_of: Tools/Web_Console/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "web-console")}}</p>
+
+<h2 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h2>
+
+<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p>
diff --git a/files/ja/tools/web_console/opening_the_web_console/index.html b/files/ja/tools/web_console/opening_the_web_console/index.html
new file mode 100644
index 0000000000..a71b4568e1
--- /dev/null
+++ b/files/ja/tools/web_console/opening_the_web_console/index.html
@@ -0,0 +1,25 @@
+---
+title: ウェブコンソールを開く
+slug: Tools/Web_Console/Opening_the_Web_Console
+translation_of: Tools/Web_Console/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>ウェブコンソールを開く方法は以下のとおりです:</p>
+
+<ul>
+ <li>Firefox メニュー (メニューバーがある場合や Mac OS X では、ツールメニュー) のウェブ開発サブメニューで "ウェブコンソール" を選択する。</li>
+ <li>または、キーボードショートカット <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (OS X では <kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd>) を押下します。</li>
+</ul>
+
+<p>ウェブコンソールがアクティブになっている <a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a> がブラウザーウィンドウの下部に現れます (<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar" title="Tools/Tools_Toolbox#Toolbar">開発ツールのツールバー</a> では "コンソール" という名称です):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p>
+
+<p>ウェブコンソールのインターフェイスは 3 つに分けられます:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">ツールバー</a>: 上段にボタンを 2 つ置いているツールバーがあります。ゴミ箱のボタンをクリックすると、コンソールの内容を消去できます。漏斗のアイコンをクリックすると、コンソールに表示されているメッセージをフィルターできます。</li>
+ <li><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">コマンドライン</a>: コマンドラインは、二重山かっこ (&gt;&gt;) で始まります。ここに JavaScript の式を入力します。</li>
+ <li><a href="/ja/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">メッセージ表示ペイン</a>: ページ内のコードやコマンドラインに入力したコマンドによって生成されたメッセージです。コマンドによって生成されメッセージは、それぞれのコマンドに続いて表示します。</li>
+</ul>
diff --git a/files/ja/tools/web_console/remoting/index.html b/files/ja/tools/web_console/remoting/index.html
new file mode 100644
index 0000000000..f59789f31b
--- /dev/null
+++ b/files/ja/tools/web_console/remoting/index.html
@@ -0,0 +1,686 @@
+---
+title: Webコンソールリモーティング
+slug: Tools/Web_Console/remoting
+translation_of: Tools/Web_Console/remoting
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="イントロダクション">イントロダクション</h2>
+
+<p>このドキュメントでは、Webコンソールのリモート処理のしくみについて説明します。Webコンソールはユーザーインターフェイスを備えたクライアントと、タブ内で発生するすべてのもののリスナーを持つサーバーに分割されています。サーバーとクライアント間の通信には、<a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">リモートデバッグプロトコル</a>を使用します。このアーキテクチャでは、WebコンソールクライアントインスタンスをB2G、Fennecまたはその他のFirefoxインスタンス上で動作するサーバーに接続できます。</p>
+
+<p>Webコンソールのアーキテクチャをよりよく理解するために、<a href="https://wiki.mozilla.org/Debugger_Architecture">デバッガのアーキテクチャ</a>について学ぶことをお勧めします。</p>
+
+<div class="note">
+<p>リモートWebコンソールは、Firefox 18で導入された機能です。このドキュメントでは、最新のプロトコルについて説明しています。</p>
+</div>
+
+<h2 id="WebConsoleActor_と_WebConsoleClient"><code>WebConsoleActor</code> と <code>WebConsoleClient</code></h2>
+
+<p><code>WebConsoleActor</code> は、<a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/"><code>toolkit/devtools/webconsole</code></a> フォルダの <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/dbg-webconsole-actors.js" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/dbg-webconsole-actors.js"><code>dbg-webconsole-actors.js</code></a> にあります。</p>
+
+<p><code>WebConsoleClient</code> は (<a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/"><code>toolkit/devtools/webconsole</code></a> の) <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/WebConsoleClient.jsm" title="http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/webconsole/WebConsoleClient.jsm"><code>WebConsoleClient.jsm</code></a> にあり、Web コンソールアクターで作業するときにWeb コンソールで使用されます。</p>
+
+<p>デバッガが Web コンソールコードでどのように使用されているかを確認するには、<a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/webconsole/webconsole.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/webconsole/webconsole.js"><code>browser/devtools/webconsole/webconsole.js</code></a> を開き、<code>WebConsoleConnectionProxy</code> を検索します。</p>
+
+<p>新しい Web コンソールアクターは次のとおりです。</p>
+
+<ul>
+ <li><code>WebConsoleActor</code> は JS 評価、オートコンプリート、リスナーの開始/停止などを許可します。</li>
+ <li><code>NetworkEventActor</code> は、新しいネットワークリクエストごとに使用されます。クライアントは、レスポンス本文やリクエストヘッダーなど、詳細なネットワークイベントの詳細を要求できます。</li>
+</ul>
+
+<p><code>WebConsoleActor</code> に接続するには、次の手順を実行します。</p>
+
+<pre class="brush:js;">connectToServer() // the usual
+listTabs()
+pickTheTabYouWant()
+debuggerClient.attachConsole(tab.consoleActor, listeners, onAttachConsole)
+</pre>
+
+<p><code>listeners</code> 引数は、Web コンソールで開始するリスナーを指定する配列です。ページエラー、<code>window.console</code> API メッセージ、ネットワークアクティビティ、ファイルアクティビティなどがあります。例えば：</p>
+
+<pre class="brush:js;">["PageError", "ConsoleAPI", "NetworkActivity", "FileActivity"]</pre>
+
+<div class="note">
+<p>Webコンソールアクタはデフォルトではリスナーを起動しません。クライアントには、必要なときに各リスナーを起動するオプションがあります。この方法で、サーバーでのリソース使用率を低く抑えることができます。これは、サーバーが少ないリソースでデバイスを実行する場合に起こりうる問題です。</p>
+</div>
+
+<p><code>onAttachConsole</code> コールバックは <code>WebConsoleClient</code> オブジェクトの新しいインスタンスを受け取ります。このオブジェクトは <code>startListeners()</code>、<code>stopListeners()</code> などのプロトコルパケットを抽象化するメソッドを提供します。</p>
+
+<p>プロトコルパケットは次のようになります。</p>
+
+<pre class="brush:json;">{
+  "to": "root",
+  "type": "listTabs"
+}
+{
+  "from": "root",
+  "consoleActor": "conn0.console9",
+  "selected": 2,
+  "tabs": [
+    {
+      "actor": "conn0.tab2",
+      "consoleActor": "conn0.console7",
+      "title": "",
+      "url": "https://tbpl.mozilla.org/?tree=Fx-Team"
+    },
+// ...
+  ]
+}
+</pre>
+
+<p><code>consoleActor</code> は<strong>グローバルアクター</strong>としても利用可能であることに注意してください。グローバル <code>consoleActor</code> にアタッチすると、すべてのネットワークリクエスト、ページエラー、およびその他のイベント (クロムエラーやネットワークイベントなど) がすべてのタブとウィンドウから受信されます。このアクターはブラウザコンソールの実装や、リモート Firefox/B2G インスタンスのデバッグに使用されます。</p>
+
+<h3 id="startListeners(listeners_onResponse)"><code>startListeners(listeners, onResponse)</code></h3>
+
+<p>新しい <code>startListeners</code> パケット：</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "startListeners",
+  "listeners": [
+    "PageError",
+    "ConsoleAPI",
+    "NetworkActivity",
+    "FileActivity"
+  ]
+}
+</pre>
+
+<p>返答：</p>
+
+<pre class="brush:json;">{
+  "startedListeners": [
+    "PageError",
+    "ConsoleAPI",
+    "NetworkActivity",
+    "FileActivity"
+  ],
+  "nativeConsoleAPI": true,
+  "from": "conn0.console9"
+}
+</pre>
+
+<p>レスポンスは開始されたリスナーを示し、<code>window.console</code> オブジェクトがページ内のスクリプトによってオーバーライドされたかどうかを示す <code>nativeConsoleAPI</code> フラグを含みます。</p>
+
+<h3 id="タブナビゲーション">タブナビゲーション</h3>
+
+<p>タブナビゲーションイベントを待ち受けるには、指定したタブのタブアクターにアタッチする必要もあります。<code>tabNavigated</code> 通知はタブのアクターから来ます。</p>
+
+<div class="warning">
+<p>Firefox 20 以前では、Web コンソールの実行者は<code>LocationChange</code>リスナを提供し、<code>locationChanged</code> 通知を関連付けました。これはもはや当てはまりません。Web コンソールクライアントが <code>tabNavigated</code> 通知を再利用 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=792062" title="https://bugzilla.mozilla.org/show_bug.cgi?id=792062">bug 792062</a>) できるように変更しました。</p>
+</div>
+
+<p>ページナビゲーションが開始されると、次のパケットがタブアクターから送信されます。</p>
+
+<pre class="brush: json"><code class="brush: json">{
+  "from": tabActor,
+  "type": "tabNavigated",
+  "state": "start",
+  "url": newURL,
+  "nativeConsoleAPI": true
+}</code>
+</pre>
+
+<p><code>nativeConsoleAPI</code> プロパティは、<code>window.console</code> オブジェクトがネイティブかどうかを、指定されたタブのトップレベルウィンドウオブジェクトに対して示します。これは、ナビゲーションが開始されると常に <code>true</code> になります。ナビゲーションが停止すると、次のパケットが送信されます。</p>
+
+<pre class="brush: json"><code>{
+  "from": tabActor,
+  "type": "tabNavigated",
+  "state": "stop",
+  "url": newURL,
+  "title": newTitle,
+  "nativeConsoleAPI": true|false
+}</code></pre>
+
+<h3 id="getCachedMessages(types_onResponse)"><code>getCachedMessages(types, onResponse)</code></h3>
+
+<p><code>webConsoleClient.getCachedMessages(types, onResponse)</code> メソッドは、次のパケットをサーバーに送信します。</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "getCachedMessages",
+  "messageTypes": [
+    "PageError",
+    "ConsoleAPI"
+  ]
+}
+</pre>
+
+<p><code>getCachedMessages</code> パケットを使用すると、Web コンソールを開く前にキャッシュされたメッセージを取得できます。 ページエラーとコンソール API 呼び出しのキャッシュメッセージしか取得できません。 返信は次のようになります。</p>
+
+<pre class="brush:json;">{
+  "messages": [ ... ],
+  "from": "conn0.console9"
+}
+</pre>
+
+<p>配列内の各メッセージは、典型的なページエラーやコンソール API コールを送信するときと同じタイプです。これらについては、本書の以下のセクションで説明します。</p>
+
+<h3 id="アクター設定">アクター設定</h3>
+
+<p>Web コンソールが実行中にログオプションを設定できるように、<code>setPreferences</code>パケットを追加しました。</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "setPreferences",
+  "preferences": {
+    "NetworkMonitor.saveRequestAndResponseBodies": false
+  }
+}
+</pre>
+
+<p>返答:</p>
+
+<pre class="brush:json;">{
+  "updated": [
+    "NetworkMonitor.saveRequestAndResponseBodies"
+  ],
+  "from": "conn0.console10"
+}
+</pre>
+
+<p>便宜上 <code>webConsoleClient.setPreferences(prefs, onResponse)</code>を使用できます。<code>prefs</code> 引数は <code>{ prefName: prefValue, ... }</code> のようなオブジェクトです。</p>
+
+<p>Firefox 25 では <code>getPreferences</code> リクエストパケットが追加されました：</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console34",
+  "type": "getPreferences",
+  "preferences": [
+    "NetworkMonitor.saveRequestAndResponseBodies"
+  ]
+}
+</pre>
+
+<p>返答パケット：</p>
+
+<pre class="brush:json;">{
+  "preferences": {
+    "NetworkMonitor.saveRequestAndResponseBodies": false
+  },
+  "from": "conn0.console34"
+}
+</pre>
+
+<p><code>webConsoleClient.getPreferences(prefs, onResponse)</code> を使用することもできます。<code>prefs</code> 引数は、名前で値を取得したい設定の配列です。</p>
+
+<h3 id="プライベートブラウジング">プライベートブラウジング</h3>
+
+<p>ブラウザコンソールは、ユーザーがプライベートウィンドウを開いているときに使用できます。各ページエラー、コンソール API メッセージ、およびネットワークリクエストにはプライベートフラグが付いています。プライベートメッセージは、最後のプライベートウィンドウが閉じられるたびにクリアされます。コンソールアクタは <code>lastPrivateContextExited</code> 通知を提供します。</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console19",
+  "type": "lastPrivateContextExited"
+}
+</pre>
+
+<p>この通知はクライアントがグローバルコンソールアクターに接続されている場合にのみ送信され、タブコンソールアクターには意味をなしません。</p>
+
+<div class="note">
+<p>この通知は Firefox 24 で導入されました。</p>
+</div>
+
+<h3 id="HTTP_リクエストの送信">HTTP リクエストの送信</h3>
+
+<p>Firefox 25 から、コンソールアクタを使用して HTTP リクエストを送信することができます：</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "sendHTTPRequest",
+  "request": {
+    "url": "http://localhost",
+    "method": "GET",
+    "headers": [
+      {
+        name: "Header-name",
+        value: "header value",
+      },
+      // ...
+    ],
+  },
+}
+</pre>
+
+<p>レスポンスパケットは、ネットワークイベントアクターグリップです。</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "eventActor": {
+    "actor": "conn0.netEvent14",
+    "startedDateTime": "2013-08-26T19:50:03.699Z",
+    "url": "http://localhost",
+    "method": "GET"
+    "isXHR": true,
+    "private": false
+  }
+}
+</pre>
+
+<p><code>webConsoleClient.sendHTTPRequest(request, onResponse)</code> メソッドを使用することもできます。<code>request</code> 引数は上記のリクエストパケットの <code>request</code> オブジェクトと同じです。</p>
+
+<h2 id="ページエラー">ページエラー</h2>
+
+<p>ページエラーは <a href="/ja/docs/XPCOM_Interface_Reference/nsIConsoleService" title="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService"><code>nsIConsoleService</code></a> から発生します。許可される各ページエラーは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIScriptError" title="/en-US/docs/XPCOM_Interface_Reference/nsIScriptError"><code>nsIScriptError</code></a> オブジェクトです。</p>
+
+<p><code>pageError</code> パケットは次のとおりです。</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console9",
+  "type": "pageError",
+  "pageError": {
+    "errorMessage": "ReferenceError: foo is not defined",
+    "sourceName": "http://localhost/~mihai/mozilla/test.js",
+    "lineText": "",
+    "lineNumber": 6,
+    "columnNumber": 0,
+    "category": "content javascript",
+    "timeStamp": 1347294508210,
+    "error": false,
+    "warning": false,
+    "exception": true,
+    "strict": false,
+    "private": false,
+  }
+}
+</pre>
+
+<p>単純化のため、パケットは <code>nsIScriptError</code> に似ています。いくつかの不必要なプロパティを削除し、フラグの働きを変更しました。</p>
+
+<p><code>private</code> フラグは、エラーがプライベートウィンドウ/タブ (Firefox 24で追加されたもの) から来たものかどうかを示します。</p>
+
+<p>Firefox 24 以降、文字列が非常に長い場合、<code>errorMessage</code> および <code>lineText</code> プロパティは長い文字列アクターグリップになることがあります。</p>
+
+<h2 id="Console_API_メッセージ">Console API メッセージ</h2>
+
+<p><a href="/ja/docs/Web/API/console"><code>window.console</code> API</a> 呼び出しは、Gecko を通して内部メッセージを送信します。これにより、各呼び出しに必要な処理を実行できます。Web コンソールのアクターは、これらのメッセージをリモートデバッグクライアントに送信します。</p>
+
+<p><a href="https://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/debugger/server/dbg-script-actors.js" title="https://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/debugger/server/dbg-script-actors.js">dbg-script-actors.js</a> の <code>ObjectActor</code> を <code>ThreadActor</code> なしで使用すると、ページスクリプトの速度低下を避けることができます。デバッガはターゲットページで JavaScript の実行を非最適化します。Web コンソールの<a href="https://searchfox.org/mozilla-central/source/devtools/docs/backend/protocol.md">オブジェクトアクタの有効期間</a>は、デバッガ内のこれらのオブジェクトの存続期間とは異なります。通常、一時停止またはスレッドごとです。 Web コンソールは <code>ObjectActors</code> の有効期間を手動で管理します。</p>
+
+<div class="warning">
+<p>Firefox 23以前は、プロトコルを通じてJavaScriptオブジェクトを操作するために、別のアクタ<code>(WebConsoleObjectActor</code>)を使用しました。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=783499">bug 783499</a>では、デバッガから<code>ObjectActor</code>を再利用するためにいくつかの変更を行いました。</p>
+</div>
+
+<p>コンソール API メッセージは <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIObserverService" title="/en-US/docs/XPCOM_Interface_Reference/nsIObserverService"><code>nsIObserverService</code></a> を経由します。コンソールオブジェクトの実装は <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js" title="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js"><code>dom/base/ConsoleAPI.js</code></a> にあります。</p>
+
+<p>サーバーで受信したコンソールメッセージごとに、次の <code>consoleAPICall</code> パケットをクライアントに送信します。</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console9",
+  "type": "consoleAPICall",
+  "message": {
+    "level": "error",
+    "filename": "http://localhost/~mihai/mozilla/test.html",
+    "lineNumber": 149,
+    "functionName": "",
+    "timeStamp": 1347302713771,
+    "private": false,
+    "arguments": [
+      "error omg aloha ",
+      {
+        "type": "object",
+        "className": "HTMLBodyElement",
+        "actor": "conn0.consoleObj20"
+      },
+      " 960 739 3.141592653589793 %a",
+      "zuzu",
+      { "type": "null" },
+      { "type": "undefined" }
+    ]
+  }
+}
+</pre>
+
+<p>ページエラーを送信する方法と同様に、ここでは <code>nsIObserverService</code> から受信した実際のコンソールイベントを送信します。<code>arguments</code> の配列を変更します - 引数として渡される各オブジェクトの <code>ObjectActor</code> インスタンスを作成し、最後に不要なプロパティ (ウィンドウIDなど) を削除します。長い文字列の場合、<code>LongStringActor</code> を使用します。Web コンソールは引き数を検査できます。</p>
+
+<p><code>private</code> フラグは、コンソール API 呼び出しがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来ているかどうかを示します。</p>
+
+<p>オブザーバーサービスから受け取ったコンソールイベントオブジェクトには小さな違いがあるように、コンソール API 呼び出しメソッドに応じて、オブジェクトの小さなバリエーションがあります。これらの相違点を確認するには、コンソール API 実装の <a href="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js" title="http://mxr.mozilla.org/mozilla-central/source/dom/base/ConsoleAPI.js">dom/base/ConsoleAPI.js</a> を参照してください。</p>
+
+<h3 id="JavaScript_評価">JavaScript 評価</h3>
+
+<h4 id="evaluateJS_リクエストとレスポンスパケット"><code>evaluateJS</code> リクエストとレスポンスパケット</h4>
+
+<p>Web コンソールクライアントは <code>evaluateJS(requestId, string, onResponse)</code> メソッドを提供し、次のパケットを送信します。</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "evaluateJS",
+  "text": "document",
+  "bindObjectActor": null,
+  "frameActor": null,
+  "url": null,
+  "selectedNodeActor": null,
+}
+</pre>
+
+<p><code>bindObjectActor</code> プロパティは、<code>Debugger.Object</code> を指すオプションの <code>ObjectActor</code> IDです。このオプションを使用すると、文字列の評価中に <code>_self</code> を指定されたオブジェクトアクターの <code>Debugger.Object</code> にバインドできます。バインディングについては <a href="/ja/docs/Tools/Debugger-API/Debugger.Object"><code>evalInGlobalWithBindings()</code></a> を参照してください。</p>
+
+<div class="note">
+<p>変数ビューはオブジェクトを更新する必要があり、表示されている<code>ObjectActor</code>の<code>Debugger.Object</code>に<code>_self</code>をバインドすることによってオブジェクトを更新する必要があります。 そのため、変数ビューは評価のために次のような文字列を送信します。</p>
+
+<pre class="brush:js;">  _self["prop"] = value;
+</pre>
+</div>
+
+<p><code>frameActor</code> プロパティは、オプションの <code>FrameActor</code> IDです。FAは <a href="/ja/docs/Tools/Debugger-API/Debugger.Frame"><code>Debugger.Frame</code></a> への参照を保持します。このオプションを使用すると指定された FA のフレーム内の文字列を評価できます。</p>
+
+<p><code>url</code> プロパティはスクリプトを評価するためのオプションの URL です(Firefox 25 の新機能)。評価のためのデフォルトのソース URL は "debugger eval code" です。</p>
+
+<p><code>selectedNodeActor</code> プロパティはオプションの <code>NodeActor</code> ID であり、Inspector で現在選択されているノードがある場合はそのノードを示すために使用されます。この <code>NodeActor</code> は <code>$0</code> JSTerm ヘルパーによって参照できます。</p>
+
+<p>レスポンスパケット：</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console9",
+  "input": "document",
+  "result": {
+    "type": "object",
+    "className": "HTMLDocument",
+    "actor": "conn0.consoleObj20"
+    "extensible": true,
+    "frozen": false,
+    "sealed": false
+  },
+  "timestamp": 1347306273605,
+  "exception": null,
+  "exceptionMessage": null,
+  "helperResult": null
+}
+</pre>
+
+<ul>
+ <li><code>exception</code> は、評価中にスローされた例外の JSON-ification を保持します。</li>
+ <li><code>exceptionMessage</code> は <code>exception.toString()</code> の結果を保持します。</li>
+ <li><code>result</code> は結果の <code>ObjectActor</code> インスタンスを保持します。</li>
+ <li><code>helperResult</code> は JSTerm ヘルパーの結果、JSON のもの (コンテンツオブジェクトではありません) から来るものです。</li>
+</ul>
+
+<div class="warning">
+<p>Firefox 23では、プロトコルエラーが発生したときに使用されるデフォルトプロパティとの競合を避けるために、<code>error</code>および<code>errorMessage</code>プロパティの名前をそれぞれ<code>exception</code>および<code>exceptionMessage</code>に変更しました。</p>
+</div>
+
+<h3 id="Autocomplete_など">Autocomplete など</h3>
+
+<p><code>autocomplete</code> リクエストパケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.console9",
+  "type": "autocomplete",
+  "text": "d",
+  "cursor": 1
+}
+</pre>
+
+<p>レスポンスパケット:</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console9",
+  "matches": [
+    "decodeURI",
+    "decodeURIComponent",
+    "defaultStatus",
+    "devicePixelRatio",
+    "disableExternalCapture",
+    "dispatchEvent",
+    "doMyXHR",
+    "document",
+    "dump"
+  ],
+  "matchProp": "d"
+}
+</pre>
+
+<p>また、レスポンスがない <code>clearMessagesCache</code> リクエストパケットもあります。これにより、コンソール API コールキャッシュがクリアされ、ページエラーキャッシュがクリアされるはずです。<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717611">バグ 717611</a> を参照してください。</p>
+
+<h2 id="ネットワークロギング">ネットワークロギング</h2>
+
+<h3 id="networkEvent_パケット"><code>networkEvent</code> パケット</h3>
+
+<p>新しいネットワークリクエストがログに記録されるたびに <code>networkEvent</code> パケットが送信されます。</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console10",
+  "type": "networkEvent",
+  "eventActor": {
+    "actor": "conn0.netEvent14",
+    "startedDateTime": "2012-09-17T19:50:03.699Z",
+    "url": "http://localhost/~mihai/mozilla/test2.css",
+    "method": "GET"
+    "isXHR": false,
+    "private": false
+  }
+}
+</pre>
+
+<p>このパケットは Web コンソールに新しいネットワークイベントを通知するために使用されます。リクエストごとに新しい <code>NetworkEventActor</code> インスタンスが作成されます。<code>isXHR</code> フラグはリクエストが <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> インスタンスを介して開始されたかどうかを示します。つまり、<a href="/ja/docs/XPCOM_Interface_Reference/nsIHttpChannel">nsIHttpChannel</a> の通知は <a href="/ja/docs/XPCOM_Interface_Reference/nsIXMLHttpRequest">nsIXMLHttpRequest</a> インターフェイスです。</p>
+
+<p><code>private</code> フラグは、ネットワークリクエストがプライベートウィンドウ/タブ (Firefox 24 で追加されたもの) から来たものかどうかを示します。</p>
+
+<h3 id="NetworkEventActor"><code>NetworkEventActor</code></h3>
+
+<p>新しいネットワークイベントアクターは、さらにリクエストおよびレスポンス情報を格納します。</p>
+
+<h4 id="networkEventUpdate_パケット"><code>networkEventUpdate</code> パケット</h4>
+
+<p>変更が発生したとき、新しいものが追加されたときに Web コンソール UI を最新の状態に保つ必要があります。この目的のために新しい <code>networkEventUpdate</code> パケットが送信されます。例：</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "requestHeaders",
+  "headers": 10,
+  "headersSize": 425
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "requestCookies",
+  "cookies": 0
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "requestPostData",
+  "dataSize": 1024,
+  "discardRequestBody": false
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "responseStart",
+  "response": {
+    "httpVersion": "HTTP/1.1",
+    "status": "304",
+    "statusText": "Not Modified",
+    "headersSize": 194,
+    "discardResponseBody": true
+  }
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "eventTimings",
+  "totalTime": 1
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "responseHeaders",
+  "headers": 6,
+  "headersSize": 194
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "responseCookies",
+  "cookies": 0
+},
+{
+  "from": "conn0.netEvent14",
+  "type": "networkEventUpdate",
+  "updateType": "responseContent",
+  "mimeType": "text/css",
+  "contentSize": 0,
+  "discardResponseBody": true
+}
+</pre>
+
+<p>実際のヘッダー、Cookie、および本文は送信されません。</p>
+
+<h4 id="getRequestHeaders_とその他のパケット"><code>getRequestHeaders</code> とその他のパケット</h4>
+
+<p>ネットワークイベントの詳細については、次のパケットリクエスト (およびレスポンス) を使用できます。</p>
+
+<p><code>getRequestHeaders</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getRequestHeaders"
+}
+{
+  "from": "conn0.netEvent15",
+  "headers": [
+    {
+      "name": "Host",
+      "value": "localhost"
+    }, ...
+  ],
+  "headersSize": 350
+}
+</pre>
+
+<p><code>getRequestCookies</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getRequestCookies"
+}
+{
+  "from": "conn0.netEvent15",
+  "cookies": []
+}
+</pre>
+
+<p><code>getResponseHeaders</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getResponseHeaders"
+}
+{
+  "from": "conn0.netEvent15",
+  "headers": [
+    {
+      "name": "Date",
+      "value": "Mon, 17 Sep 2012 20:05:27 GMT"
+    }, ...
+  ],
+  "headersSize": 320
+}
+</pre>
+
+<p><code>getResponseCookies</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getResponseCookies"
+}
+{
+  "from": "conn0.netEvent15",
+  "cookies": []
+}
+</pre>
+
+<div class="note">
+<p>Firefox19より提供開始：上記のパケットのすべてのヘッダーとCookieの値に対して、値が非常に長い場合は<a href="https://wiki.mozilla.org/Remote_Debugging_Protocol#Objects" title="https://wiki.mozilla.org/Remote_Debugging_Protocol#Objects"><code>LongStringActor</code> grips</a>を使用します。 これにより、ネットワーク帯域幅の使い過ぎを避けることができます。</p>
+</div>
+
+<p><code>getRequestPostData</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getRequestPostData"
+}
+{
+  "from": "conn0.netEvent15",
+  "postData": { text: "foobar" },
+  "postDataDiscarded": false
+}</pre>
+
+<p><code>getResponseContent</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getResponseContent"
+}
+{
+  "from": "conn0.netEvent15",
+  "content": {
+    "mimeType": "text/css",
+    "text": "\n@import \"test.css\";\n\n.foobar { color: green }\n\n"
+  },
+  "contentDiscarded": false
+}
+</pre>
+
+<p>リクエストとレスポンスの内容のテキスト値は、LongStringActorグリップを使用して最も一般的に送信されます。 非常に短いリクエスト/レスポンスのボディについては、生のテキストを送信します。</p>
+
+<div class="note">
+<p>Firefox19から：非テキストレスポンスタイプの場合、Base64エンコーディング（これはおそらく<code>LongStringActor</code>グリップです）でコンテンツを送信します。違いを伝えるには、<code>response.content.encoding == "base64"</code>かどうかを確認してください。</p>
+</div>
+
+<p><code>getEventTimings</code> パケット:</p>
+
+<pre class="brush:json;">{
+  "to": "conn0.netEvent15",
+  "type": "getEventTimings"
+}
+{
+  "from": "conn0.netEvent15",
+  "timings": {
+    "blocked": 0,
+    "dns": 0,
+    "connect": 0,
+    "send": 0,
+    "wait": 16,
+    "receive": 0
+  },
+  "totalTime": 16
+}
+</pre>
+
+<h3 id="fileActivity_パケット"><code>fileActivity</code> パケット</h3>
+
+<p>ファイルのロードが監視されると、次の <code>fileActivity</code> パケットがクライアントに送信されます。</p>
+
+<pre class="brush:json;">{
+  "from": "conn0.console9",
+  "type": "fileActivity",
+  "uri": "file:///home/mihai/public_html/mozilla/test2.css"
+}
+</pre>
+
+<h2 id="ヒストリー">ヒストリー</h2>
+
+<p>Firefoxバージョンによるプロトコルの変更：</p>
+
+<ul>
+ <li>Firefox 18: 初期バージョン。</li>
+ <li>Firefox 19: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=787981" title="https://bugzilla.mozilla.org/show_bug.cgi?id=787981">bug 787981</a> - いくつかの場所で <code>LongStringActor</code> の使用法を追加しました。</li>
+ <li>Firefox 20: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=792062" title="https://bugzilla.mozilla.org/show_bug.cgi?id=792062">bug 792062</a> - removed <code>locationChanged</code> packet and updated the <code>tabNavigated</code> packet for tab actors.</li>
+ <li>Firefox 23: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=783499">bug 783499</a> - removed the <code>WebConsoleObjectActor</code>. Now the Web Console uses the JavaScript debugger API and the <code>ObjectActor</code>.</li>
+ <li>Firefox 23: added the <code>bindObjectActor</code> and <code>frameActor</code> options to the <code>evaluateJS</code> request packet.</li>
+ <li>Firefox 24: new <code>private</code> flags for the console actor notifications, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=874061">bug 874061</a>. Also added the <code>lastPrivateContextExited</code> notification for the global console actor.</li>
+ <li>Firefox 24: new <code>isXHR</code> flag for the <code>networkEvent</code> notification, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=859046">bug 859046</a>.</li>
+ <li>Firefox 24: removed the <code>message</code> property from the <code>pageError</code> packet notification, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=877773">bug 877773</a>. The <code>lineText</code> and <code>errorMessage</code> properties can be long string actors now.</li>
+ <li>Firefox 25: added the <code>url</code> option to the <code>evaluateJS</code> request packet.</li>
+ <li>Firefox 25: added the <code>getPreferences</code> and <code>sendHTTPRequest</code> request packets to the console actor, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886067" title="Bug 886067 - Netmonitor displays request sizes as '0 KB' after opening Console">bug 886067</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=731311" title="Bug 731311 - Network monitor should allow to replay and edit requests">bug 731311</a>.</li>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>この文書の執筆時点では、この文書は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768096" title="https://bugzilla.mozilla.org/show_bug.cgi?id=768096">バグ 768096</a> で行った作業とそれに続く変更をまとめたものです。このドキュメントを最新の状態に保つよう努めています。これがあなたの役立つことを願っています。</p>
+
+<p>Webコンソールサーバーを変更する場合は、このドキュメントを更新してください。 ありがとうございました！</p>
diff --git a/files/ja/tools/web_console/rich_output/index.html b/files/ja/tools/web_console/rich_output/index.html
new file mode 100644
index 0000000000..385586dd91
--- /dev/null
+++ b/files/ja/tools/web_console/rich_output/index.html
@@ -0,0 +1,75 @@
+---
+title: 高度な出力
+slug: Tools/Web_Console/Rich_output
+translation_of: Tools/Web_Console/Rich_output
+---
+<div>{{ToolsSidebar}}</div><p>ウェブコンソールでオブジェクトを出力する際は、オブジェクト名だけでなく、より高度な情報も表示します。特に、以下のような情報です:</p>
+
+<ul>
+ <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">特定の型について追加情報を提供</a></li>
+ <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Examining_object_properties">オブジェクトのプロパティを詳しく調査</a></li>
+ <li><a href="/ja/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">DOM 要素の詳細情報を提供、およびインスペクターで要素の選択が可能</a></li>
+</ul>
+
+<h2 id="Type-specific_rich_output" name="Type-specific_rich_output">型に固有の高度な出力</h2>
+
+<p>ウェブコンソールでは以下のように、さまざまなオブジェクト型について高度な情報を提供します:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Object</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Array</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Date</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Promise</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Firefox 36 の新機能</p>
+    </div>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>RegExp</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Window</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Document</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Element</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Event</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examining_object_properties" name="Examining_object_properties">オブジェクトのプロパティを調査</h2>
+
+<p>オブジェクトをコンソールに出力すると、斜体で表示します。それをクリックすると、オブジェクトの詳細情報を表示している新たなパネルが現れます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;"><kbd>Esc</kbd> を押下すると、このパネルを閉じます。</p>
+
+<h2 id="Highlighting_and_inspecting_DOM_nodes" name="Highlighting_and_inspecting_DOM_nodes">DOM ノードのハイライト表示と調査</h2>
+
+<p>コンソールに出力された DOM 要素にマウスポインターを乗せると、そのノードをページ上でハイライト表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">上のスクリーンショットでは、コンソールの出力領域でノードの隣に "標的" のアイコンがあります。このアイコンをクリックすると、そのノードを選択した <a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> に切り替わります。</p>
diff --git a/files/ja/tools/web_console/split_console/index.html b/files/ja/tools/web_console/split_console/index.html
new file mode 100644
index 0000000000..69ca618a7e
--- /dev/null
+++ b/files/ja/tools/web_console/split_console/index.html
@@ -0,0 +1,26 @@
+---
+title: コンソールの常時表示
+slug: Tools/Web_Console/Split_console
+translation_of: Tools/Web_Console/Split_console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>コンソールを別のツールと並べて使用できます。ツールボックスで別のツールを使用しているときに <kbd>Esc</kbd> キーまたは <a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールバー</a> の "コンソールの常時表示を切り替えます" ボタンを押下してください。ツールボックスが分割表示されて元のツールが上段、ウェブコンソールが下段に表示されます。</p>
+
+<p> </p>
+
+<p><kbd>Esc</kbd> をもう一度押すか、「スプリットコンソールを隠す」メニューコマンドを選択して、スプリットコンソールを閉じることができます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p>
+
+<p> </p>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>通常のコンソールと同様に、<code>$0</code> はインスペクターで選択している要素のショートハンドとして働きます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p>
+
+<p>デバッガでスプリットコンソールを使用するとき、コンソールのスコープは現在実行中のスタックフレームになります。よって関数内でブレークポイントに当たった場合、コンソールのスコープは関数のスコープになります。関数内で定義したオブジェクトのオートコンプリートが可能であり、実行中にそれらを簡単に変更できます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p>
diff --git a/files/ja/tools/web_console/the_command_line_interpreter/index.html b/files/ja/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..45c0958db4
--- /dev/null
+++ b/files/ja/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,123 @@
+---
+title: コマンドラインインタープリター
+slug: Tools/Web_Console/The_command_line_interpreter
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>ウェブコンソールのコマンドラインで、JavaScript の構文を即座に評価することができます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13280/console-cli.png" style="display: block; height: 296px; margin-left: auto; margin-right: auto; width: 877px;"></p>
+
+<h2 id="Entering_expressions" name="Entering_expressions">式を入力する</h2>
+
+<p>式の入力方法は、コマンドラインに入力して <kbd>Enter</kbd> を押下するだけです。複数行の式を入力する場合は、<kbd>Enter</kbd> の代わりに <kbd>Shift</kbd>+<kbd>Enter</kbd> を使用します。</p>
+
+<p>入力した式をメッセージ表示ウィンドウにエコー出力して、その後に結果を出力します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="geckoVersionNote">Firefox 47 の新機能</div>
+
+<p>Firefox 47 より、<kbd>Enter</kbd> を押下したときに入力が完了していないと思われる場合は、<kbd>Shift</kbd>+<kbd>Enter</kbd> として扱い、入力を完了できるようになりました。</p>
+
+<p>例えば、以下のように入力します:</p>
+
+<pre class="brush: js">function foo() {</pre>
+
+<p>そして <kbd>Enter</kbd> を押下すると、コンソールは直ちに入力内容を実行せずに <kbd>Shift</kbd>+<kbd>Enter</kbd> を押下したかのように動作しますので、関数定義の入力を完了できます。</p>
+
+<h2 id="Accessing_variables" name="Accessing_variables">変数にアクセスする</h2>
+
+<p>ページで定義している変数にアクセスすることができ、<code>window</code> のように組み込み済みの変数と <code>jQuery</code> のように JavaScript で追加した変数のどちらでも可能です:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Autocomplete" name="Autocomplete">オートコンプリート</h2>
+
+<p>コマンドラインにオートコンプリート機能があります。最初の数文字を入力すると、考えられる完成形を示すポップアップを表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">候補を受け入れるには <kbd>Enter</kbd> または <kbd>Tab</kbd> を押下します。また上/下矢印キーで別の候補へ移動できます。どの候補も望まない場合は入力を続けてください。</p>
+
+<p>コンソールは、現在実行中のスタックフレームのスコープから候補を提示します。これにより関数内でブレークポイントに当たった場合は、関数内のローカルオブジェクトもオートコンプリートの対象になります。</p>
+
+<p>配列要素向けのオートコンプリート候補も表示します:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Defining_variables" name="Defining_variables">変数を定義する</h2>
+
+<p>独自の変数を定義したり、その変数にアクセスしたりできます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Command_history" name="Command_history">コマンド履歴</h2>
+
+<p>コマンドラインは、あなたが入力したコマンドを覚えています: 上下矢印キーで、履歴を行き来できます。</p>
+
+<p>Firefox 39 より、この履歴はセッションをまたいで維持するようになりました。履歴をクリアするには、<code>clearHistory()</code> <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">支援コマンド</a> を使用してください。</p>
+
+<h2 id="Working_with_iframes" name="Working_with_iframes">iframe で作業する</h2>
+
+<p>ページに <a href="/ja/docs/Web/HTML/Element/iframe">インラインフレーム</a> を埋め込んでいる場合は、<code>cd()</code> コマンドで特定のインラインフレームにコンソールのスコープを切り替えることができます。また、インラインフレームで表示しているドキュメントで定義した関数を実行できます。<code>cd()</code> でインラインフレームを選択する方法は 3 通りあります:</p>
+
+<p>インラインフレームの DOM 要素を渡すことができます:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>インラインフレームにマッチする CSS セレクターを渡すことができます:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>インラインフレームの window グローバルオブジェクトを渡すことができます:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>トップレベルの window にコンテキストを戻す場合は、引数を与えずに <code>cd()</code> を呼び出してください:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>例えば、インラインフレームを埋め込んだドキュメントがあるものとします:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>インラインフレームで新たな関数を定義しています:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>以下のようにしてコンテキストをインラインフレームに切り替えることができます:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>グローバル window の document がインラインフレームであることがわかります:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">また、インラインフレーム内で定義した関数を呼び出すことができます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Helper_commands" name="Helper_commands">支援コマンド</h2>
+
+<p>{{page("/ja/Using_the_Web_Console/Helpers", "The commands")}}</p>