Chrome Development Tools Manage app storage

Manage app storage space

The Resources panel allows you to examine the local resources of your application, including IndexedDB, Web SQL Database, Local and Session storage, cookies, and application cache resources. You can also quickly visually examine app resources, including pictures, fonts, and style sheets.

IndexedDB

You can review the storage status and related pages of your IndexedDB database and objects with an object storage record, and you can clear the records stored by the object.

• To see a list of available databases, expand the IndexedDB directory.
• To see the storage status of a database object, select it in the list of available databases.

If you view the object storage as a page, click the Previous or Next Page button. You can also select the starting page of a record by specifying the key of the record.

If you want to clear the object store, there are two ways:

• Use the buttons at the bottom of the panel.
• Right-click or hold Control and tap the object store and select Clear in the Context menu.

To view the properties of the database, select it in the list of databases.

Web SQL

You can examine the contents of the Web SQL database and use SQL commands on it.

• To browse the available web SQL databases, expand the web SQL options in a tree structure.
• To browse the tables available in the database, expand the database subshus.
• To browse the record of the table, select the table. Its properties are displayed in the panel on the right.
• To refresh the view of the database, click the refresh button at the bottom of the panel.

You can use SQL commands to execute queries to the Web SQL database, and you can view the results of queries in a table format. When you enter a command or table name, DevTools provides code hints to tell you the supported SQL commands and statements, as well as the names of all the tables contained in the database.

If you want to execute SQL commands on a database:

1. Select the database that contains the tables you want to query.
2. Under the prompts that appear in the right panel, enter the SQL statement you want to execute.

Cookies

The cookies resource tab allows you to view the details of cookies created by http headers or JavaScript. You can clear individual cookies under a particular domain name, or all cookies.

When you expand the cookies directory, it displays a list of domain names under the main document and the framework for all loads. S electing one of the Frame Groups displays all of its cookies, including all the resources in that framework. This grouping has two areas to note:

• Cookies from different domain names may appear in a group.
• The same cookie may appear in several groups.

Cookies in selected groups display the following fields:

• Name - The name of the cookie.
• Value - The value of the cookie.
• Domain - The domain name used by the cookie.
• Path - The path corresponding to the cookie.
• Expires / Maximum Age - The expiration time, or maximum life cycle, of cookies. For session cookies, this field is always "Session."
• Size - A cookie contains the size of the data, in bytes.
• HTTP - If displayed, cookies should only be used over HTTP and JavaScript cannot modify them.
• Secure - If shown, communications indicating the cookie can only be transmitted if encrypted.

You can clear (delete) a single cookie, all cookies in a selected group, or all cookies under a particular domain name. If the same cookie under a given domain name is referenced by two groups, deleting all cookies under that domain name affects both groups.

To clear a single cookie, you can choose one of two options:

• Select a cookie in the table and click the delete button at the bottom of the panel.
• Right-click on a cookie and select Delete.

There are several ways to clear all cookies in a particular group:

• Click the clear button at the bottom of the resource panel.
• Right-click on the frame group and select Clear in the menu.
• Right-click on a row of cookies in the table and select Clear All.

To clear all cookies under a particular domain name:

• Right-click on the keyboard and click (or Ctrl-click) a cookie in a table for a specific domain name.
• In the context menu, select Clear All from domain, which refers to the target domain name.

Be aware of the following for this operation:

• Only cookies under the exact same domain name are deleted;
• This applies only to domain names that are visible in the cookies table.

You can also refresh the table to see how the page cookies change.

To refresh the cookie table, click the refresh button at the bottom of the resource panel.

Apply the cache

You can examine Chrome's cached resources, which are determined by the app cache manifest file indicated in the current document. Y ou can view the current state of the program app cache (for example, idle or download status), as well as the browser's connection status. (online or offline)

Loaded resources are displayed as tables, each of which contains the following properties:

• Resource - The URL of the resource.
• Type - The type of resource that has been loaded and may contain the following values:
  • Master - The resource is placed in the cache because the resource was added to the cache because its manifest attribute indicated that this was its cache.
  • Explici - This resource is explicitly listed on the app cache manifest.
  • Network - The resource is listed as a network access point on the app cache manifest.
  • Fallback - Is specified as fallback if the resource is ind accessible.
• Size - The size of the cached resource.

The Resources panel uses icons of different colors (green, yellow, red) to display the current status of the app cache. The status values that may appear in the next interview and the corresponding description:

State	Describe
Free	The app cache is idle
Check	Loading profile and checking for updates
Download	The resource inventory has changed and new resources are being downloaded and added to the cache
Update preparation	The new version of the app cache is ready for use
Expired	The app cache group has expired

Local and session storage

The local and session storage panels allow you to browse, edit, create, and delete local and session storage key pairs created using the Web Storage API.

To remove key-value pairs, you can do so in one of the following ways:

• Select the data in the table, and then do one of the following:
  1. Click the Delete button.
  2. Press the keyboard's delete key.
• Right-click or hold Control and tap the data item and select Delete.

To add a key value pair:

• Double-click the empty row in the key table and enter the name of the key.
• Double-click the corresponding value in the row and enter the value corresponding to the key.

To edit an existing key-value pair, take one of the following actions:

• Double-click the position you want to edit.
• Right-click or hold Control and tap the data you want to edit and select Edit.

To refresh the data in the table, click the refresh button at the bottom of the panel.

Check the page resources

You can view the resources of the main document, including pictures, scripts, fonts, and all add-ons. The top-level directory of page resources is the document item, including the primary document, as well as nested items.

You can expand an item to view resources organized by type, expand a type to see all resources of that type, and select a resource to preview its status in the right panel. Here's a preview of a font resource:

The picture preview includes information such as dimensions, file size, MIME type, and picture URL.

Tip:

• To open a resource in the network panel, right-click or hold Control and tap the resource and select Reveal In Resources Panel. In this menu, you can copy the URL of the resource to the system's clipboard or open it in a new tab.

• To see the boundaries of the corresponding box model in nested items, hover over an item in the resource panel.