What is the JavaScript equivalent of “Clear Site Data” in Chrome Dev Tools?

Question

I am looking for a way to trigger the same behavior as \"Clear site data\" in Chrome Dev tools or as close to the same behavior as possible. I know there are some things that ar

Answer 1

Yikes so after not getting any answers, decided to dig into some source code. I found the repository for Chrome Devtools and also the code where they actually call the this._clear from the UI (can be found in resources/ClearStorageView.js).

  _clear() {
    if (!this._securityOrigin)
      return;
    const storageTypes = [];
    for (const type of this._settings.keys()) {
      if (this._settings.get(type).get())
        storageTypes.push(type);
    }

    this._target.storageAgent().clearDataForOrigin(this._securityOrigin, storageTypes.join(','));

    const set = new Set(storageTypes);
    const hasAll = set.has(Protocol.Storage.StorageType.All);
    if (set.has(Protocol.Storage.StorageType.Cookies) || hasAll) {
      const cookieModel = this._target.model(SDK.CookieModel);
      if (cookieModel)
        cookieModel.clear();
    }

    if (set.has(Protocol.Storage.StorageType.Indexeddb) || hasAll) {
      for (const target of SDK.targetManager.targets()) {
        const indexedDBModel = target.model(Resources.IndexedDBModel);
        if (indexedDBModel)
          indexedDBModel.clearForOrigin(this._securityOrigin);
      }
    }

    if (set.has(Protocol.Storage.StorageType.Local_storage) || hasAll) {
      const storageModel = this._target.model(Resources.DOMStorageModel);
      if (storageModel)
        storageModel.clearForOrigin(this._securityOrigin);
    }

    if (set.has(Protocol.Storage.StorageType.Websql) || hasAll) {
      const databaseModel = this._target.model(Resources.DatabaseModel);
      if (databaseModel) {
        databaseModel.disable();
        databaseModel.enable();
      }
    }

    if (set.has(Protocol.Storage.StorageType.Cache_storage) || hasAll) {
      const target = SDK.targetManager.mainTarget();
      const model = target && target.model(SDK.ServiceWorkerCacheModel);
      if (model)
        model.clearForOrigin(this._securityOrigin);
    }

    if (set.has(Protocol.Storage.StorageType.Appcache) || hasAll) {
      const appcacheModel = this._target.model(Resources.ApplicationCacheModel);
      if (appcacheModel)
        appcacheModel.reset();
    }

    this._clearButton.disabled = true;
    const label = this._clearButton.textContent;
    this._clearButton.textContent = Common.UIString('Clearing...');
    setTimeout(() => {
      this._clearButton.disabled = false;
      this._clearButton.textContent = label;
    }, 500);
  }

I think the tl;dr is naturally their Clear Site data hooks into the checkbox options they have on the form which goes through and clears the options. In my original question I was personally wondering if there was something MORE than just that and it does look like they do call at the very top, regardless of what you have checked:

this._target.storageAgent().clearDataForOrigin(this._securityOrigin, storageTypes.join(','));

Not sure what this was but doing some digging, it looks like it might be some experimental API for clearing data from origin for Lighthouse apps. Personally I'm not sure or feel qualified to say this is correct. Hope this helps people.

If I can make a JavaScript equivalent script I'll try but technically all of Chrome Devtools is in JavaScript :P