How to Inspect Chrome Storage in DevTools?

How to Inspect Chrome Storage in DevTools

Chrome DevTools offers convenient inspectors for Local Storage and Session Storage. However, you may wonder if there's a similar tool for inspecting chrome.storage.sync.

Native DevTools Inspection

Unfortunately, while "Local Storage" and "Session Storage" in DevTools strictly refer to the Web platform storage APIs (localStorage and sessionStorage), they do not support inspecting chrome.storage content. chrome://sync-internals/ is also limited in displaying the actual synchronized storage contents per extension.

Extension-Based Methods

Method 1: Storage Area Viewer

This extension provides the following capabilities for all chrome.storage areas (sync, local, session, managed):

• Viewing, editing, clearing, and searching storage content
• Monitoring storage changes
• Dark theme support

Method 2: Storage Area Explorer

While this extension offers similar functionality as Storage Area Viewer, note that it supports viewing/editing/importing/exporting in only sync and local areas.

Additionally, there are other auxiliary methods to inspect chrome.storage content:

• Using the console and console.storage
• Using the storage interface directly
• Employing custom-built debugging tools

Future Developments and Caveats

Chrome is considering implementing native support for inspecting chrome.storage in DevTools (see crbug.com/848752).

For extensions using ManifestV3 service workers, it's crucial to remember that DevTools for service workers does not display storage. To access storage in this scenario, open a visible page in the extension (e.g., popup or options page) and inspect it. Alternatively, open the extension's manifest.json or a script from the extension in a new tab.

The above is the detailed content of How to Inspect Chrome Storage in DevTools?. For more information, please follow other related articles on the PHP Chinese website!