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

公開日：2014年6月22日
最終更新日：2014年7月13日

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

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

【コンテンツ】

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

Resourcesパネル外観

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

Resourcesパネル外観

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

リソースツリー概要

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

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

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

画像プレビュー

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

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

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

クッキーの確認

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

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

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

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

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

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

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

EditThisCookieタブの追加

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

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

既存データの編集画面

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

既存データの削除画面

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

新規データの追加画面

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

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

WordPress の基礎から応用まで

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

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