path: root/files/ja/tools/web_console/helpers/index.html

---
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>