diff options
Diffstat (limited to 'devtools/docs/user/storage_inspector')
23 files changed, 286 insertions, 0 deletions
diff --git a/devtools/docs/user/storage_inspector/cache_storage.png b/devtools/docs/user/storage_inspector/cache_storage.png Binary files differnew file mode 100644 index 0000000000..e45e4da184 --- /dev/null +++ b/devtools/docs/user/storage_inspector/cache_storage.png diff --git a/devtools/docs/user/storage_inspector/cache_storage/cache_storage_detail.png b/devtools/docs/user/storage_inspector/cache_storage/cache_storage_detail.png Binary files differnew file mode 100644 index 0000000000..42a8f5c7e3 --- /dev/null +++ b/devtools/docs/user/storage_inspector/cache_storage/cache_storage_detail.png diff --git a/devtools/docs/user/storage_inspector/cache_storage/index.rst b/devtools/docs/user/storage_inspector/cache_storage/index.rst new file mode 100644 index 0000000000..68dc86cd2b --- /dev/null +++ b/devtools/docs/user/storage_inspector/cache_storage/index.rst @@ -0,0 +1,12 @@ +============= +Cache Storage +============= + +Under the *Cache Storage* type within the :doc:`Storage Inspector <../index>` you can see the contents of any DOM caches created using the `Cache API <https://developer.mozilla.org/en-US/docs/Web/API/Cache>`_. 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. + +.. image:: cache_storage_detail.png + :class: border diff --git a/devtools/docs/user/storage_inspector/cookie_context_menu.png b/devtools/docs/user/storage_inspector/cookie_context_menu.png Binary files differnew file mode 100644 index 0000000000..1dce7ef370 --- /dev/null +++ b/devtools/docs/user/storage_inspector/cookie_context_menu.png diff --git a/devtools/docs/user/storage_inspector/cookie_storage.png b/devtools/docs/user/storage_inspector/cookie_storage.png Binary files differnew file mode 100644 index 0000000000..300c729834 --- /dev/null +++ b/devtools/docs/user/storage_inspector/cookie_storage.png diff --git a/devtools/docs/user/storage_inspector/cookies/cookie_table_widget_context.png b/devtools/docs/user/storage_inspector/cookies/cookie_table_widget_context.png Binary files differnew file mode 100644 index 0000000000..e0f898dc9e --- /dev/null +++ b/devtools/docs/user/storage_inspector/cookies/cookie_table_widget_context.png diff --git a/devtools/docs/user/storage_inspector/cookies/index.rst b/devtools/docs/user/storage_inspector/cookies/index.rst new file mode 100644 index 0000000000..d6dabffd26 --- /dev/null +++ b/devtools/docs/user/storage_inspector/cookies/index.rst @@ -0,0 +1,42 @@ +======= +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 a table. The cookies table has the following columns: + + +- *Name* — The name of the cookie. +- *Value* — The value of the cookie. +- *Domain* — The domain of the cookie. +- *Path* — The path property of the cookie. +- *Expires / Max-Age* — The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session" +- *Size* — The size of the cookie name plus value in bytes. +- *HttpOnly* — Is this cookie HTTP only? +- *Secure* — Is this cookie a secure cookie? +- *SameSite* — Is this cookie a same-site cookie? Same-site cookies allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain. +- *Last accessed* — Date and time when the cookie was last read. +- *Created* — Date and time when the cookie was created. +- *HostOnly* — Is this cookie a domain cookie? That is, the domain value matches exactly the domain of the current website. + + +.. note:: + + Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns. + + +You can edit cookies by double-clicking inside cells in the :ref:`Table Widget <storage-inspector-table-widget>` and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want. + +Context menu +------------ + +The context menu for each cookie includes the following commands: + + +- *Add item* - add a new cookie. +- *Delete <cookie name>.<domain>* - deletes the selected cookie +- *Delete All From <domain>* - deletes all cookies from the selected domain. This must be an exact match. For example, if you select "Delete All From test8.example.com" only cookies from that domain will be deleted. Cookies from "test13.example.com" will not be deleted. +- *Delete All* - deletes all cookies for the current host. +- *Delete All Session Cookies* - deletes all cookies for the current host that are scheduled to be deleted when the browser shuts down + +.. image:: cookie_table_widget_context.png + :class: border diff --git a/devtools/docs/user/storage_inspector/extension_storage/extension_storage.png b/devtools/docs/user/storage_inspector/extension_storage/extension_storage.png Binary files differnew file mode 100644 index 0000000000..aaf3787932 --- /dev/null +++ b/devtools/docs/user/storage_inspector/extension_storage/extension_storage.png diff --git a/devtools/docs/user/storage_inspector/extension_storage/index.rst b/devtools/docs/user/storage_inspector/extension_storage/index.rst new file mode 100644 index 0000000000..5c6b8300e9 --- /dev/null +++ b/devtools/docs/user/storage_inspector/extension_storage/index.rst @@ -0,0 +1,13 @@ +================= +Extension Storage +================= + +This storage type is only shown when debugging extensions. When selecting an extension ID in the storage tree of the :doc:`Storage Inspector <../index>`, a table lists the details of all the extension storage present for the extension. This table contains the following columns: + + +- *Key* — The name of the stored item. +- *Value* — The value of the stored item. +- *Storage Area* — The name of the area where the item is stored. + +.. image:: extension_storage.png + :class: center diff --git a/devtools/docs/user/storage_inspector/index.rst b/devtools/docs/user/storage_inspector/index.rst new file mode 100644 index 0000000000..fcb6d6226a --- /dev/null +++ b/devtools/docs/user/storage_inspector/index.rst @@ -0,0 +1,144 @@ +================= +Storage Inspector +================= + +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: + + +- *Cache Storage* — any DOM caches created using the `Cache API <https://developer.mozilla.org/en-US/docs/Web/API/Cache>`_. + +- *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. + +- *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. + +- *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. + +- *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. + + +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. + + +Opening the Storage Inspector +***************************** + +You can open the Storage Inspector by selecting the *Storage* panel in the Web Developer Tools, accessible from the Browser Tools submenu + +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. + +.. image:: storage_inspector.png + :class: center + + +Storage Inspector User Interface +******************************** + +The Storage Inspector UI is split into three main components: + +- :ref:`Storage tree <storage-inspector-storage-tree>` +- :ref:`Table Widget <storage-inspector-table-widget>` +- :ref:`Sidebar <storage-inspector-sidebar>` + + +.. image:: storage_labeled.png + :class: center + + +.. _storage-inspector-storage-tree: + +Storage tree +------------ + +The storage tree lists all the storage types that the Storage Inspector can inspect: + +.. image:: storage_types.png + :class: center + +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. + +Under "Cache Storage", objects are organized by origin and then by the name of the cache: + +.. image:: cache_storage.png + :class: border + + +IndexedDB objects are organized by origin, then by database name, then by object store name: + +.. image:: indexeddb_storage.png + :class: border + + +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: + +.. image:: cookie_storage.png + :class: border + + +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. + + +.. _storage-inspector-table-widget: + +Table Widget +------------ + +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. + +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: + +.. image:: cookie_context_menu.png + :class: border + + +Search +------ + +There's a search box at the top of the Table Widget: + +.. image:: storage_detail_filter.png + :class: border + + +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. + +You can use :kbd:`Ctrl` + :kbd:`F` (:kbd:`Cmd` + :kbd:`F` on a Mac) to focus the search box. + + +Add and refresh storage +----------------------- + +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): + +.. image:: storage_detail_add_refresh.png + :class: border + + +.. _storage-inspector-sidebar: + +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 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]``. +- A string containing key-value pairs, like ``"ID=1234:foo=bar"`` is shown as JSON: ``{ID:1234, foo: "bar"}``. + +The shown values can also be filtered using the search box at the top of the sidebar. + + +Working with the Storage Inspector +********************************** + +The following articles cover different aspects of using the Storage Inspector: + +- :doc:`Cookies <../storage_inspector/cookies/index>` +- :doc:`Local Storage / Session Storage <../storage_inspector/local_storage_session_storage/index>` +- :doc:`Cache Storage <../storage_inspector/cache_storage/index>` +- :doc:`IndexedDB <../storage_inspector/indexeddb/index>` +- :doc:`Extension Storage <../storage_inspector/extension_storage/index>` diff --git a/devtools/docs/user/storage_inspector/indexeddb/index.rst b/devtools/docs/user/storage_inspector/indexeddb/index.rst new file mode 100644 index 0000000000..7273e8c456 --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb/index.rst @@ -0,0 +1,52 @@ +========= +IndexedDB +========= + +When you select an origin inside the *Indexed DB* storage type in the storage tree of the :doc:`Storage Inspector <../index>`, a table lists the details of all the databases present for that origin. + +.. note:: + + The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool. + + +Databases have the following details: + + +- *Database Name* — The name of the database. +- *Storage* — The `storage type <https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#different_types_of_data_storage>`_ specified for the database. +- *Origin* — The origin of the database. +- *Version* — The database version. +- *Object Stores* — The 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 <https://developer.mozilla.org/en-US/docs/Web/API/IDBIndex/keyPath>`_ property of the object store. +- *Auto Increment* — Is automatic incrementation of the keys enabled? +- *Indexes* — Array of indexes present in the object store as shown below. + + +.. image:: indexed_db_details.png + :class: border + + +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. + +You can delete an IndexedDB database using the context menu in the storage tree: + +.. image:: indexed_db_context_menu.png + :class: border + + +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: + +.. image:: indexeddb_delete_warning.png + :class: border + + +You can use the context menu in the table widget to delete all items in an object store, or a particular item: + +.. image:: indexed_db_table_widget_context.png + :class: border diff --git a/devtools/docs/user/storage_inspector/indexeddb/indexed_db_context_menu.png b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_context_menu.png Binary files differnew file mode 100644 index 0000000000..45dbc214fe --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_context_menu.png diff --git a/devtools/docs/user/storage_inspector/indexeddb/indexed_db_details.png b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_details.png Binary files differnew file mode 100644 index 0000000000..8cb4602a26 --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_details.png diff --git a/devtools/docs/user/storage_inspector/indexeddb/indexed_db_table_widget_context.png b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_table_widget_context.png Binary files differnew file mode 100644 index 0000000000..6c243c1816 --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb/indexed_db_table_widget_context.png diff --git a/devtools/docs/user/storage_inspector/indexeddb/indexeddb_delete_warning.png b/devtools/docs/user/storage_inspector/indexeddb/indexeddb_delete_warning.png Binary files differnew file mode 100644 index 0000000000..8e4dc2c30f --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb/indexeddb_delete_warning.png diff --git a/devtools/docs/user/storage_inspector/indexeddb_storage.png b/devtools/docs/user/storage_inspector/indexeddb_storage.png Binary files differnew file mode 100644 index 0000000000..c83f347e67 --- /dev/null +++ b/devtools/docs/user/storage_inspector/indexeddb_storage.png diff --git a/devtools/docs/user/storage_inspector/local_storage_session_storage/delete_storage_menu.png b/devtools/docs/user/storage_inspector/local_storage_session_storage/delete_storage_menu.png Binary files differnew file mode 100644 index 0000000000..48226a9456 --- /dev/null +++ b/devtools/docs/user/storage_inspector/local_storage_session_storage/delete_storage_menu.png diff --git a/devtools/docs/user/storage_inspector/local_storage_session_storage/index.rst b/devtools/docs/user/storage_inspector/local_storage_session_storage/index.rst new file mode 100644 index 0000000000..31e0b0ebe4 --- /dev/null +++ b/devtools/docs/user/storage_inspector/local_storage_session_storage/index.rst @@ -0,0 +1,23 @@ +=============================== +Local Storage / Session Storage +=============================== + +When an origin corresponding to local storage or session storage is selected within the :doc:`Storage Inspector <../index>`, the names and values of all the items corresponding to local storage or session storage will be listed in a table. + +You can edit local and session storage items by double-clicking inside cells in the :ref:`Table Widget <storage-inspector-table-widget>` and editing the values they contain: + +.. raw:: html + + <iframe width="560" height="315" src="https://www.youtube.com/embed/UKLgBBUi11c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> + <br/> + <br/> + +You can delete local storage and session storage entries using the context menu: + +.. image:: delete_storage_menu.png + :class: border + + +You can also delete local and session storage entries by selecting an item and pressing the :kbd:`Delete` or :kbd:`Backspace` key. + +Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want. diff --git a/devtools/docs/user/storage_inspector/storage_detail_add_refresh.png b/devtools/docs/user/storage_inspector/storage_detail_add_refresh.png Binary files differnew file mode 100644 index 0000000000..4ffeed2800 --- /dev/null +++ b/devtools/docs/user/storage_inspector/storage_detail_add_refresh.png diff --git a/devtools/docs/user/storage_inspector/storage_detail_filter.png b/devtools/docs/user/storage_inspector/storage_detail_filter.png Binary files differnew file mode 100644 index 0000000000..dc6888654a --- /dev/null +++ b/devtools/docs/user/storage_inspector/storage_detail_filter.png diff --git a/devtools/docs/user/storage_inspector/storage_inspector.png b/devtools/docs/user/storage_inspector/storage_inspector.png Binary files differnew file mode 100644 index 0000000000..ec9c21f77d --- /dev/null +++ b/devtools/docs/user/storage_inspector/storage_inspector.png diff --git a/devtools/docs/user/storage_inspector/storage_labeled.png b/devtools/docs/user/storage_inspector/storage_labeled.png Binary files differnew file mode 100644 index 0000000000..28cecc6ea0 --- /dev/null +++ b/devtools/docs/user/storage_inspector/storage_labeled.png diff --git a/devtools/docs/user/storage_inspector/storage_types.png b/devtools/docs/user/storage_inspector/storage_types.png Binary files differnew file mode 100644 index 0000000000..4a17e73fc5 --- /dev/null +++ b/devtools/docs/user/storage_inspector/storage_types.png |
