こんにちは。佐藤です。
今回はGoogle Web Developersで使える便利なコマンドラインAPIの使い方についてです。
ConsoleパネルのコマンドラインAPI、みなさん使ってますか？
自分は全然この辺り使いこなしてなかったので、ちょっと感動しました。
今回はこちらの３つのポイントについて紹介していきます。
$_の使い方$0 〜 $4の使い方$0の使用例
$_ の使い方
$_ は最後に評価された式の値を返します。
以下の例を見ると、最後の計算結果が常に保存されていることがわかるかと思います。
$0〜$4 の使い方
$0, $1, $2, $3, $4 はそれぞれElementsパネル内で選択されたDOM要素が保存されています。
直前に選択したものは$0
その前に選択していたものは$1
というように最大で5つ前の要素まで呼び出すことができます。
以下の例で確認してみましょう。
最初にaタグ を選択したので$0 にはaタグ の情報が入っています。
その次にh1タグ を選択すると$0 にはh1タグ の情報が入り、$1 には1つ前に選択していたaタグ の情報が入っています。
このように最大5つまで過去に選択した要素を使用することができます。
$0 の使用例
$0 の使い方についてはわかったかと思うんですが、実際どんなときに使うの？という方のために、使用例を1つ紹介しようと思います。
BootstrapのTooltipsを例に使います。
Tooltipsはマウスオーバーしたときに表示され、カーソルが移動したら非表示となります。
なのでTooltipsのCSSを確認したりしようと思っても、確認できないんですね。
そこで$0 を使っていきます。
まずElementsパネルでTooltipsがセットされている要素を選択します。
そしてConsoleパネルで以下を実行します。
$($0).trigger('mouseenter');
これで最後に選択した要素に対して、mouseenterイベントを発火させることができるので、Tooltipsを常に表示することができます。
実際にこちらのページで試してみてください。
Tooltips · Bootstrap
おわりに
最後の使用例で紹介したTooltipsを常に表示する方法を探しているときに、コマンドラインAPIについて初めて知りました。
Google Web Developersはいつも使っているという人でも、このあたりはあまり使っていない人も多いと思うので、これを機に少しでも使ってもらえればいいかなと思います。
そんな自分もまだまだ使いこなせてないので、便利機能をサラッと使えるように精進していきたいです。
参考文献
ありがとうございます！
