技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Local by Flywheelでローカルに本番環境を作るときのエラーを解消する

こんにちは Local by Flywheelはwordpress環境をローカル …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

no image

BitbucketからGithubの移行で、しょうもなくハマる。

こんにちはー。コーテッグのこやまです。 コーテッグはずっとBitbucketを使 …

ブラウザでRailsのrouting設定を確認する

こんにちは Railsでroutingを確認する時、コマンドでrails rou …

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …