この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。
休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。さあ始めましょう！
1. $0
$0はElementsページで現在選択されているhtml nodeを参照します。$1は一つ前に選択されていたもの、$2は更にその1つ前…と続き$4まで存在します。
こうした参照を利用して親戚関係を持たせるような操作を行うこともできます。
(例:$1.appendChild($0))
2. $と$$
コンソールにおける$はdocument.querySelectorメソッド(長い！)を示すものです。
アプリケーションの中で$を変数として定義(例:jQuery)していなくても使用できます。
$$はさらに時間を節約してくれます。これはdocument.QuerySelectorAllを実行するだけでなく、返り値としてNodeListではなくnodeの配列を返すのです。
基本的にはArray.from(document.querySelectorAll('div')) === $$('div')
ということです。とても短くなりましたね！
3. $_
$_変数は最後に評価された表現の結果を参照します。
4. $i
Console ImporterというChrome向けのブラウザ拡張機能を使えば、コンソールで瞬時にnpmライブラリをインポートして遊ぶことができます。
例えば$i('lodash')や$i('moment')を走らせるだけで良いのです。数秒後にはlodash/momentjsが使えるようになります。
今日はここまで。短く、楽しくやっていきましょう。
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください！