DevTools でできること

Chrome DevTools

概要

各種機能

  • Element(s 要素) Web ページの HTML 構造を確認し、各要素を調査 できる
  • Network(ネットワーク) ネットワーク処理の流れと詳細情報を確認できる
  • Source(s ソース) ロードされたリソース(JavaScript、CSS、画像な ど)を確認できる
  • Timeline(タイムライン) ブラウザ内部のイベントの詳細を時系列で確認で きる
  • Profile(s プロファイル)JavaScript による CPU の実行時間やメモリの使用 状況を解析できる
  • Resource(s リソース)Web Storage や Cookie、IndexedDB などの保存 データを確認できる
  • Audit(s 監査) パフォーマンスやネットワーク利用に関して既定 のチェックリストで監査できる
  • Console(コンソール) ログを表示したり、実行中の Web ページで任意 のスクリプトを実行したりできる

実用

使い道

  • DOM 操作のデバッグをブレークポイントで楽にする
  • コンソールは表示中の Web ページのプロンプトで、w から始まる補完候補が列挙。 window と入力して確定すると、ログに windowオブジェクトが表示
  • XMLHttpRequest のログの表示ができる。General メニュー内の ConsoleにあるLog XMLHttpRequestsを 有 効 に す る
  • XMLHttpRequestが実行されたとき、リクエストの送 信先がログとして表示

ConsoleAPI

  • Console APIはさ まざまな機能を提供
  • console.group(label)、console.groupEnd() group が実行されてから、groupEnd が実行され るまでのログ表示をグルーピング
  • console.dir(element) DOM 要素を DOM ツリー表示の代わりにオブジェ クトとしてログ表示
  • console.table(data) オブジェクトや配列を表に整形してログ表示
  • console.time(label)、console.timeEnd(label) time が実行されてから、timeEnd が実行されるま での経過時間をログ表示
  • console.profile(label)、console.profileEnd() profile が実行されてから、profileEnd が実行され るまでの JavaScript プロファイルを Profiles パネル に保存
  • console.timeStamp(label) 実行したタイミングで、Timeline パネルにイベン トを記録する(Timeline パネル実行時のみ有効)
  • debugger コード中に記述すると、その場所でブレークポイ ントが設定される(関数ではなくステートメント)
  • getEventListeners(element) 渡した要素に設定されている複数のイベントリス ナをオブジェクトで返す
  • monitor(func) 渡した関数が呼び出されたときに、使われた引数 と合わせてログ表示
  • monitorEvents(element, event) 渡した要素とイベントの組み合わせが発生したと きに、Event オブジェクトをログ表示