1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: Inspetor de Armazenamento
slug: Tools/Inspetor_de_armazenamento
tags:
- Armazenamento
- Armazenamento Local
- Armazenamento da Sessão
- BD Indexada
- Cookies
- Ferramentas
- Ferramentas do Programador
- Firefox
- Guia(2)
translation_of: Tools/Storage_Inspector
---
<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
<p>The Storage Inspector is disabled by default. Enable it in the <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p>
</div>
<p>The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:</p>
<ul>
<li><em>Cache Storage</em> - any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li>
<li><em>Cookies</em> - All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li>
<li><em>Local Storage</em> - All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li>
<li><em>Session Storage</em> - All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li>
<li><em>IndexedDB</em> - All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li>
</ul>
<p>For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.</p>
<h2 id="Abrir_o_Inspetor_de_Armazenamento">Abrir o Inspetor de Armazenamento</h2>
<p>Once enabled, you can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Shift + F9 keyboard shortcut.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p>
<h2 id="Interface_do_Utilizador_do_Inspetor_de_Armazenamento">Interface do Utilizador do Inspetor de Armazenamento</h2>
<p>The Storage Inspector UI is split into three main components:</p>
<ul>
<li><a href="#storage-tree">Árvore de armazenamento</a></li>
<li><a href="#table-widget">Table Widget</a></li>
<li><a href="#sidebar">Barra lateral</a></li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p>
<h3 id="Árvore_de_armazenamento"><a name="storage-tree">Árvore de armazenamento</a></h3>
<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p>
<p>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, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p>
<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p>
<p>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.</p>
<p>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.</p>
<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h3 id="Procura">Procura</h3>
<p>There's a search box at the top of the Table Widget:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p>
<p>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.</p>
<p>From Firefox 50 onwards, you can use Ctrl+F (Cmd+F on a Mac) to focus the search box.</p>
<h3 id="Barra_lateral"><a name="sidebar">Barra lateral</a></h3>
<p>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.</p>
<p>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:</p>
<ul>
<li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li>
<li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li>
<li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li>
</ul>
<p>The shown values can also be filtered using the search box at the top of the sidebar.</p>
<h2 id="Cache_de_Armazenamento">Cache de Armazenamento</h2>
<p>Under the Cache Storage type you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p>
<ul>
<li>the URL for the resource</li>
<li>the status code for the request that was made to fetch it.</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h2 id="Cookies">Cookies</h2>
<p>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 widget. The table then has the following columns:</p>
<ul>
<li><em>Name</em> - The name of the cookie</li>
<li><em>Path</em> - The path property of the cookie</li>
<li><em>Domain</em> - The domain of the cookie</li>
<li><em>Expires on</em> - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li>
<li><em>Last accessed on</em> - When the cookie was last read</li>
<li><em>Value</em> - The value of the cookie</li>
<li><em>HostOnly</em> - Is this cookie a domain cookie: that is, the domain value starts with a "."</li>
<li><em>Secure</em> - Is this cookie a secure cookie</li>
<li><em>HttpOnly</em> - Is this cookie HTTP only.</li>
</ul>
<div class="note">
<p><strong>Note:</strong> Before Firefox 51 the columns <em>HostOnly</em>, <em>Secure</em> and <em>HttpOnly</em> were called <em>isDomain</em>, <em>isSecure</em> and <em>isHttpOnly</em>.</p>
</div>
<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain.</p>
<p>You can also delete cookies using the context menu:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h2 id="Armazenamento_local_Armazenamento_da_sessão">Armazenamento local / Armazenamento da sessão</h2>
<p>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.</p>
<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p>
<p>{{EmbedYouTube("oeQzhpoMByw")}}</p>
<p>You can also delete local storage and session storage entries using the context menu:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<h2 id="BD_Indexada">BD Indexada</h2>
<p>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:</p>
<ul>
<li><em>Database Name</em> - The name of the database</li>
<li><em>Storage</em> - The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database (new in Firefox 53)</li>
<li><em>Origin</em> - Its origin</li>
<li><em>Version</em> - The database version</li>
<li><em>Object Stores</em> - Number of object stores in the database</li>
</ul>
<p>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:</p>
<ul>
<li><em>Object Store Name</em> - The name of the object store</li>
<li><em>Key</em> - The keyPath property of the object store.</li>
<li><em>Auto Increment</em> - Whether auto increment is enabled</li>
<li><em>Indexes</em> - Array of indexes present in the object store as shown below</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>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.</p>
<p>From Firefox 49 onwards, you can delete an IndexedDB database using the context menu in the Storage tree view:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p>
<p>From Firefox 50 onwards, you can use the context menu in the table widget to delete all items in an object store, or a particular item:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p> </p>
|
