Chromeデベロッパーツールメモ
date: 2015/07/22時点
version: 43.0.2357.134 m
- 要素を選択して右クリックでDOM要素に対してブレークポイントを設定できる
- 要素のサブツリーが変更されたとき
- 要素の属性が変更されたとき
- 要素が削除されたとき
- カラーピッカーを選択した状態で、画面にカーソルを持ってくると虫眼鏡が表示され色を拾える
カラーピッカーはstyleで色の付いたcssの■を選択すると表示される
- jsを編集して
ctrl+sをすることで動的に書き換えることができる - ページロード以外のイベントや、一旦falseして確認したいときなどに使えそう
- watchパネルに変数を入れておくことで、現時点でのデータ状況が確認できる
- Call Stackパネルで関数の中に関数が含まれている場合の動きが分かる
- Scopeパネルで現時点でのアクセスできる変数関数が分かる
- XHR Breakpointsパネルで、指定した文字列を含むURLにリクエストが飛んだとき
- $0でElementsタブで選択している要素を取得できる
- getEventListner($0)
- $($0).jquerymethod() などで便利！
console画面は、ElementsタブやSourcesタブと同時に実行できる（下に開ける）
- ステップ実行で動作の確認
- Scopeパネルで変数の値をチェック
- Consoleでメソッド呼び出し
ブレークしている行で実行できるメソッドのみが実行できる そのため、その時点でメソッドを呼び出そうとするとどうなるかが分かる