Help us understand the problem. What is going on with this article?

極めろ!!Google Chrome Devtools 52の関節技

More than 1 year has passed since last update.

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

はじめに

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

免責事項

  • ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。
  • Chromeのバージョンは63系に基づいて紹介しています。

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

sueshin
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした