◆ Chrome のコマンドライン API 紹介
◆ コンソールの REPL でだけ使える関数
◆ dir でHTML 要素をみたり $, $$ でquerySelector したり  

Chrome のコンソールでコードを実行すると↓のような with に囲まれて実行されます
with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) {
// ここにREPLに打ったコードが入る
}
__commandLineAPI というものが使えるようになってます

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

$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])
}

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]
こういう風に取れます
JavaScript の標準機能にほしいほどに便利なものです
これがないと無名関数でセットしたリスナの解除ができないんですよね
自分で on メソッド作って内部に持たせて off でそれを使ってお手軽除去できるようにしたりすることもありますが 自分が作ったとこ以外だとそういうこともできないですし

dirdirxml は 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 モードで中断される

undebug は debug でデバッグモード実行するように設定した関数を元に戻します

copy はクリップボードにコピーしてくれます
配列やオブジェクトの場合はインデントを付けて見やすくしてくれます


使えそうなものは一通り書きましたがもっと詳しく知りたいならリファレンスへどうぞ
https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference