Chrome の __commandLineAPI
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ Chrome のコマンドライン API 紹介
◆ コンソールの REPL でだけ使える関数
◆ dir でHTML 要素をみたり $, $$ でquerySelector したり
◆ コンソールの REPL でだけ使える関数
◆ dir でHTML 要素をみたり $, $$ でquerySelector したり
Chrome のコンソールでコードを実行すると↓のような with に囲まれて実行されます
__commandLineAPI はいまのところこんなのがあります
$0 や $1 というのは開発者ツールの Elements タブで選択した要素が入ります
今選択したところなのが $0 に入っていて 1 つ前は $1 というように 4 つ前まで保存されます
$ は querySelector です
document.querySelector と違って第二引数でどの要素に対して実行するか選べます
省略すると document です
$$ は querySelectorAll です
これも第二引数で親となる要素を指定できます
clear はコンソールのログを綺麗に消してくれます
左上にある「Φ」 を傾けたようなボタンを押したのと一緒です
table や profile などは console のプロパティと一緒だと思います
keys は Object.keys の動作でオブジェクトを渡すと キーの一覧を配列で返してくれます
values は keys のバリュー版です
オブジェクトを渡すと 値の一覧を配列で返してくれます
Object.values はないのでこれでしか使えないと思います
といってもこれだけで作れますけど
getEventListener はなんと登録済みイベントリスナを取得できます
JavaScript の標準機能にほしいほどに便利なものです
これがないと無名関数でセットしたリスナの解除ができないんですよね
自分で on メソッド作って内部に持たせて off でそれを使ってお手軽除去できるようにしたりすることもありますが 自分が作ったとこ以外だとそういうこともできないですし
dir と dirxml は console プロパティと一緒ですが 便利なのでちょっと詳しく
普通に console.log などで表示すると DOM の要素は DOM 要素らしい表示をされて 普通のオブジェクトは中身が見れるように表示されます
一見便利ですが DOM 要素でもオブジェクトとして中身を見たいことがあります
子要素と属性しか見えない表示は辛いです
そこで dir を使います
DOM 要素でも普通のオブジェクトのように表示されます
dirxml を使うといつもの xml 風に表示されます
ただのオブジェクトに dirxml しても普通にオブジェクトの表示です
debug は引数で指定した関数を実行するとデバッグモードになるようにします
console.debug とは別物です
console.debug や console.info は console.log と一緒です
undebug は debug でデバッグモード実行するように設定した関数を元に戻します
copy はクリップボードにコピーしてくれます
配列やオブジェクトの場合はインデントを付けて見やすくしてくれます
使えそうなものは一通り書きましたがもっと詳しく知りたいならリファレンスへどうぞ
https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference
with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) {
// ここにREPLに打ったコードが入る
}
__commandLineAPI というものが使えるようになってます// ここにREPLに打ったコードが入る
}
__commandLineAPI はいまのところこんなのがあります
$: $(selector, [startNode])
get $0: (num)
get $1: (num)
get $2: (num)
get $3: (num)
get $4: (num)
$$: $$(selector, [startNode])
$_: undefined
$x: $x(xpath, [startNode])
clear: clear()
copy: copy(object)
debug: debug(fn)
dir: dir(var_args)
dirxml: dirxml(var_args)
getEventListeners: getEventListeners(node)
inspect: inspect(object)
keys: keys(object)
monitor: monitor(fn)
monitorEvents: monitorEvents(object, [types])
profile: profile([title])
profileEnd: profileEnd([title])
table: table(data, [columns])
undebug: undebug(fn)
unmonitor: unmonitor(fn)
unmonitorEvents: unmonitorEvents(object, [types])
values: values(object)
get $0: (num)
get $1: (num)
get $2: (num)
get $3: (num)
get $4: (num)
$$: $$(selector, [startNode])
$_: undefined
$x: $x(xpath, [startNode])
clear: clear()
copy: copy(object)
debug: debug(fn)
dir: dir(var_args)
dirxml: dirxml(var_args)
getEventListeners: getEventListeners(node)
inspect: inspect(object)
keys: keys(object)
monitor: monitor(fn)
monitorEvents: monitorEvents(object, [types])
profile: profile([title])
profileEnd: profileEnd([title])
table: table(data, [columns])
undebug: undebug(fn)
unmonitor: unmonitor(fn)
unmonitorEvents: unmonitorEvents(object, [types])
values: values(object)
$0 や $1 というのは開発者ツールの Elements タブで選択した要素が入ります
今選択したところなのが $0 に入っていて 1 つ前は $1 というように 4 つ前まで保存されます
$ は querySelector です
document.querySelector と違って第二引数でどの要素に対して実行するか選べます
省略すると document です
$$ は querySelectorAll です
これも第二引数で親となる要素を指定できます
clear はコンソールのログを綺麗に消してくれます
左上にある「Φ」 を傾けたようなボタンを押したのと一緒です
table や profile などは console のプロパティと一緒だと思います
keys は Object.keys の動作でオブジェクトを渡すと キーの一覧を配列で返してくれます
values は keys のバリュー版です
オブジェクトを渡すと 値の一覧を配列で返してくれます
Object.values はないのでこれでしか使えないと思います
といってもこれだけで作れますけど
Object.values = function(obj){
return this.keys(obj).map(e => obj[e])
}
return this.keys(obj).map(e => obj[e])
}
getEventListener はなんと登録済みイベントリスナを取得できます
getEventListeners(window)
Object{}
beforeunload: Array[1]
hashchange: Array[1]
keydown: Array[1]
load: Array[1]
message: Array[4]
pageshow: Array[1]
resize: Array[4]
unload: Array[1]
こういう風に取れますbeforeunload: Array[1]
hashchange: Array[1]
keydown: Array[1]
load: Array[1]
message: Array[4]
pageshow: Array[1]
resize: Array[4]
unload: Array[1]
JavaScript の標準機能にほしいほどに便利なものです
これがないと無名関数でセットしたリスナの解除ができないんですよね
自分で on メソッド作って内部に持たせて off でそれを使ってお手軽除去できるようにしたりすることもありますが 自分が作ったとこ以外だとそういうこともできないですし
dir と dirxml は console プロパティと一緒ですが 便利なのでちょっと詳しく
普通に console.log などで表示すると DOM の要素は DOM 要素らしい表示をされて 普通のオブジェクトは中身が見れるように表示されます
一見便利ですが DOM 要素でもオブジェクトとして中身を見たいことがあります
子要素と属性しか見えない表示は辛いです
console.log({_:document.body})
のようにオブジェクトの中に含める方法もありますが ちょっと面倒ですよねそこで dir を使います
DOM 要素でも普通のオブジェクトのように表示されます
dirxml を使うといつもの xml 風に表示されます
ただのオブジェクトに dirxml しても普通にオブジェクトの表示です
debug は引数で指定した関数を実行するとデバッグモードになるようにします
console.debug とは別物です
console.debug や console.info は console.log と一緒です
function x(){
var a = 1
var b = a + 1
return a
}
x() // 2
debug(x)
x() // x の一行目でブレイクポイントあるように debug モードで中断される
var a = 1
var b = a + 1
return a
}
x() // 2
debug(x)
x() // x の一行目でブレイクポイントあるように debug モードで中断される
undebug は debug でデバッグモード実行するように設定した関数を元に戻します
copy はクリップボードにコピーしてくれます
配列やオブジェクトの場合はインデントを付けて見やすくしてくれます
使えそうなものは一通り書きましたがもっと詳しく知りたいならリファレンスへどうぞ
https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference