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