Chrome Developer Tools 入門

関連サイト

本書の関連ページが用意されています。

• NextPublishingオフィシャルWebサイト

内容紹介

【Chrome Developer Toolsがさくっと理解できる解説書！】

本書はGoogleのブラウザーであるChromeに組み込まれた開発ツール「Chrome Developer Tools」の解説書です。Chrome Developer Toolsの基本的な知識と使い方から、見落としがちな便利な機能、実際の開発現場で役立つTipsまで幅広く紹介しています。

書誌情報

• 著者: 渋田 美里
• 発行日: 2019-02-01 (紙書籍版発行日: 2019-02-01)
• 最終更新日: 2019-02-01
• バージョン: 1.0.0
• ページ数: 76ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: インプレス NextPublishing

対象読者

Webサイト/Webサービスを開発するWebデザイナー、フロントエンドエンジニア

著者について

渋田 美里

福岡県在住。元Web/UI デザイナー、フロントエンドエンジニア。
Twitter: @mi_upto

目次

目次

はじめに

第1章　はじめに

• 1.1　デベロッパーツール(Chrome Developer Tools)とは
• 1.2　Google Chrome Canaryとは
• 1.3　デベロッパーツールを開く／閉じる
• 1.4　アイコン／パネルの概要

第2章　inspect（要素の検証）

• 2.1　要素の検証方法

第3章　Device Mode（デバイスモード）

• 3.1　デバイスモードの切り替え方法
• 3.2　メディアクエリを表示する
• 3.3　ワンクリックで主要デバイスサイズに画面を変更する

第4章　Elementsパネル

• 4.1　HTML要素を編集する
• 4.2　スタイル（CSS）を編集する
• 4.3　数値のCSSプロパティー値を、キーボードショートカットを駆使して編集する
• 4.4　色のCSSプロパティー値のフォーマットを変更する
• 4.5　カラーパレットを使用した色の変更／追加
• 4.6　カラーピッカーを使用したアクセシビリティのチェック
• 4.7　スタイルの優先順位を確認する
• 4.8　スタイルの影響を受けるHTML要素を確認する
• 4.9　スタイルのライブ編集履歴を表示する
• 4.10　HTML要素の擬似クラスのスタイルを確認する
• 4.11　選択したHTML要素に適用されているCSSクラスの無効化／有効化／追加
• 4.12　選択している要素のスタイルを編集する

第5章　Consoleパネル

• 5.1　コンソールを表示する
• 5.2　コンソール履歴のクリア
• 5.3　入力履歴をサジェスト表示する
• 5.4　ConsoleにXHRリクエストを表示する
• 5.5　コマンドラインAPIの紹介

第6章　Sourcesパネル

• 6.1　クイックファイル切り替え
• 6.2　Webサイトのソースコードを検索
• 6.3　ページ内に存在する関数にジャンプする
• 6.4　ソースコード内の単語を同時選択／編集
• 6.5　ソースコード内でマルチカーソル編集
• 6.6　minify（圧縮）されたコードを読みやすく展開する
• 6.7　JavaScriptにブレークポイントを貼る
• 6.8　Watchで変数の変化を監視する
• 6.9　DOMにブレークポイントを貼る

第7章　Networkパネル

• 7.1　キャッシュを無効にする
• 7.2　オフライン／モバイル環境でWebサイトを読み込む
• 7.3　ユーザーエージェントを他のブラウザーに変更する
• 7.4　サイズが大きいリソースを見つける
• 7.5　ページ読み込み中のスクリーンショットを取得／確認する
• 7.6　ページの読み込み完了時間を確認する
• 7.7　読み込みに時間のかかっているリソースを見つける
• 7.8　XHRのリクエストの種類を分かりやすくする
• 7.9　リソースをフィルターで絞り込む

第8章　Performanceパネル

• 8.1　パフォーマンス記録前に押さえておきたいポイント
• 8.2　ページのパフォーマンス状況の記録／確認
• 8.3　パフォーマンスに問題のあるコードを探す

第9章　Memoryパネル

• 9.1　ヒープ領域を解析する

第10章　Applicationパネル

• 10.1　マニフェストの確認（PWA対応）
• 10.2　アプリインストールバナーの表示確認（PWA対応）
• 10.3　Service Workerの確認（PWA対応）
• 10.4　Push通知のテスト（PWA対応）
• 10.5　BackgroundSync：バックグラウンド同期のテスト（PWA対応）
• 10.6　Storage、Cookieの消去、Service Workerの登録解除
• 10.7　ローカル／セッションストレージで保存されたキー値ペアの確認
• 10.8　IndexedDBで保存されたキー値ペアの確認
• 10.9　Web SQL（廃止）
• 10.10　Cookieの確認
• 10.11　Cache APIを使用して作成したキャッシュの確認
• 10.12　Application Cache（廃止）
• 10.13　読み込まれたリソースをフレームごとに確認する

第11章　Securityパネル

• 11.1　Webページが安全かどうかを確認する
• 11.2　証明書の詳細を確認する
• 11.3　安全ではないオリジン

第12章　Auditsパネル

• 12.1　Webページをテストしてパフォーマンス・SEOなどの評価スコアを表示する

第13章　Layersパネル

• 13.1　Layersパネルを表示させる
• 13.2　Layersパネルを触ってみる
• 13.3　Layersパネルの注意点

付録A　Tips集

• A.1　ドックの位置を変更する
• A.2　コマンドパレットを開く
• A.3　FPSメーターを表示する
• A.4　パフォーマンスモニターを表示する
• A.5　Webページのスクリーンショットを撮って保存する
• A.6　デベロッパーツールをダークテーマに変更する

付録B　ショートカット早見表

• B.1　全パネル共通
• B.2　Elements パネル
• B.3　Styles パネル
• B.4　Console パネル
• B.5　Sources パネル - Debugger 編 -
• B.6　Sources パネル - Text Editor 編 -
• B.7　Performance パネル
• B.8　Memory パネル
• B.9　Layers パネル