Chrome デベロッパーツール Resourcesパネルの使い方

Chrome デベロッパーツールのResourcesパネルでは、Webページを構成するリソースファイルや、Cookie/Web Storageなどのデータを確認できます。

具体的には以下の確認が可能です。

  • リソース(Font,Image,Script,Stylesheet)
  • Web SQL Database
  • Indexed DB
  • Web Storage(編集可)
  • Cookie(編集不可)
  • Application Cache

【コンテンツ】

  1. Resourcesパネル外観
  2. リソースを確認する
  3. Cookieを確認・削除する
  4. Web Storageを確認・編集する
  5. Web SQL Database/Indexed DBについて

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

Resourcesパネル外観

Resourcesタブをクリックすると下図のようなパネルが表示されます。
左にツリーが表示され、選択したファイルやデータの内容が右に表示されます。

Resourcesパネル外観

リソースを確認する

ツリーでは、フレームごとにリソースがまとめられています。
リソースには画像(Images)、スクリプト(Scripts)、スタイルシート(Stylesheets)、フォント(Fonts)などがあります。

リソースツリー概要

スクリプトファイルやスタイルシートは、名前を付けてローカルに保存できます。
右クリックして[Save as]を選択します。

リソースファイル保存メニュー

画像は大きさとファイルサイズをプレビューで確認できます。

画像プレビュー

画像ファイルを保存するには、URLの上で右クリックし、[名前を付けてリンク先を保存]を選択します。

画像ファイルの保存メニュー

Cookieを確認・削除する

[Cookies]の下にあるドメインをクリックするとCookie(クッキー)を確認することができます。

クッキーの確認

クッキーは削除することができます。

個別に削除するには、削除するクッキーを選択し、右クリックから[Delete]を選択します。
あるいはクッキー選択後、下にあるDeleteボタンをクリックします。

クッキー個別削除メニュー

すべてのクッキーを削除するには、右クリックから[Clear all]を選択します。
あるいは、下にあるClearボタンをクリックします。

クッキー全部削除メニュー

クッキーは削除できますがデフォルトでは編集することはできません。
クッキーを編集するには拡張機能「EditThisCookie」をインストールする必要があります。

EditThisCookieをインストールすると、ツールバーにタブが現れます。

EditThisCookieタブの追加

Web Storageを確認・編集する

Web Storageには、Local StorageとSession Storageの2種類があります。
Resourcesパネルでは、どちらも確認・編集することができます。
またデータの削除や追加も可能です。

既存データの編集

編集したいKeyまたはValueをダブルクリックして編集します。

既存データの編集画面

既存データの削除

編集したいデータを選択し、以下のいずれかを実行します。

  1. 右クリックからメニューの[Delete]を選択
  2. キーボードのDeleteキーを押下
  3. Deleteボタンをクリック

既存データの削除画面

新規データの追加

テーブルの下の空白部分をクリックして、KeyとValueを入力します。

新規データの追加画面

Web SQL Database/Indexed DBについて

Web SQL DatabaseとIndexed DBは、HTML5の仕様としてW3Cで検討されてきたものですが、Resourcesパネルではどちらも扱うことができます。

ただし、Web SQL Databaseは2010年に仕様廃止となっており、Indexed DBも記事作成時点ではまだ正式勧告になっていません。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ