Chrome Developer Tools 入門

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

本書はGoogleのブラウザーであるChromeに組み込まれた開発ツール「Chrome Developer Tools」の解説書です。Chrome Developer Toolsの基本的な知識と使い方から、見落としがちな便利な機能、実際の開発現場で役立つTipsまで幅広く紹介しています。
〈本書の対象読者〉
・Webサイト/Webサービスを開発するWebデザイナー
・フロントエンドエンジニア

【目次】
第1章　はじめに
　デベロッパーツール(Chrome Developer Tools)とは
　Google Chrome Canaryとは　他
第2章　inspect（要素の検証）
　要素の検証方法
第3章　Device Mode（デバイスモード）
　デバイスモードの切り替え方法
　メディアクエリを表示する　他
第4章　Elementsパネル
　HTML要素を編集する
　スタイル（CSS）を編集する
　数値のCSSプロパティー値を、キーボードショートカットを駆使して編集する　他
第5章　Consoleパネル
　コンソールを表示する
　コンソール履歴のクリア
　入力履歴をサジェスト表示する　他
第7章　Networkパネル
　キャッシュを無効にする
　オフライン／モバイル環境でWebサイトを読み込む
　ユーザーエージェントを他のブラウザーに変更する　他
第8章　Performanceパネル
　パフォーマンス記録前に押さえておきたいポイント
　ページのパフォーマンス状況の記録／確認
　パフォーマンスに問題のあるコードを探す
第9章　Memoryパネル
　ヒープ領域を解析する
第10章　Applicationパネル
　マニフェストの確認（PWA対応）
　アプリインストールバナーの表示確認（PWA対応）
　Service Workerの確認（PWA対応）　他
第11章　Securityパネル
　Webページが安全かどうかを確認する
　証明書の詳細を確認する
　安全ではないオリジン
第12章　Auditsパネル
　Webページをテストしてパフォーマンス・SEOなどの
第13章　Layersパネル
　Layersパネルを表示させる
　Layersパネルを触ってみる
　Layersパネルの注意点
付録A　Tips集
　ドックの位置を変更する
　コマンドパレットを開く
　FPSメーターを表示する　他
付録B　ショートカット早見表