How to Inspect and Validate Web App Manifests in Google Chrome DevTools for PWAs

Progressive Web Apps (PWAs) rely on a JSON-based Web App Manifest file to tell modern browsers how a website should behave when installed as a standalone desktop or mobile application. A properly formatted manifest defines application metadata including display modes, screen orientation, theme colours, icon sets, launch URLs, and installation eligibility. When building or debugging web applications, inspecting and validating this file is an essential step to ensure browsers display the native installation prompt correctly.

Google Chrome DevTools provides a dedicated Manifest inspector under the Application panel. This interface parses your manifest.json or manifest.webmanifest file in real time, flags missing or invalid properties, previews iconography across light and dark display modes, and allows developers to trigger installation testing directly from the desktop. If you frequently inspect and test web interfaces, you may also find our guides on emulating mobile browsers and user agents in Chrome DevTools and inspecting CSS typography in Chrome DevTools helpful.

Accessing the Manifest Inspector in Google Chrome DevTools

The Manifest debugging panel is located inside the Application tab of Chrome DevTools. To inspect the active web page’s manifest file, follow these steps:

1. Open Google Chrome and navigate to the Progressive Web App or website you wish to inspect.
2. Press F12 on Windows/Linux or Option + Command + I on macOS to launch DevTools. Alternatively, right-click anywhere on the webpage and select Inspect.
3. In the top toolbar of DevTools, locate and click the Application tab. If the Application tab is not visible due to narrow panel widths, click the double-chevron icon (>>) and choose Application from the dropdown menu.
4. In the left-hand sidebar navigation under the Application heading, click on Manifest.

If a valid manifest is linked via an HTML <link rel="manifest" href="..."> element in the document header, DevTools loads and evaluates all parsed parameters immediately. If no manifest is detected, DevTools displays an informative notification indicating that no manifest file was discovered for the current origin.

Validating Essential Manifest Properties

The Manifest panel groups properties into clear, functional categories. Reviewing these fields allows you to identify configuration oversights before deploying to production:

• Identity: Displays the name (the full title shown in app store listings and splash screens) and short_name (the abbreviated label rendered below icons on mobile home screens and operating system launchers).
• Presentation: Validates the start_url (the initial landing page upon app launch), display mode (such as standalone, minimal-ui, fullscreen, or browser), and orientation (such as portrait, landscape, or any).
• Colours: Shows the theme_color (which tints the browser address bar and window frame) and background_color (applied to the splash screen while resources load). Chrome DevTools displays interactive colour swatches adjacent to these values.
• Icons: Displays every registered icon dimension defined in the manifest array. Chrome renders visual previews of square icons, maskable icons (for adaptive icon shapes on Android), and monochrome icons (used for badge notifications and taskbars).
• Shortcuts: Evaluates quick-action jump links defined in the manifest, which allow users to launch directly into specific workflows by secondary-clicking or long-pressing the app icon.

Testing Installation Triggers and PWA Installability

Chrome requires specific criteria before triggering native installation prompts. DevTools provides built-in mechanisms to verify installation readiness without requiring live mobile devices:

1. At the top of the Manifest panel, locate the Installability diagnostics section.
2. If your web application fails installability criteria, Chrome details the exact warning or error (for example, missing maskable icons of at least 192×192 pixels, lack of an active Service Worker fetch handler, or insecure HTTP hosting).
3. If all requirements are satisfied, an active Install link appears next to the application name. Clicking this button triggers Chrome’s native desktop installation dialogue, allowing you to verify launch behaviour and standalone window chrome in real time.

Simulating Window Controls Overlay and Title Bar Customisation

Modern desktop PWAs can utilise the Window Controls Overlay API to extend custom HTML content across the entire application title bar, blending web layouts directly into the native window minimise, maximise, and close controls. Chrome DevTools allows developers to test this functionality interactively:

1. Ensure your manifest specifies "display_override": ["window-controls-overlay"] in its configuration.
2. In the Manifest inspector pane, locate the Window Controls Overlay simulation toggle.
3. Switch the toggle to preview how title bar drag regions (app-region: drag) and custom search or navigation controls render beneath the native platform buttons.

Troubleshooting Common Manifest Loading Errors

If Chrome DevTools fails to parse your manifest file or flags persistent errors, check the following common causes:

• CORS Restrictions: If the manifest file is hosted on an external CDN or separate subdomain, ensure the HTTP response includes the header Access-Control-Allow-Origin: *. Additionally, the HTML link tag must include the crossorigin="use-credentials" or crossorigin="anonymous" attribute where necessary.
• Incorrect MIME Type: Verify that your web server serves the file with either application/manifest+json or application/json. Serving the manifest as text/plain or text/html causes browser validation to fail.
• JSON Syntax Violations: Trailing commas after the last array item or missing quotation marks around string keys invalidate the entire JSON payload. Click the direct file link next to the Manifest heading in DevTools to inspect the raw file directly in the Sources panel.