Chorme Developer Toolで知ったこと

たまには趣味の話ではなく、
仕事に関係したお話。

先日から社内メンバーに向けたセミナーの準備をしているわけですが、
とは言ってもWeb開発者歴1年半。
まだまだ知っていることより、知らなきゃいけないことのほうが多くあります。

過去には端末開発がメインであったため、言語を複数使う機会と言うのは滅多になく、
Androidが開発されてから複数言語(C,C++,Java)を使うことが多くなりました。

とは言ってもAndroidの言語は横割り。
C→C++→Javaの右から左へデータを渡すだけだったので、あまり非同期的に考えることはなく、
あってもスレッドがあるかないか見ればなんとかなる状態でした。

しかしWebにはそのような考えが少なく、すべてユーザーによるイベントに始まるという感覚が強いです。

普通にHTMLしか知らなかったYutanp少年はJavaScriptなるものに触れ驚愕しました。

「なんでタグが勝手に追加されるの!?」

はい、前置きが長いですね。
そこで今回はChrome Developer Toolを使用してDOMの制御について調べています。
あ、もちろん今はJavaScriptは使えますよ。上の文書はあくまでも「前置き」です。

調べてびっくりしたのは、
普通にJavaScriptのコードに対してBreakPointを貼るのはできることは知っていました。

指定した要素を右クリックすると以下の選択肢が有りました。

chrome_dev

  • Subtree modifications
  • Attributes modifications
  • Node removal

???

コード以外にも特定の要素が変わった時にもBreakpointが張れる!!

それぞれ日本語に訳すと

  • 要素内に変更があった時にブレーク
  • 要素の属性に変更があった時にブレーク
  • 要素が取り除かれた時にブレーク

と、い・う・こ・と・は!

ボタンを押した時に要素が変わってしまった時でも!
時間が立って要素が変化してしまった時でも!
コードの内容を把握していなくてもBreakpointが張れて、なおかつどのコードのどこで実施されているかもわかるということですね

なんて素晴らしい。
なんでChromeさん日本語で教えてくれなかったの・・・

今まではそれらしいコードのあらゆるところにBreakpointを張って、
Try and Errorを繰り返していたのは過去のこと。

ちなみに
・要素内に変更があった時にブレーク
とは、
よく在りがちなのはボタンを押したら画像がニュって出てきたり、
入力フォームでパスワード入力したらその場で一致してないですよってメッセージが挿入されたりするやつです。
(CSSでdisplay:none;がblock;になるのは別)

・要素の属性に変更があった時にブレーク
とは、
検索窓でテキスト入力した時や、
マウスをリンクに載せた時などです。
(CSSのhoverとは別)

・要素が取り除かれた時にブレーク
とは、
そのままの通り、もともと表示されていた要素が消える。
(CSSでdisplay:block;がnone;になるのは別)

更に、要素が変更されてしまうのはわかったけど、
ロードの時に読み込まれて追加されてしまう広告などは・・・

心配ありません!!

スクリーンショット 2014-11-24 20.25.46

別タブにある「Source」を選択し、右下にあるEvent Listener BreakpointからLoadを選択すると
Loadされたタイミングで自動でBreakします。
なお、非同期処理もあるかと思うのでEvent Listener Breakpointの上のほうにCall Stackという欄の右側に
「Async」とあるのでチェックを入れておくと良いです。

はい。そんな感じでかなりバクっとした内容ですが参考になればと思います。

このエントリーをはてなブックマークに追加