試験公開中

このエントリーをはてなブックマークに追加

Chrome Developer Tools 入門

インプレスR&D

1,600円+税

Chrome Developer Toolsがさくっと理解できる解説書!基本的な知識と使い方から、見落としがちな便利な機能、実際の開発現場で役立つTipsまで幅広く紹介しています。

関連サイト

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

内容紹介

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

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

書誌情報

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

対象読者

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 パネル
Home 書籍一覧 Chrome Developer Tools 入門 ▲ ページトップへ戻る