index.rst (6171B)
1 ================= 2 Storage Inspector 3 ================= 4 5 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: 6 7 8 - *Cache Storage* — any DOM caches created using the `Cache API <https://developer.mozilla.org/en-US/docs/Web/API/Cache>`_. 9 10 - *Cookies* — All the `cookies <https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie>`_ 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. 11 12 - *IndexedDB* — All `IndexedDB <https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API>`_ databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores. 13 14 - *Local Storage* — All `local storage <https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage>`_ items created by the page or any iframes inside the page. 15 16 - *Session Storage* — All `session storage <https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage>`_ items created by the page or any iframes inside the page. 17 18 19 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. 20 21 22 Opening the Storage Inspector 23 ***************************** 24 25 You can open the Storage Inspector by selecting the *Storage* panel in the Web Developer Tools, accessible from the Browser Tools submenu 26 27 The :doc:`Toolbox <../tools_toolbox/index>` will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox. 28 29 .. image:: storage_inspector.png 30 :class: center 31 32 33 Storage Inspector User Interface 34 ******************************** 35 36 The Storage Inspector UI is split into three main components: 37 38 - :ref:`Storage tree <storage-inspector-storage-tree>` 39 - :ref:`Table Widget <storage-inspector-table-widget>` 40 - :ref:`Sidebar <storage-inspector-sidebar>` 41 42 43 .. image:: storage_labeled.png 44 :class: center 45 46 47 .. _storage-inspector-storage-tree: 48 49 Storage tree 50 ------------ 51 52 The storage tree lists all the storage types that the Storage Inspector can inspect: 53 54 .. image:: storage_types.png 55 :class: center 56 57 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. 58 59 Under "Cache Storage", objects are organized by origin and then by the name of the cache: 60 61 .. image:: cache_storage.png 62 :class: border 63 64 65 IndexedDB objects are organized by origin, then by database name, then by object store name: 66 67 .. image:: indexeddb_storage.png 68 :class: border 69 70 71 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: 72 73 .. image:: cookie_storage.png 74 :class: border 75 76 77 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. 78 79 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. 80 81 82 .. _storage-inspector-table-widget: 83 84 Table Widget 85 ------------ 86 87 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. 88 89 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: 90 91 .. image:: cookie_context_menu.png 92 :class: border 93 94 95 Search 96 ------ 97 98 There's a search box at the top of the Table Widget: 99 100 .. image:: storage_detail_filter.png 101 :class: border 102 103 104 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. 105 106 You can use :kbd:`Ctrl` + :kbd:`F` (:kbd:`Cmd` + :kbd:`F` on a Mac) to focus the search box. 107 108 109 Add and refresh storage 110 ----------------------- 111 112 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): 113 114 .. image:: storage_detail_add_refresh.png 115 :class: border 116 117 118 .. _storage-inspector-sidebar: 119 120 Sidebar 121 ------- 122 123 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. 124 125 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: 126 127 128 - A stringified JSON like ``'{"foo": "bar"}'`` is shown as the origin JSON: ``{foo: "bar"}``. 129 - A string containing a key separated value, like ``"1~2~3~4"`` or ``"1=2=3=4"`` is shown like an array: ``[1, 2, 3, 4]``. 130 - A string containing key-value pairs, like ``"ID=1234:foo=bar"`` is shown as JSON: ``{ID:1234, foo: "bar"}``. 131 132 The shown values can also be filtered using the search box at the top of the sidebar. 133 134 135 Working with the Storage Inspector 136 ********************************** 137 138 The following articles cover different aspects of using the Storage Inspector: 139 140 - :doc:`Cookies <../storage_inspector/cookies/index>` 141 - :doc:`Local Storage / Session Storage <../storage_inspector/local_storage_session_storage/index>` 142 - :doc:`Cache Storage <../storage_inspector/cache_storage/index>` 143 - :doc:`IndexedDB <../storage_inspector/indexeddb/index>` 144 - :doc:`Extension Storage <../storage_inspector/extension_storage/index>`