CINXE.COM

<!DOCTYPE html> <html class="writer-html5" lang="en" data-content_root="../../"> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Storage Inspector — Firefox Source Docs documentation</title> <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=fa44fd50" /> <link rel="stylesheet" type="text/css" href="../../_static/css/theme.css?v=19f00094" /> <link rel="stylesheet" type="text/css" href="../../_static/graphviz.css?v=fd3f3429" /> <link rel="stylesheet" type="text/css" href="../../_static/copybutton.css?v=76b2166b" /> <link rel="stylesheet" type="text/css" href="../../_static/custom_theme.css?v=dc5ed815" /> <link rel="stylesheet" type="text/css" href="../../_static/design-style.1e8bd061cd6da7fc9cf755528e8ffc24.min.css?v=0a3b3ea7" /> <link rel="shortcut icon" href="../../_static/firefox.ico"/>  <script src="../../_static/jquery.js?v=5d32c60e"></script> <script src="../../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script> <script src="../../_static/documentation_options.js?v=5929fcd5"></script> <script src="../../_static/doctools.js?v=9a2dae69"></script> <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script> <script src="../../_static/clipboard.min.js?v=a7894cd8"></script> <script src="../../_static/copybutton.js?v=30646c52"></script> <script src="../../_static/design-tabs.js?v=36754332"></script> <script src="../../_static/js/theme.js"></script> <link rel="index" title="Index" href="../../genindex.html" /> <link rel="search" title="Search" href="../../search.html" /> </head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="../../index.html" class="icon icon-home"> Firefox Source Docs <img src="../../_static/firefox-wordmark.svg" class="logo" alt="Logo"/> </a><! -- This code is governed by the BSD license --> <div> <h3>Quick search</h3> <script> (function () { var cx = "dd12886298f75dbef"; var gcse = document.createElement("script"); gcse.async = true; gcse.src = "https://cse.google.com/cse.js?cx=" + cx; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> <p class="caption" role="heading"><span class="caption-text">Overview</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../glossary/index.html">A Glossary of Common Terms</a></li> <li class="toctree-l1"><a class="reference internal" href="../../overview/index.html">A Quick Guide to Mozilla Applications</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Getting Started</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../setup/index.html">Getting Set Up To Work On The Firefox Codebase</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Working On Firefox</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../contributing/index.html">Working on Firefox</a></li> <li class="toctree-l1"><a class="reference internal" href="../../bug-mgmt/index.html">Bug Handling</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Firefox User Guide</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../index.html">Firefox DevTools User Docs</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Source Code Documentation</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mots/index.html">Governance</a></li> <li class="toctree-l1"><a class="reference internal" href="../../browser/index.html">Firefox Front-end</a></li> <li class="toctree-l1"><a class="reference internal" href="../../dom/index.html">DOM</a></li> <li class="toctree-l1"><a class="reference internal" href="../../editor/index.html">Editor</a></li> <li class="toctree-l1"><a class="reference internal" href="../../layout/index.html">Style system (CSS) & Layout</a></li> <li class="toctree-l1"><a class="reference internal" href="../../gfx/index.html">Graphics</a></li> <li class="toctree-l1"><a class="reference internal" href="../../ipc/index.html">Processes, Threads and IPC</a></li> <li class="toctree-l1"><a class="reference internal" href="../../devtools/index.html">Firefox DevTools Contributor Docs</a></li> <li class="toctree-l1"><a class="reference internal" href="../../toolkit/index.html">Toolkit</a></li> <li class="toctree-l1"><a class="reference internal" href="../../js/index.html">SpiderMonkey</a></li> <li class="toctree-l1"><a class="reference internal" href="../../jsloader/index.html">JS Loader</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/geckoview/index.html">GeckoView</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/fenix/index.html">Fenix</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/focus-android/index.html">Focus for Android</a></li> <li class="toctree-l1"><a class="reference internal" href="../../dom/bindings/webidl/index.html">WebIDL</a></li> <li class="toctree-l1"><a class="reference internal" href="../../modules/libpref/index.html">libpref</a></li> <li class="toctree-l1"><a class="reference internal" href="../../networking/index.html">Networking</a></li> <li class="toctree-l1"><a class="reference internal" href="../../remote/index.html">Remote Protocols</a></li> <li class="toctree-l1"><a class="reference internal" href="../../services/index.html">Services</a></li> <li class="toctree-l1"><a class="reference internal" href="../../permissions/index.html">Permissions</a></li> <li class="toctree-l1"><a class="reference internal" href="../../uriloader/index.html">File Handling</a></li> <li class="toctree-l1"><a class="reference internal" href="../../widget/cocoa/index.html">Firefox on macOS</a></li> <li class="toctree-l1"><a class="reference internal" href="../../widget/windows/index.html">Firefox on Windows</a></li> <li class="toctree-l1"><a class="reference internal" href="../../toolkit/components/ml/index.html">Firefox AI Runtime</a></li> <li class="toctree-l1"><a class="reference internal" href="../../accessible/index.html">Accessibility</a></li> <li class="toctree-l1"><a class="reference internal" href="../../media/index.html">Media Playback</a></li> <li class="toctree-l1"><a class="reference internal" href="../../code-quality/index.html">Code quality</a></li> <li class="toctree-l1"><a class="reference internal" href="../../writing-rust-code/index.html">Writing Rust Code</a></li> <li class="toctree-l1"><a class="reference internal" href="../../rust-components/index.html">Rust Components</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/profiler/index.html">Gecko Profiler</a></li> <li class="toctree-l1"><a class="reference internal" href="../../performance/index.html">Performance</a></li> <li class="toctree-l1"><a class="reference internal" href="../../storage/index.html">Database bindings (SQLite, KV, …)</a></li> <li class="toctree-l1"><a class="reference internal" href="../../xpcom/index.html">XPCOM</a></li> <li class="toctree-l1"><a class="reference internal" href="../../nspr/index.html">NSPR</a></li> <li class="toctree-l1"><a class="reference internal" href="../../security/nss/index.html">Network Security Services (NSS)</a></li> <li class="toctree-l1"><a class="reference internal" href="../../content-security/index.html">Web Security Checks in Gecko</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">The Firefox Build System</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mach/index.html">Mach</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/try/index.html">Pushing to Try</a></li> <li class="toctree-l1"><a class="reference internal" href="../../build/buildsystem/index.html">Build System</a></li> <li class="toctree-l1"><a class="reference internal" href="../../taskcluster/index.html">Firefox CI and Taskgraph</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/moztreedocs/index.html">Managing Documentation</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mozbuild/vendor/index.html">Vendoring Third Party Components</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Testing & Test Infrastructure</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../testing/automated-testing/index.html">Automated Testing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/treeherder-try/index.html">Understanding Treeherder Results</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/sheriffed-intermittents/index.html">Sheriffed intermittent failures</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/tests-for-new-config/index.html">Turning on Firefox tests for a new configuration</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/intermittent/index.html">Avoiding intermittent tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/testing-policy/index.html">Testing Policy</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/ci-configs/index.html">Configuration Changes</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/browser-chrome/index.html">Browser chrome mochitests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/chrome-tests/index.html">Chrome Tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/marionette/index.html">Marionette</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/geckodriver/index.html">geckodriver</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/test-verification/index.html">Test Verification</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/webrender/index.html">WebRender Tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/mochitest-plain/index.html">Mochitest</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/xpcshell/index.html">XPCShell tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/tps/index.html">TPS</a></li> <li class="toctree-l1"><a class="reference internal" href="../../web-platform/index.html">web-platform-tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../gtest/index.html">GTest</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/fuzzing/index.html">Fuzzing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/sanitizer/index.html">Sanitizer</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/perfdocs/index.html">Performance Testing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/code-coverage/index.html">Code coverage</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing-rust-code/index.html">Testing & Debugging Rust Code</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Releases & Updates</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html">Mozilla Update Infrastructure</a></li> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html#watershed-updates">Watershed Updates</a></li> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html#desupport-updates">Desupport Updates</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/update-verify/index.html">Update Verify</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Localization & Internationalization</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../intl/index.html">Internationalization</a></li> <li class="toctree-l1"><a class="reference internal" href="../../l10n/index.html">Localization</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Firefox and Python</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mozbase/index.html">mozbase</a></li> <li class="toctree-l1"><a class="reference internal" href="../../python/index.html">Using third-party Python packages</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Metrics Collected in Firefox</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../metrics/index.html">Metrics</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../../index.html">Firefox Source Docs</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="../../index.html" class="icon icon-home" aria-label="Home"></a></li> <li class="breadcrumb-item active">Storage Inspector</li> <li class="wy-breadcrumbs-aside"> <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Infrastructure&component=Firefox+Source+Docs%3A+Content&short_desc=Documentation+issue+on+devtools-user/storage_inspector/index&comment=URL+=+https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/index.html&bug_file_loc=https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/index.html" rel="nofollow" >Report an issue</a > / <a href="../../_sources/devtools-user/storage_inspector/index.rst.txt" rel="nofollow"> View page source</a > </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="storage-inspector"> <h1>Storage Inspector<a class="headerlink" href="#storage-inspector" title="Link to this heading"></a></h1> <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 class="simple"> <li><p><em>Cache Storage</em> — any DOM caches created using the <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">Cache API</a>.</p></li> <li><p><em>Cookies</em> — All the <a class="reference external" href="https://developer.mozilla.org/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.</p></li> <li><p><em>IndexedDB</em> — All <a class="reference external" href="https://developer.mozilla.org/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.</p></li> <li><p><em>Local Storage</em> — All <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</p></li> <li><p><em>Session Storage</em> — All <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</p></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> <section id="opening-the-storage-inspector"> <h2>Opening the Storage Inspector<a class="headerlink" href="#opening-the-storage-inspector" title="Link to this heading"></a></h2> <p>You can open the Storage Inspector by selecting the <em>Storage</em> panel in the Web Developer Tools, accessible from the Browser Tools submenu</p> <p>The <a class="reference internal" href="../tools_toolbox/index.html"><span class="doc">Toolbox</span></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> <img alt="../../_images/storage_inspector.png" class="center" src="../../_images/storage_inspector.png" /> </section> <section id="storage-inspector-user-interface"> <h2>Storage Inspector User Interface<a class="headerlink" href="#storage-inspector-user-interface" title="Link to this heading"></a></h2> <p>The Storage Inspector UI is split into three main components:</p> <ul class="simple"> <li><p><a class="reference internal" href="#storage-inspector-storage-tree"><span class="std std-ref">Storage tree</span></a></p></li> <li><p><a class="reference internal" href="#storage-inspector-table-widget"><span class="std std-ref">Table Widget</span></a></p></li> <li><p><a class="reference internal" href="#storage-inspector-sidebar"><span class="std std-ref">Sidebar</span></a></p></li> </ul> <img alt="../../_images/storage_labeled.png" class="center" src="../../_images/storage_labeled.png" /> <section id="storage-tree"> <span id="storage-inspector-storage-tree"></span><h3>Storage tree<a class="headerlink" href="#storage-tree" title="Link to this heading"></a></h3> <p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> <img alt="../../_images/storage_types.png" class="center" src="../../_images/storage_types.png" /> <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, “<code class="docutils literal notranslate"><span class="pre">http://mozilla.org</span></code>” and “<code class="docutils literal notranslate"><span class="pre">https://mozilla.org</span></code>” 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> <img alt="../../_images/cache_storage.png" class="border" src="../../_images/cache_storage.png" /> <p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> <img alt="../../_images/indexeddb_storage.png" class="border" src="../../_images/indexeddb_storage.png" /> <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> <img alt="../../_images/cookie_storage.png" class="border" src="../../_images/cookie_storage.png" /> <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> </section> <section id="table-widget"> <span id="storage-inspector-table-widget"></span><h3>Table Widget<a class="headerlink" href="#table-widget" title="Link to this heading"></a></h3> <p>The table widget displays a list of 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> <img alt="../../_images/cookie_context_menu.png" class="border" src="../../_images/cookie_context_menu.png" /> </section> <section id="search"> <h3>Search<a class="headerlink" href="#search" title="Link to this heading"></a></h3> <p>There’s a search box at the top of the Table Widget:</p> <img alt="../../_images/storage_detail_filter.png" class="border" src="../../_images/storage_detail_filter.png" /> <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>You can use <kbd class="kbd docutils literal notranslate">Ctrl</kbd> + <kbd class="kbd docutils literal notranslate">F</kbd> (<kbd class="kbd docutils literal notranslate">Cmd</kbd> + <kbd class="kbd docutils literal notranslate">F</kbd> on a Mac) to focus the search box.</p> </section> <section id="add-and-refresh-storage"> <h3>Add and refresh storage<a class="headerlink" href="#add-and-refresh-storage" title="Link to this heading"></a></h3> <p>You’ll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can’t add new entries to IndexedDB or Cache):</p> <img alt="../../_images/storage_detail_add_refresh.png" class="border" src="../../_images/storage_detail_add_refresh.png" /> </section> <section id="sidebar"> <span id="storage-inspector-sidebar"></span><h3>Sidebar<a class="headerlink" href="#sidebar" title="Link to this heading"></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 class="simple"> <li><p>A stringified JSON like <code class="docutils literal notranslate"><span class="pre">'{"foo":</span> <span class="pre">"bar"}'</span></code> is shown as the origin JSON: <code class="docutils literal notranslate"><span class="pre">{foo:</span> <span class="pre">"bar"}</span></code>.</p></li> <li><p>A string containing a key separated value, like <code class="docutils literal notranslate"><span class="pre">"1~2~3~4"</span></code> or <code class="docutils literal notranslate"><span class="pre">"1=2=3=4"</span></code> is shown like an array: <code class="docutils literal notranslate"><span class="pre">[1,</span> <span class="pre">2,</span> <span class="pre">3,</span> <span class="pre">4]</span></code>.</p></li> <li><p>A string containing key-value pairs, like <code class="docutils literal notranslate"><span class="pre">"ID=1234:foo=bar"</span></code> is shown as JSON: <code class="docutils literal notranslate"><span class="pre">{ID:1234,</span> <span class="pre">foo:</span> <span class="pre">"bar"}</span></code>.</p></li> </ul> <p>The shown values can also be filtered using the search box at the top of the sidebar.</p> </section> </section> <section id="working-with-the-storage-inspector"> <h2>Working with the Storage Inspector<a class="headerlink" href="#working-with-the-storage-inspector" title="Link to this heading"></a></h2> <p>The following articles cover different aspects of using the Storage Inspector:</p> <ul class="simple"> <li><p><a class="reference internal" href="cookies/index.html"><span class="doc">Cookies</span></a></p></li> <li><p><a class="reference internal" href="local_storage_session_storage/index.html"><span class="doc">Local Storage / Session Storage</span></a></p></li> <li><p><a class="reference internal" href="cache_storage/index.html"><span class="doc">Cache Storage</span></a></p></li> <li><p><a class="reference internal" href="indexeddb/index.html"><span class="doc">IndexedDB</span></a></p></li> <li><p><a class="reference internal" href="extension_storage/index.html"><span class="doc">Extension Storage</span></a></p></li> </ul> </section> </section> </div> </div> <footer> <hr/> <div role="contentinfo"> <p></p> </div> Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>