---
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 <enter>" と入力した後に "$_ <enter>" と入力すると、コンソールは 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="/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> を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:</p>
<pre class="brush: js; no-line-numbers notranslate">pprint($("#title"))</pre>
<p>これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。</p>