Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsYou can’t use Chrome DevTools’ interactive Local Overrides folder picker as a normal headless Puppeteer API. For repeatable headless tests, use Puppeteer request interception: match the URL, load a fixture file, and fulfill the request with request.respond(). This can replace JavaScript, CSS, HTML, JSON, API responses, and response headers without changing the server. Enable interception before navigation and resolve every intercepted request.
What Local Overrides does—and what headless Puppeteer needs instead
Chrome DevTools Local Overrides is an interactive workflow: you select a folder, save a modified response or file there, then reload the page. DevTools serves the local modified copy instead of the network resource and automatically disables cache. It can override web content, XHR/fetch responses, and response headers. Chrome for Developers explains the workflow.
Headless Puppeteer does not expose that Sources > Overrides folder-selection workflow as a standard automation API. For automated runs, the practical equivalent is request interception: Puppeteer pauses requests and lets your code continue them unchanged, abort them, or provide synthetic responses. This recreates resource-level replacement, not every detail of the DevTools feature. In particular, your interceptor does not automatically disable cache just because DevTools Local Overrides does.
Use headless interception when you want deterministic fixtures in a test or CI job. Use a visible browser when you need to inspect the actual DevTools Overrides interface. If you need to replace a whole document rather than a network resource, a CDP document replacement is another option, described below.
#1 Best Overall
- Full-Size Layout – Enjoy comfortable typing with well-spaced keys in a compact design.
- Plug-and-Play USB – Quick and easy setup; no drivers or software required.
- Chrome OS Compatible – Perfect for Acer Chromebooks and other Chrome OS devices.
- Durable Build – Designed for long-lasting performance with quality materials.
- Universal Support – Works with Windows, Chrome OS, and most USB-enabled devices.
Replace a resource with a local fixture
The example below uses an ES module, current Puppeteer APIs, and a narrowly matched JavaScript URL. Save it as override.mjs; place the replacement at overrides/app.js. Install Puppeteer in the project with npm install puppeteer, then run node override.mjs.
import puppeteer from 'puppeteer';
import {readFile} from 'node:fs/promises';
const browser = await puppeteer.launch({headless: true});
try {
const page = await browser.newPage();
const targetUrl = 'https://example.test/assets/app.js';
await page.setRequestInterception(true);
page.on('request', async request => {
if (request.isInterceptResolutionHandled()) return;
if (request.url() === targetUrl) {
const body = await readFile('./overrides/app.js', 'utf8');
// Another listener may have handled it while the file was read.
if (request.isInterceptResolutionHandled()) return;
await request.respond({
status: 200,
contentType: 'application/javascript',
body,
});
return;
}
await request.continue();
});
await page.goto('https://example.test', {waitUntil: 'networkidle0'});
// Add assertions or take a screenshot here.
} finally {
await browser.close();
}Change the target and navigation URLs to the page and resource you control. The response’s status and MIME type should match what the site expects. Here the replacement is a successful JavaScript response; for a JSON fixture, return JSON text with an appropriate JSON content type. A mismatched MIME type or status can make a correct-looking fixture behave differently from the original.
Why each part matters
- Interception starts before navigation. That allows the initial document and its subresources to be caught. Enabling it after
goto()will not retroactively intercept requests already made. - The match is exact. Matching the full URL avoids accidentally replacing similar paths or unrelated third-party assets.
- Other requests continue. Once interception is enabled, requests stall until your code continues, responds to, or aborts each one. Leaving a non-target unresolved can hang navigation.
- The file is read for the matched request. Keep the fixture in the project so local runs and CI use the same replacement.
- The browser closes in
finally. This avoids leaving a process behind if navigation or an assertion fails.
Map common DevTools override tasks to Puppeteer
| DevTools task | Headless Puppeteer approach | Important detail |
|---|---|---|
| Replace JavaScript, CSS, HTML, or JSON | Match its request URL and call request.respond() with a fixture body. |
Set a suitable status and content type; use a narrow URL predicate. |
| Mock an XHR or fetch response | Match the API endpoint and fulfill it with fixture data. | Preserve the expected response shape, status, MIME type, and relevant headers. |
| Replace response headers | Pass a headers object to request.respond(), along with the replacement body. |
request.continue() can instead modify request-side headers; it does not itself synthesize a response. |
| Change request headers | Call request.continue({headers: ...}) for the matched request. |
Do not confuse request headers sent to the server with response headers returned to the page. |
| Bypass page CSP for controlled debugging | Call await page.setBypassCSP(true) before navigation. |
This concerns the page’s content security policy, not replacement of a resource. The underlying CDP command is documented in the Chrome DevTools Protocol Page domain. |
| Inspect the visible DevTools Overrides UI | Launch with headless: false. |
This is useful for interactive inspection, not required for a repeatable headless fixture test. See Puppeteer’s debugging guide. |
Puppeteer documents that Page.setRequestInterception() enables abort, continue, and respond on intercepted requests. See the Page API and HTTPRequest.respond API.
Handle multiple listeners, cache, and service workers deliberately
Prevent duplicate resolution
If another listener or package can act on requests, guard the handler with request.isInterceptResolutionHandled(). The check before an asynchronous read is not enough on its own: another handler could resolve the request while readFile() is pending. Check again immediately before calling respond(). Puppeteer’s request interception guide advises that the check and resolution action should occur synchronously together when no asynchronous work separates them.
Rank #2
- Improve Office Efficiency: The magnetic keyboard is designed for Chromebook x2 11 da0023dx tablet keyboard, with touchpad, functional shortcut key support, high office efficiency.
- Premium Material: The tablet keyboard is made of ABS and PU material, sturdy and long lasting, protects the keyboard from easy damage. The robust construction of the case protect that your keyboard remains secure and intact, providing you with a practical tool for your daily tasks.
- Easy to Install: Magnetic keyboard is easy to install, fits the tightly and provides a stable typing experience, saving your time and effort while improving your overall typing performance.
- Compatibility: OEM part number is TPN H101K, compatible for Chromebook x2 11 da0023dx, ensuring quality and stability. Ensure integration and performance.
- Fine Craftsmanship: The keyboard is precisely cut without interfering with operation, meticulous craftsmanship, beautiful and practical, adding style and protect to your device.
Every intercepted request must be resolved exactly once. If your application has several request handlers, coordinate their behavior so one handler does not continue a request that another intends to fulfill. Check the handled state before acting, and avoid broad event handlers that resolve requests without considering other code.
Do not assume DevTools cache behavior
Local Overrides automatically disables cache; a custom Puppeteer interceptor does not automatically reproduce that policy. Decide whether the test should exercise a cached response or force a fresh path, then configure page/browser cache behavior accordingly. A service worker can also affect which network activity the page makes, so establish whether your test should use the application’s service worker or bypass it. Treat these as separate test conditions rather than assuming interception duplicates every DevTools behavior.
Replace an entire document through CDP
For a synthetic document—not for selectively replacing one production asset—you can attach a Chrome DevTools Protocol session and use the Page domain’s Page.setDocumentContent command with a frame ID and HTML string. This replaces the content of that frame rather than fulfilling a particular network response, so it is the wrong tool when you need the page’s normal resource-loading path with only one file mocked.
const client = await page.createCDPSession();
const {frameTree} = await client.send('Page.getFrameTree');
await client.send('Page.setDocumentContent', {
frameId: frameTree.frame.id,
html: '<!doctype html><title>Fixture</title><p>Synthetic page</p>',
});The command and parameters are defined in the CDP Page domain. Use it for a whole-frame replacement; use interception when the page should remain real and only a response should differ.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #3
- Experience Unparalleled Freedom: Say goodbye to tangled cords and embrace the ultimate convenience of the Lenovo 510 Wireless Keyboard and Mouse combo. This powerful duo operates seamlessly using a single 2.4 GHz nano-USB receiver, streamlining your workspace, and liberating your ports.
- Elegance Redefined: Elevate your desk aesthetic with the Lenovo 510's sleek wireless design. Its minimalistic charm adds a touch of sophistication to any workspace. Enjoy the ease of use that requires no complex installations – simply plug in and go.
- Uncompromised Durability: Accidental spills are no longer a threat with the spill-resistant wireless keyboard of the Lenovo 510. Its intelligent island design and comfortable keys on the full-size layout ensure effortless typing, even in the face of minor mishaps.
- Effortless Comfort, Any Hand: Designed for extended usage, the ambidextrous and ergonomic 1200 DPI wireless mouse is the perfect companion for both left and right-handed users. Revel in the convenience of a 12-month battery life powered by a single AA battery.
- Enhanced Efficiency: Never struggle with password errors again, thanks to the LED indicators on the Caps Lock and Num Lock keys. Stay on top of your input with these user-friendly visual cues, streamlining your tasks and enhancing your overall computing experience.
Troubleshoot overrides that fail in headless or CI
The page hangs at navigation
Likely cause: an intercepted request was neither continued, fulfilled, nor aborted, or the handler threw before resolving it. Ensure the non-target path calls request.continue(), inspect errors in the handler, and avoid waiting indefinitely on fixture reads. Add targeted logging for the request URL and the branch taken.
The replacement never appears
Confirm that interception was enabled before goto(), that the request URL exactly matches (including path, query string, and scheme), and that the expected resource is actually requested. A cached resource or service-worker response may change the network path; configure those behaviors intentionally and inspect requests during the run.
The replacement is returned but the app behaves incorrectly
Check the HTTP status, content type, body format, and headers against the real contract. For JSON, return valid serialized JSON rather than a JavaScript object value; for scripts and styles, use the expected MIME type and syntactically valid content. The application may also depend on headers such as caching, CORS, or content-disposition values.
You see an interception resolution error
Multiple handlers may be attempting to resolve the same request. Use isInterceptResolutionHandled(), check again after any awaited work, and coordinate listeners so a request has one resolution owner.
Recommended Free Tools
Rank #4
- 【Versatile 2-in-1 Chromebook】Dell Chromebook 3100 2-in-1 student laptop combines versatility and durability, with an 11.6-inch HD touchscreen designed for learning, work, and entertainment. Its rugged chassis withstands everyday bumps and drops, while its flexible 2-in-1 design with Japanese keyboard allows you to easily switch between laptop, tablet, tent, or stand modes.
- 【Efficient Processor】Equipped with an Intel Celeron N4000 Dual-Core Processor, this Chromebook laptop delivers reliable performance for web browsing, streaming, and light multitasking, ensuring smooth operation without draining battery life.
- 【Responsive Memory & Storage】Featuring 4GB RAM and 32GB eMMC storage, this 2-in-1 Chromebook Dell laptop ensures fast startup, smooth multitasking, and efficient performance for daily computing tasks.
- 【Convenient Connectivity】This Dell touchscreen Chromebook laptop includes USB Type-C, USB 3.1 ports, microSD card reader, and headphone/microphone combo jack for easy connectivity to accessories and external devices.
- 【Chrome OS for Everyday Productivity】Pre-installed with Chrome OS, this Dell touchscreen Chromebook provides fast boot times, built-in virus protection, automatic updates, and seamless access to Google Workspace and the Google Play Store for work, study, and entertainment.
It works visibly but fails in headless CI
DevTools’ folder picker is an interactive UI workflow, while headless interception is code-driven. Make the fixture path relative to the script or project working directory you control, ensure the fixture is present in CI, and do not depend on a folder selection made in a developer’s local DevTools profile. Use headless: false only when diagnosing the visible browser UI is the task.
Cache makes the test inconsistent
DevTools Local Overrides disables cache automatically, but your interceptor does not inherit that behavior. Set the desired cache policy explicitly and account for service workers. If the objective is to test a fresh resource response, make that condition part of the test setup rather than relying on incidental browser state.
Or skip the browser setup
If you need a screenshot of a live page rather than a Puppeteer test with a custom fixture, ScreenshotNeo can return an image or PDF through one GET request. For example, with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie/consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with the result identified in response headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Sign up for 1,000 free screenshots a month—no card required.
Frequently Asked Questions
Can Puppeteer load the same override folder that Chrome DevTools uses?
Not through a standard headless Puppeteer Local Overrides API; use request interception with fixture files for automated replacements.
Does Puppeteer request interception disable cache like Local Overrides?
No. Configure cache behavior separately if your test needs to match that aspect of DevTools.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
