技術

Google Web Developers便利なコマンドラインAPIの使い方

投稿日:2019年7月14日 更新日:

こんにちは。佐藤です。

今回はGoogle Web Developersで使える便利なコマンドラインAPIの使い方についてです。
ConsoleパネルのコマンドラインAPI、みなさん使ってますか?
自分は全然この辺り使いこなしてなかったので、ちょっと感動しました。

今回はこちらの3つのポイントについて紹介していきます。

  • $_の使い方
  • $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はいつも使っているという人でも、このあたりはあまり使っていない人も多いと思うので、これを機に少しでも使ってもらえればいいかなと思います。

そんな自分もまだまだ使いこなせてないので、便利機能をサラッと使えるように精進していきたいです。

参考文献

ありがとうございます!

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

HTMLエンティティを探すならHTML Arrowsがオススメ!

こんにちは htmlエンティティっていうのを聞いたことがありますか? アンパサン …

[Rails] バージョン上げるときに気をつけること

どうも中田です。 セキュリティ診断とかで引っかかってrailsのバージョンあげた …

no image

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …

no image

ボタンを押した時にEdgeだけ500エラーになる

こんにちは!コーテッグのこやまです。 フロントをAngular、サーバーサイドを …

no image

AWS CLIでInvalidSignatureException Error

ECRにイメージをpushするために、dockerログインしようとして遭遇しまし …