目次

はじめに
画像について
動作保証環境について
表記について
免責事項
底本について

第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 パネル

はじめに

　「Chrome Developer Tools 入門」を⼿に取っていただきありがとうございます。

　本書は、これからWebサイト／Webサービスを開発する初学者をはじめとして、普段から開発に関わっているデザイナー、エンジニア向けの本です。基本的なデベロッパーツールの使い方から、意外と見落としがちな便利機能を紹介しています。お役にたてば幸いです。

画像について

　本書で使われている画像（スクリーンショット、画像内で使われているソース）は、実在するGoogleのWebサービスを元に作成したものです。

動作保証環境について

　・Mac

　　─OS 10.14.1

　　─Google Chrome バージョン：71.0.3578.98

　・Windows

　　─OS 8.1

　　─Google Chrome バージョン：71.0.3578.98

　本書では執筆時点の最新バージョンであるChrome 71をベースに紹介します。そのため、お使いのChromeと実装されている機能やインターフェースが異なる可能性があります。

　また、Chromeと並行して動作しているアプリケーションやChromeに追加済みプラグインがある場合、こちらの指定操作で動かない可能性があります。ご了承ください。

表記について

　本書では「Chrome Developer Tools」のことを「デベロッパーツール」と省略して表記しています。

　また、本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、筆者はいかなる責任も負いません。

底本について

　本書籍は、技術系同人誌即売会「技術書典5」で頒布されたものを底本としています。

試し読みはここまでです。
この続きは、製品版でお楽しみください。