How to Emulate Mobile Browsers and Customise User-Agent Strings in Google Chrome DevTools

Modern web applications rely heavily on responsive layouts, feature detection, and server-side device detection to deliver tailored experiences across desktops, tablets, and smartphones. When auditing client-side routing, debugging mobile-only redirects, or testing how search engine crawlers interpret your site, you often need to alter your browser’s identity without physically switching hardware. In Google Chrome, the built-in Network Conditions drawer in DevTools allows you to override default browser headers and emulate diverse mobile user agents with surgical precision.

Beyond traditional User-Agent string modification, modern Chromium browsers also implement User-Agent Client Hints (UA-CH)—a structured metadata standard providing servers with granular device attributes such as platform version, device model, and architecture. In this comprehensive guide, we examine how to open the Network Conditions tool, apply preset mobile profiles, construct bespoke user-agent strings, and configure Client Hints in Google Chrome DevTools.

Why Customise User-Agent Strings During Development?

Testing with customised user-agent strings is essential for multiple quality assurance workflows:

• Debugging Mobile Redirects: Verify whether legacy web applications correctly redirect incoming mobile visitors to responsive or dedicated subdomains (such as m.example.com).
• Verifying Bot and Crawler Handling: Emulate Googlebot (Desktop or Smartphone), Bingbot, or social media scrapers to ensure server-side rendering (SSR) feeds render accessible content without cloaking penalties.
• Auditing Responsive Polyfills: Test conditional JavaScript logic and CSS fallbacks that execute exclusively when older operating systems or specific rendering engines are detected.
• Validating Client Hints Compatibility: Ensure your backend web server properly parses Sec-CH-UA request headers instead of relying solely on deprecated navigator.userAgent string sniffing.

How to Access the Network Conditions Drawer in Chrome DevTools

The User-Agent override controls reside inside the Network Conditions utility, which is tucked into DevTools’ collapsible drawer interface:

1. Open Google Chrome and navigate to the webpage you wish to test.
2. Press F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on macOS) to launch Chrome DevTools.
3. Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS) to open the DevTools Command Menu.
4. Type Network conditions and select Show Network conditions from the command list.
5. The Network conditions tab will immediately dock at the bottom of the DevTools interface inside the drawer pane.

How to Select a Built-in Mobile Device Preset

Chrome DevTools ships with a curated library of pre-configured user-agent definitions covering major mobile browsers, desktop platforms, and search engine crawlers:

1. In the Network conditions panel, locate the User agent group.
2. Uncheck the Use browser default checkbox. This activates the configuration controls below.
3. Click the drop-down menu that currently displays Custom….
4. Select your desired profile from the categorised list:
   • Android: Chrome — Android Mobile, Chrome — Android Tablet, or Firefox — Android Mobile.
   • iOS / Apple: Safari — iPhone (iOS), Safari — iPad (iOS), or Safari — Mac.
   • Search Crawlers: Googlebot Smartphone, Googlebot Desktop, or Bingbot Mobile.
5. Once selected, refresh the webpage (Ctrl + R or Cmd + R). The page will re-request all network resources presenting the newly selected user-agent identity to the origin web server.

How to Construct Custom User-Agent Strings and Client Hints

If you need to emulate a niche device, an internal automated testing agent, or an emerging browser engine not included in Chrome’s presets, you can define your own values:

1. In the User agent drop-down menu, select Custom….
2. Click into the text field below and paste your target User-Agent string (for example, a custom Samsung Internet or custom app webview string):

   Mozilla/5.0 (Linux; Android 14; SAMSUNG SM-S928B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/24.0 Chrome/122.0.0.0 Mobile Safari/537.36

3. To ensure modern websites reading navigator.userAgentData receive matching information, click the User-Agent Client Hints disclosure triangle to expand advanced attributes.
4. Customise the key client hint fields:
   • Brands: Add entries matching the target browser (e.g., Brand: Samsung Internet, Version: 24.0).
   • Mobile: Check the box if emulating a smartphone handset.
   • Platform: Specify the host OS (e.g., Android, iOS, Linux, or Windows).
   • Architecture & Bitness: Configure arm or x86 alongside 64 bitness as required.
5. Reload the webpage to inspect your application’s behaviour under the custom profile.

Verifying User-Agent Delivery in DevTools

To confirm that your customised identity is actively transmitted across HTTP transactions:

• In the Console Tab: Open the Console and enter navigator.userAgent to print the active JavaScript identity string. If Client Hints are configured, evaluate navigator.userAgentData to inspect structured brand and platform arrays.
• In the Network Tab: Switch to the Network tab, trigger a page reload, click on the document’s initial HTML document request, and inspect the Request Headers section. Verify that the outgoing user-agent and sec-ch-ua header values match your settings.

Resetting to Default Browser Identity

User-Agent overrides remain persistent inside DevTools as long as the developer tools panel remains open for that specific browser tab. To restore standard Chrome browsing behaviour:

1. Reopen the Network conditions drawer.
2. Re-check the Use browser default checkbox.
3. Reload the active page to return to your machine’s native Chrome user agent and headers.