極めろ！！Google Chrome Devtools 52の関節技 (original) (raw)

転職ナビのフロントエンドを担当しています、@sueshinです。
Livesense - 関 Advent Calendar 2017、22件目をお送りします。
どうぞ宜しくお願いします。

はじめに

フロントエンドでよく注目されるJavaScriptではなく、
地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。

免責事項

52の関節技！！

Elements

1.hover時のコンポーネントのCSSルールを表示

hover時のコンポーネントのCSSルールを表示

使い方
①DOM要素を選択
②Stylesペインを開く
③:hovをクリック
④hoverフィルタを適用

2.対応するCSSファイルを開く

対応するCSSファイルを開く

使い方
①DOM要素を選択
②Stylesペインを開く
③ルールの右側にあるファイル名をクリック

3.ボックスモデルを表示してライブ編集

ボックスモデルを表示してライブ編集

使い方
①DOM要素を選択
②Computedペインを開く
③任意の値をクリック

4.スタイルのライブ編集で値を0.1刻みで変更する

スタイルのライブ編集で値を0.1刻みで変更する

使い方
①DOM要素を選択
②Stylesペインを開く
③任意の値をクリック
④optionを押しながら矢印キーをクリック

※shiftを押しながらだと、10px刻みになります。

5.カラーピッカーで色を変更する

カラーピッカーで色を変更する

使い方
①DOM要素を選択
②Stylesペインを開く
③色付きの正方形をクリック

6.transition-timing-functionをGUIで調整

transition-timing-functionをGUIで調整

使い方
①DOM要素を選択
②Stylesペインを開く
③プロパティ値左の正方形をクリック

7.最終的に適用されているCSSを表示

最終的に適用されているCSSを表示

使い方
①DOM要素を選択
②Computedペインを開く

8.パンくずで親要素をたどる

パンくずで親要素をたどる

使い方
①ノードをクリック
②パンくずリストをクリック

9.DOMの変更を検知

DOMの変更を検知

使い方
①DOM要素を選択
②右クリックして監視したいブレークポイントを設定
③JavaScriptで任意の操作

※サブツリーの変更、属性の変更、ノードの削除に紐付けられます。

10.DOM要素に登録されているイベントリスナーを確認

DOM要素に登録されているイベントリスナーを確認

使い方
①DOM要素を選択
②Event Listenersペインを開く

11.DOM要素の祖先に登録されているイベントリスナーを含めて確認

DOM要素の祖先に登録されているイベントリスナーを含めて確認

使い方
①DOM要素を選択
②Event Listenersペインを開く
③Ancestorsチェックボックスをクリック

12.jQueryなどで定義した関数の宣言場所を調べる

jQueryなどで定義した関数の宣言場所を調べる

使い方
①DOM要素を選択
②Event Listenersペインを開く
③Framework Linstenersチェックボックスをクリック

13.DOMノードをドラッグで移動

DOMノードをドラッグで移動

使い方
①ノードをクリック
②ドラッグする

14.宣言毎にコメントアウト

宣言毎にコメントアウト

使い方
①DOM要素を選択
②Stylesペインを開く
③Stylesペインをhoverする
④チェックボックスを押下

Console

15.リロードしてもコンソールの履歴を保持する

リロードしてもコンソールの履歴を保持する

使い方
①歯車アイコンを押下
②preserve logのチェックボックスをクリック

16.iframe内のDOMを操作する

iframe内のDOMを操作する

使い方
①iframe要素を選択
②実行コンテキスト(画像ではcdn.api.b.hatena.n...)がtop以外になっていることを確認
③任意のJavaScriptを実行

17.コンソールメッセージにタイムスタンプを表示

コンソールメッセージにタイムスタンプを表示

使い方
①歯車アイコンをクリック
②show timestampsのチェックボックスをクリック

18.コンソールからElementsパネルのエレメントを指定

コンソールからElementsパネルのエレメントを指定

使い方
①inspect()の引数に任意のDOM要素を指定

19.Elementsパネルで指定した要素をコンソールで取得

Elementsパネルで指定した要素をコンソールで取得

使い方
①コンソールで$0と入力

20.表形式でオブジェクトを表示する

表形式でオブジェクトを表示する

使い方
①console.table()の引数に任意のオブジェクトを指定

21. リスト形式でオブジェクトを表示する

リスト形式でオブジェクトを表示する

使い方
①console.dir()の引数に任意のオブジェクトを指定

22.履歴をクリア

履歴をクリア

使い方
①コンソールでclear();と入力

Sources

23.コードを自動整形

コードを自動整形

使い方
①任意のJavaScriptコードを開く
②{}を押下

24.ブレークポイントを使ってデバッグ

読み込み途中のオブジェクトの状態を確認

使い方
①確認したい行番号をクリック
②該当行のJavaScriptを実行する

25.読み込んだファイルを開く

読み込んだファイルを開く

使い方
①cmd + oで入力フォームを表示
②任意のファイル名を選択

Network

26.ネットワークアクティビティを記録

ネットワークアクティビティを記録

使い方
①Networkパネルを開いた状態でリロード

27.Filmstrip(表示箇所のスクリーンショット)を時間毎に取得

Filmstrip(表示箇所のスクリーンショット)を時間毎に取得

使い方
①カメラアイコンをクリック
②リロード

28.HTTPヘッダーを表示

HTTPヘッダーを表示

使い方
①リソース名をクリック
②Headersタブを選択

29.リソースのプレビューを表示

リソースのプレビューを表示

使い方
①リソース名をクリック
②Previewタブを選択

30.リソース依存関係を表示

リソース依存関係を表示

使い方
①shiftを押しながらリソース名をhoverする

31.列見出しを追加

列見出しを追加

使い方
①列見出し上で右クリック

32.各リソースを2行で表示

各リソースを2行で表示

使い方
①アイコン(Use large request rows)をクリック

33.各リソースを読み込みにかかった時間順に並び替え

各リソースを読み込み時間順に並び替え

使い方
①列見出し上で右クリック
②WaterfallのTotal Durationをクリック

34.リソースを種類ごとにフィルタリング

リソースを種類ごとにフィルタリング

使い方
①Filterボタンをクリック
②フィルタリングしたい種類のテキスト名をクリック

35.ファイルサイズを指定してフィルタリング

ファイルサイズを指定してフィルタリング

使い方
①Filterボタンをクリック
②表示されてテキストボックスにlarger-than:10kと入力

36.ネットワーク速度を変える

ネットワーク速度を変える

使い方
①パネル上部の矢印をクリック
②任意の値を選択

37.キャッシュを無効にする

キャッシュを無効にする

使い方
①Disable cacheチェックボックスをクリック

Performance

38.Filmstrip(表示箇所のスクリーンショット)を時間毎に取得

Filmstrip(表示箇所のスクリーンショット)を時間毎に取得

使い方
①Screenshotsチェックボックスを押下
②記録開始

39.読み込み時のパフォーマンス情報を取得

読み込み時のパフォーマンス情報を取得

使い方
①左上のアイコンを押下し、画面を再読込

40.ペイントプロファイラを表示

ペイントプロファイラを表示

使い方
①右上の歯車アイコンを押下
②Enable advanced paint instrumentationチェックボックスをクリック
③パフォーマンス情報を再取得
④paintをクリック
⑤paint profilerタブを開く

Application

41.Cookie情報を編集

Cookie情報を編集

使い方
①Cookies横の矢印をクリック
②任意のドメイン名をダブルクリック
③任意の値をダブルクリック

42. Cookie情報を削除

Cookie情報を削除

使い方
①Cookies横の矢印をクリック
②任意のドメイン名を右クリック
③Clearを選択

Audits

43.主要コンテンツの表示速度を表示

主要コンテンツの表示速度を表示

使い方
①Perform an auditをクリック
②Run Auditをクリック
③Performanceアイコンをクリック

Other

44.フルスクリーンショットをとる

フルスクリーンショットをとる

使い方
①cmd + shift + pで入力フォームを表示
②Capture fullと入力

45.コンポーネントのキャプチャーをとる

コンポーネントのキャプチャーをとる

使い方
①DOM要素を選択
②cmd + shift + pで入力フォームを表示
③Capture nodeと入力

46.fpsメーターを表示

fpsメーターを表示

使い方
①escクリック
②左のメニューボタンからRenderingを選択
③FPS meterのチェックボックスをクリック

47.画面上の描画をハイライト表示

画面上の描画をハイライト表示

使い方
①escクリック
②左のメニューボタンからRenderingを選択
③Paint flashingのチェックボックスをクリック

48.アニメーションのデバッグ

アニメーションのデバッグ

使い方
①escクリック
②左のメニューボタンからAnimationsを選択
③アニメーションを実行

Device Mode

49.スマートフォンのデバイスを変更してシミュレート

スマートフォンのデバイスを変更してシミュレート

使い方
①左上のスマートフォンアイコンをクリック
②リロード
③デバイス名をクリック

50.スマホのデバッグでマシンパワーを変えてみる

スマホのデバッグでマシンパワーを変えてみる

使い方
①左上のスマートフォンアイコンをクリック
②リロード
③Onlineをクリック

51.エミュレート対象のデバイスを追加

エミュレート対象のデバイスを追加

使い方
①?を入力し、Settingsを開く
②Devicesをクリック
③任意のデバイス名を選択

52.デバイスピクセル比を変更

デバイスピクセル比を変更

使い方
①左上のスマートフォンアイコンをクリック
②リロード
③メニューアイコンをクリック
④Add device pixel ratioを選択

あとがき

テーマは「関」ときいて「52の関節技」を思いつき、執筆を頑張ったのですが、
出来上がってみるとネタとの関連がわかりにくい、ただ長いだけの記事になってしまいました(・ω<) てへぺろ
この辺が今の僕にとっての関の山かもしれません。
長文にお付き合いいただきまして、ありがとうございました。
来年はもっと頑張りたいです(・∀・)
元ネタをご存知の方、マッスルエンジニアはいいねを押してくれると幸いですmm
良いお年を！！

参考

Chrome DevTools | Tools for Web Developers | Google Developers