内容紹介

【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　ショートカット早見表