Can I mock the response of my request in chrome dev tool?

Question

I am debugging the frontend issue which only happened in production. I am wondering if there is any way that I can mock the response of request or mock some static file.

For example,

When I call xxx.com, it loads index.html and index.html loads a.js. Since chrome cache the js, is it possible that we can mock the a.js so that index.html will load the mocked a.js?

Abuzz

I remember I do something like that two years ago, but can't find the section area in the devtool anymore – Trass

This might help - How to load local/mocked JS on live production sites – Stipel

Answer 1

There is no way to mock a server response in devtool itself, but there are some chrome extensions helping with this: I've tried 7 of them, but ( Tweak ) the only one was able to:

1. intercept needed URL
2. set the content-type type
3. set the payload

Masseuse

this extension is pretty useful! I have tried and it's and is really easy to use, thanks! – Mashe

Answer 2

As of Chrome 117, you can mock web content locally.

To override web content, open the Network panel, right-click a request, and select Override content.

DevTools currently supports content overrides for the following request types: images (for example, avif, png), fonts, fetch and XHR, scripts (css and js), and documents (html). DevTools now grays out the Override content option for unsupported types.

Skyla

developer.chrome.com/docs/devtools/overrides – Mowbray

Answer 3

You can try puppeteer using page.setRequestInterception() + request.respond(). Something like this:

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.setRequestInterception(true);
    page.on('request', (interceptedRequest) => {
      if (interceptedRequest.url() === 'https://sb.scorecardresearch.com/beacon.js') {
        interceptedRequest.respond({
          body: 'document.title = "42";',
        });
      } else {
        interceptedRequest.continue();
      }
    });

    await page.goto('https://stackoverflow.com/help');

    // await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

Grimaldi

Answer 4

One more solution is npm json-server. It return stored json on each request for specified url

Masseuse

Answer 5

Chrome dev tools also have a way that allows you to edit your JS file code for debugging. You can check this SO answer for list of ways.

You can also use the Redirect Rule of Requestly Chrome extension to replace the production file URL with the localhost file URL, which loads my local JS instead of production JS.

Here are the steps:

1. Create a Replace rule with source condition as production.url/path/to/file/a.js
2. Under Redirect to field enter localhost:3000/path/to/file/a.js
3. Saving it will start redirecting your selected production JS file to the localhost JS file.

In case you don’t have a local setup you can create a file mock in Requestly.

Frippery