2019年7月11日0件のコメントこんにちは、フロント周りを担当しているY.A.です。DevToolsの話です。DevToolsの使い方』というエントリを書いたのですが、結構基本的な内容のみだったので、今回はその発展編を紹介します。比較的小技中心ですが、様々なケースで役に立つと思いますので、ご参考ください。DevToolsの使い方』の内容を理解していることが前提です。任意のJSのscriptを自動実行させたい特定のJSのscriptを確認したい場合、以前の投稿したエントリでも紹介した通り「Console」「Snippets」での確認方法があります。(Consoleの場合)(Snippetsの場合)ただいずれもEnterなど押しての実行が必要です。Expression」を使うと良いでしょう。https://developers.google.com/web/updates/2018/08/devtools#watch具体的な使い方を見てみます。1.「Console」を開きます。(パネルにあるものでも、ドロワーにあるものでもどちらでも大丈夫です。)2.眼のアイコンがありますので、クリックします。入力できるUIが出てきます。3.そこにJSのエクスプレッションを書きます。window.innerWidth1window.innerWidthと入れてみましょう。「740」という値が返ってきています。ここからウィンドウのサイズを変えてみましょう。自動実行されて返ってきている値が「556」に変わっているのが分かります。こちらは名前の通りライブで自動実行し続けます。更新は250ms毎です。Expressionはページがリフレッシュしたり別ページに遷移しても自動実行してくれることです。Expression」で自動的に変化をみたい場合などです。その他グローバルオブジェクトのプロパティの変化について見たい場合などでも、役に立つと思います。Contexts」を利用します。https://developers.google.com/web/tools/chrome-devtools/console/reference#contextここをクリックするとドロップダウンで、window内のtopを含むフレーム一覧で表示されます。これを利用することで任意のiframe内で任意のJSを実行することができます。次のようにすれば、疑似的にそのiframe内でJSのscriptを実行できます。Expression」でもできるとお伝えしましたが、このフレーム選択時も同様に有効に働きます。Expressionに書いた場合)なおこのドロップダウンからframeを選択せずとも、「Elements」パネルより、特定の要素を選択(クリック)する事で、自動的にこのドロップダウンのフレームを切り替えることができます。Contexts」のフレームも切り替わっているのがわかります。topフレームの要素を選択すると再びtopに戻ります。こちらの方がより簡単にターゲットフレームを選択できます。差分確認CSSなどのスタイルをライブ編集した場合、途中からどこの箇所を編集したのか、編集内容を見失ってしまうことがあります。その際には「Changes」パネルを使います。ドロワー(パネルの下に表示される上下分割ペイン)内に「Changes」パネルが無い場合は次の手順で開くことができます。p2.「Changes」を打つこれでドロワーにパネルが表示されます。そこで加えた変更の差分を見ることができます。文字列・ファイル検索ある特定の文字列を検索したい場合は「Search」パネルを使用します。ドロワー(パネルの下に表示される上下分割ペイン)内に「Search」が無い場合は次の手順で開くことができます。p2.「Search」を打つ。これでドロワーにパネルが表示されます。ここで検索ができます。検索した場合の結果が次のように出ます。pでファイル検索できます。ads.jsと言う文字列で検索した場合はこうです。地味かもしれませんが、利用する場面が多いので、とても便利な機能です。イベントリスナーイベントリスナーを確認したい場面で使用します。確認できる方法は2つあります。Listeners」のペインでリスナーを確認できます。https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom#view_element_event_listenersしかし上記スクショを見ると選択した要素以外のイベントリスナーも入っていることが分かると思います。All」にチェックが入っているためです。All」はこの選択した要素の祖先要素のイベントリスナーも表示します。この要素だけのイベントリスナーを表示させたい場合は、チェックを外しましょう。これでこの要素のイベントが特定できました。実際のハンドラを確認したい場合は、イベント名の前の「▶︎」をクリックする事で見る事ができます。(リンクになっており、クリックするとそこにイベントと結びついた処理を見る事ができます。)ただjQueryなどライブラリででイベントを設定している場合、リスナーにはjQueryソースへのリンクが出てくる場合があると思います。上の例もそのような状態になっています。listeners」にチェックを入れることでライブラリを介してイベントを設定している場所を特定することができます。jquery-xxx.xxx.jsへのリンクが、実際にイベントリスナーを設定しているindex.jsへ向くようになりました。BreakpointsElementsパネルからのイベントリスナー確認は、ある程度要素に目星付けられている場合に有効です。手っ取り早く「何かしらページ内でクリックイベントが起きたらbreakしてリスナーを見つけたい」という場面があると思います。breakpoints」を使うと良いでしょう。clickでチェックを入れれば確認ができます。実際にクリックするとブレークします。ご覧の通り、他にもいくつものイベントをまとめて確認する事ができます。最後にこういった便利テクニックは公式ドキュメントはもちろんに載っています。https://twitter.com/chromedevtoolsまた実はこういうデバッグをしたいなら、Firefoxの方が便利というケースもあります。Nightlyの方が個人的には好きです。)FirefoxのDevToolsのTwitterもありますので、併せてフォローしておくと視野が広くなると思います。https://twitter.com/FirefoxDevToolsその他ブレークポイント周りについても紹介したかったのですが、それはまた次回に。記事中掲載している画像キャプチャは、当社サービス「めるも」です。こちらのコンテンツもご参照下さい。@gmoap_engineer本ブログで発信される情報は、各エンジニア個人の見解であり、弊社の公式見解ではありません。本ブログに掲載、引用等をしている商品またはサービス等の名称は、各社の商標または登録商標です。その他の事項について一切責任を負いかねます。発表する情報には注意を払っておりますが、公式発表、見解については、弊社WEBサイトおよびプレスリリースなどをご確認ください。GMOインターネットグループにおけるソーシャルメディア運用ポリシーについては次のページをご確認ください。本ブログに掲載のあるソフトウェアのダウンロードは自己責任で御願い致します。ソフトウェアのダウンロードの結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。本ブログに掲載のあるソフトウェアを扱う際は、各ソフトウェアの公式リファレンスを参照のもとご使用下さい。ソフトウェアの実行の結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。