3.3 ユーティリティ関数

要素選択関数

$0 〜 $4：選択履歴

Elementsパネルで選択した要素を参照できる。

// Elementsで要素を選択した状態で
$0
// → <div class="container">...</div>

$0.textContent
// → 選択要素のテキスト内容

$0.style.backgroundColor = 'yellow'
// → 選択要素の背景色を変更

// 選択要素のスタイルを確認
getComputedStyle($0)

// 選択要素のイベントリスナーを確認
getEventListeners($0)

$() と $$()：セレクタ関数

// 最初のh1要素を取得
$('h1')
// → <h1>ページタイトル</h1>

// すべてのリンクを取得（配列）
$$('a')
// → [<a>...</a>, <a>...</a>, ...]

// すべてのリンクのhrefを取得
$$('a').map(a => a.href)

// 特定クラスの要素数をカウント
$$('.item').length

// 画像のsrcをすべて取得
$$('img').map(img => img.src)

$x()：XPathセレクタ

XPath式で要素を検索。CSSセレクタでは難しい複雑な条件での検索に有用。

// テキストを含む要素を検索
$x("//p[contains(text(), '重要')]")

// 特定の属性値を持つ要素
$x("//a[@target='_blank']")

// 親要素からの相対検索
$x("//div[@class='container']//span")

検査・表示関数

inspect()：要素を検査

指定した要素をElementsパネルで開く。

// 要素をElementsパネルで開く
inspect($('header'))

// 関数をSourcesパネルで開く
inspect(myFunction)

dir()：オブジェクトのプロパティ一覧

console.log()がHTMLとして表示するのに対し、dir()はJavaScriptオブジェクトとして表示。

// DOM要素のプロパティを一覧表示
dir($0)

// console.logとの違いを確認
console.log(document.body)  // → HTML表示
dir(document.body)          // → オブジェクト表示

dirxml()：DOM要素をXML/HTML表示

// XML/HTMLとして表示
dirxml(document.body)

table()：テーブル形式で表示

// 配列をテーブル表示
table([
    {name: 'Alice', age: 25},
    {name: 'Bob', age: 30}
])

// すべてのリンクをテーブル表示
table($$('a'), ['href', 'textContent'])

keys() と values()

// オブジェクトのキー一覧
keys({a: 1, b: 2, c: 3})
// → ['a', 'b', 'c']

// オブジェクトの値一覧
values({a: 1, b: 2, c: 3})
// → [1, 2, 3]

クリップボード操作

copy()：クリップボードにコピー

任意の値をクリップボードにコピー。オブジェクトはJSON形式で整形される。

// 文字列をコピー
copy('Hello, World!')

// オブジェクトをJSONとしてコピー
copy({name: 'Test', value: 123})

// 選択要素のHTMLをコピー
copy($0.outerHTML)

// すべてのリンクURLをコピー
copy($$('a').map(a => a.href).join('\\n'))

// APIレスポンスをコピー
copy(await (await fetch('/api/data')).json())

監視・追跡関数

monitor() / unmonitor()：関数呼び出しの監視

指定した関数が呼び出されるたびに、引数と共にログ出力される。

// 関数の監視を開始
function greet(name) {
    return `Hello, ${name}!`;
}

monitor(greet)

greet('Alice')
// → function greet called with arguments: Alice
// → 'Hello, Alice!'

// 監視を解除
unmonitor(greet)

monitorEvents() / unmonitorEvents()：イベントの監視

要素で発生するイベントを監視。

// すべてのイベントを監視
monitorEvents($0)

// 特定のイベントのみ監視
monitorEvents($0, 'click')

// 複数のイベントを監視
monitorEvents($0, ['click', 'mouseenter', 'mouseleave'])

// イベントカテゴリで監視
monitorEvents($0, 'mouse')  // マウス関連すべて
monitorEvents($0, 'key')    // キーボード関連すべて

// 監視を解除
unmonitorEvents($0)

getEventListeners()：登録済みイベントリスナー

要素に登録されているイベントリスナーを確認。

// 選択要素のイベントリスナー
getEventListeners($0)

// 特定のイベントタイプのリスナー
getEventListeners($0).click

// リスナー関数の内容を確認
getEventListeners($0).click[0].listener

デバッグ支援関数

debug() / undebug()：関数にブレークポイント

指定した関数の先頭で自動的に停止。

// 関数にブレークポイントを設定
debug(myFunction)

// ブレークポイントを解除
undebug(myFunction)

$_：直前の式の結果

直前に評価した式の結果を参照。

2 + 3
// → 5

$_ * 10
// → 50

// 複雑な処理の結果を再利用
$$('a').map(a => a.href)
$_.filter(url => url.includes('https'))

queryObjects()：特定クラスのインスタンス検索

メモリ上の特定コンストラクタのインスタンスを検索。メモリリークの調査に有用。

// Promiseのインスタンスをすべて取得
queryObjects(Promise)

// カスタムクラスのインスタンス
class MyClass {}
const obj1 = new MyClass()
const obj2 = new MyClass()
queryObjects(MyClass)
// → [MyClass, MyClass]

クリア関数

clear()：Consoleをクリア

clear()

profile() / profileEnd()：パフォーマンスプロファイル

// プロファイル開始
profile('My Profile')

// 計測したい処理
for (let i = 0; i < 10000; i++) {
    // 処理
}

// プロファイル終了
profileEnd('My Profile')

実践的な活用例

ページ内の全画像URLを取得

copy($$('img').map(img => img.src).join('\\n'))

フォームの入力値をすべて取得

table($$('input').map(input => ({
    name: input.name,
    type: input.type,
    value: input.value
})))

特定のテキストを含む要素をハイライト

$$('*').filter(el => 
    el.textContent.includes('エラー')
).forEach(el => {
    el.style.outline = '2px solid red'
})

ページ内のすべてのイベントリスナーを調査

$$('*').forEach(el => {
    const listeners = getEventListeners(el)
    if (Object.keys(listeners).length > 0) {
        console.log(el, listeners)
    }
})

localStorageの内容をJSON出力

copy(JSON.stringify(
    Object.fromEntries(
        Object.keys(localStorage).map(k => [k, localStorage.getItem(k)])
    ),
    null, 2
))