Cache & DevTools

Two utilities sit in the Mosaic toolbar that you'll reach for regularly during a QA session: the purge-cache button and DevTools.

Purge cache

The purge-cache button (the X icon at the right end of the toolbar) clears the shared HTTP cache and reloads all three panes. The cache is shared across panes via the persist:mosaic-shared session partition, so a single purge applies to everything.

This is the button you reach for when:

You just deployed a CSS change and want to confirm what you're seeing is the new build, not a stale cached version.
A cache-busting query string isn't working and you need to force a fresh fetch.
A CDN-cached asset is showing an old version and you want to bypass it locally.

What gets cleared

HTTP cache (cached responses, including images, scripts, stylesheets).
Disk cache.
Memory cache.

What does not get cleared

Cookies. Authentication state survives a cache purge - log-ins are not affected.
localStorage and sessionStorage. Application data persists.
IndexedDB. Persists.
Service Workers. Registered service workers are not unregistered.

To clear cookies or storage in the current build, open DevTools on any pane, switch to the Application tab, and clear them from there. A dedicated "clear all session data" button is on the roadmap for a future build.

DevTools for each pane

Mosaic exposes DevTools via two keyboard shortcuts:

Cmd+Alt+I - opens DevTools for all three panes (mobile, desktop, tablet) in detached windows. You'll get three separate DevTools windows, one per pane, each scoped to its own viewport.
Cmd+Alt+J - opens DevTools for the Mosaic chrome itself - the toolbar, URL bar, and surrounding window. Useful only if you're debugging Mosaic itself; for inspecting page content, use Cmd+Alt+I.

The pane DevTools windows are detached (not docked into the pane) because the pane areas are too narrow in Fit mode to fit a usable DevTools panel. Detached windows can be moved to a second monitor or sized independently.

Inspecting elements

The Inspect Element shortcut (Cmd+Shift+C in the DevTools window) works inside each pane's DevTools, scoped to that pane's content. Right-click and "Inspect Element" within a pane's content area also work.

Console isolation

Each pane's DevTools console is independent. console.log output from the Mobile pane appears only in the Mobile DevTools window, not the Desktop or Tablet windows. This is how Chromium isolates WebContents - it's not a Mosaic limitation.

Reload

The toolbar reload button (or Cmd+R) reloads all three panes from the network. To reload while bypassing cache without doing a full purge, hold Shift while clicking reload (Cmd+Shift+R) - this performs a single hard reload across all three panes without clearing cookies or storage.