Your Search Results

    Web Console Helpers

    コマンド

    Web コンソールの JavaScript コマンドラインでは、いくつかの作業を簡単に行うための支援機能を内蔵しています。

    $()
    CSS のセレクタ文字列を探索して、最初にマッチした要素を返します。これは、document.querySelector() と等価です。または、$ 関数がページ内に存在する場合はそれを呼び出します。
    $$()
    CSS のセレクタ文字列を探索し、マッチした DOM ノードのリストを返します。これは document.querySelectorAll() のショートカットです。
    $0
    ページ内で現在調査されている要素です。
    $x()
    XPath の構文を評価して、マッチするノードの配列を返します。
    keys()
    オブジェクトを与えられると、そのオブジェクトのキー (またはプロパティ名) の一覧を返します。これは object.keys のショートカットです。
    values()
    オブジェクトを与えられると、そのオブジェクトの値の一覧を返します。これは keys() と対を成すかたちで役立ちます。
    clear()
    コンソールの出力エリアをクリアします。
    inspect()
    オブジェクトを与えられると、そのオブジェクトのオブジェクトインスペクタを開きます。
    pprint()
    指定された値を、読みやすい形式に整形します。これはオブジェクトや配列の内容をダンプするのに役立ちます。
    help()
    ヘルプを開きます。実際は再帰の面白い例として、このページへ案内します。
    コンテンツからのログ出力について詳しくは、Console API をご覧ください。

    使用例: DOM ノードの内容を閲覧する

    例えば、ID 値 "title" を持つ DOM ノードがあるとします。実際は、今見ているこのページに該当する DOM ノードがありますので、ここで Web コンソールを開いて試してみることができます。

    $() および inspect() を用いて、ノードのコンテンツを確認してみましょう:

    inspect($("#title"))

    自動的にオブジェクトインスペクタが開き、CSS セレクタ "#title" にマッチする DOM ノードの内容を表示します。もちろんそれは、ID が "title" である要素です。

    使用例: DOM ノードの内容をダンプする

    これは、あなたがブラウザ上で起きている問題を調査することになり、ユーザのために遠隔地でデバッグを行うことや、ノードの内容を閲覧する必要があるような場合に役立ちます。ユーザに Web コンソールを開いてもらい、pprint() を用いてノードの内容をログにダンプし、その出力結果をメールにコピー & 貼り付けして送付してもらうことができます:

    pprint($("#title"))
    

    これはノードの内容を読みやすい形式で出力します。もちろん、このコマンドは DOM ノード以外のオブジェクトに対しても役に立ちますので、アイデアを考えてみてください。

    Document Tags and Contributors

    Contributors to this page: saneyuki_s, teoli, ethertank, yyss
    最終更新者: teoli,