Инспектор Хранилища

Инспектор хранилища позволяет проверить различные типы хранилищ, которые веб-страница может использовать. В настоящее время он может быть использован для проверки следующих типов хранения:

• Кэш хранилищ (новое в Firefox 47) - любых DOM кэшей созданных с помощью Cache API.
• Cookies - Всех  cookies, созданных для страниц или элементов iframe внутри страниц.
  Cookies, созданных как часть ответа для сетевых вызовов лишь на время работы ресурса.
• Local Storage - Всех local storage элементов  страниц или элементов iframe внутри страниц.
• Session Storage - Всех session storage элементов страниц или элементов iframe внутри страниц.
• IndexedDB - Всех IndexedDB баз данных, созданных по странице, каких-либо элементов iframe внутри страниц, их объектов и элементов.

На данный момент, инспектор хранения дает представление только для чтения памяти. Но мы работаем, чтобы позволить вам редактировать содержимое хранилища в будущих выпусках.

Открыть инспектор хранилища

После включения вы можете открыть "Storage Inspector" из Web Developer подменю в Firefox панели (Tools меню  на Mac), или нажатием клавиш Shift + F9.

Toolbox инспектора активируется в нижней части окна браузера. Называется просто "Storage" в Developer Toolbox.

Storage Inspector User Interface

The Storage Inspector UI is split into three main components:

• Storage tree
• Table Widget
• Sidebar

Storage tree

The storage tree lists all the storage types that the Storage Inspector can inspect:

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "https://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

IndexedDB objects are organized by origin, then by database name, then by object store name:

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

Table Widget

The table widget is the place where all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

Starting in Firefox 47, there's a search box at the top of the Table Widget:

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

Cache Storage

Under the Cache Storage type you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

• the URL for the resource
• the status code for the request that was made to fetch it.

Cookies

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

• Name - The name of the cookie
• Path - The path property of the cookie
• Domain - The domain of the cookie
• Expires On - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"
• Created On - When the cookie was created
• Last Accessed On - When the cookie was last read
• Value - The value of the cookie
• isDomain - Is this cookie a domain cookie: that is, the domain value starts with a "."
• isSecure - Is this cookie a secure cookie
• isHttpOnly - Is this cookie http only.

Local storage / Session storage

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

You can manipulate the storage in the Web Console with the Storage API methods.

IndexedDB

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

• Database Name - The name of the database
• Origin - Its origin
• Version - The database version
• Object Stores - Number of object stores in the database

When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:

• Object Store Name - The name of the object store
• Key - The keyPath property of the object store.
• Auto Increment - Whether auto increment is enabled
• Indexes - Array of indexes present in the object store as shown below

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

An IndexedDB database can be deleted via its context menu. If the IndexedDB cannot be deleted (most commonly when there are still active connections to the database), a warning message will be displayed in the Storage Inspector to make it clear what the situation is:

Sidebar

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example, a stringified JSON like '{"foo": "bar"}' is shown as the origin JSON {foo: "bar"}, a key separated value like 1~2~3~4 is shown like an array [1, 2, 3, 4]. Below are a few screenshots giving examples of different types of parsed values:

A stringified JSON being shown as the original JSON in the parsed value section of the sidebar

A string containing key-value pairs being shown as JSON in the parsed value section of the sidebar

A string containing key separated values being shown as an Array in the parsed value section of the sidebar

Editing storage items

Starting in Firefox 48 you can edit storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

You can edit cookies, local storage, and session storage entries. You can edit the names of entries as well as the values.

You can also delete cookies, local storage, and session storage entries using the context menu: