Product
HTTP Interceptor

A Power HTTP Interceptor to Intercept, Record, Debug & Modify HTTP Requests

API Client

A lightweight and secure API Client for faster API Development & Testing

API Mocking

Build frontend faster without waiting for backend.

Solutions
Frontend Web/Mobile Developers

Requestly improves front-end workflows with local JS testing, mocking, and SessionBook debugging.

For QA engineers

QA engineers love Requestly for its features and ease of use, allowing easy edge case testing.

Support Engineer

Support engineers value Requestly for debugging, demoing, and overriding GTM and Adobe scripts.

Backend Developers

Requestly helps in improving back-end development workflows, by enabling testing.

Pricing
Resources
Pricing
Blog
Case Studies
Status
Github
Release Note
Student Programme
🎉 Requestly joins BrowserStack to build the future of application testing. Read more

HTTP Headers

SourceMap

HTTP Header

The HTTP SourceMap response header indicates the location of a source map associated with a web resource. Source maps are useful for debugging, as they map minified or transpiled code back to the original source code. When both a header and a source annotation are present in a resource, the header’s URL takes precedence in resolving the source map file.

Syntax

SourceMap: <url>
X-SourceMap: <url> (deprecated)

Directives

The <url> directive specifies a relative or absolute URL that points to a source map file. This URL can be relative to the request URL or an absolute path.

Example

The following response contains an absolute path in the SourceMap header.

HTTP/1.1 200 OK
Content-Type: text/javascript
SourceMap: /path/to/file.js.map
<optimized-javascript>

Developer tools utilize the source map to reconstruct the original source from the optimized JavaScript returned in the response. This process allows developers to debug the unaltered source code rather than the minified or optimized version that has been transmitted. By linking to a source map, debugging becomes more efficient and manageable, especially in complex projects.

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the SourceMap header. This is especially useful for controlling how source maps are served or blocked during development or debugging sessions. Steps to Modify the SourceMap Header:

  1. Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
  2. Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
  3. Add a new header modification:
    • Under “Action”, select “Add” or “Override”.
    • In the “Header Name” field, enter SourceMap.
    • In the “Header Value” field, enter the desired value (e.g., your-source-map-url.map or leave blank to disable).
  4. Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-app.com/*).
  5. Save the rule.

Once set up, Requestly will modify the SourceMap header in all matching requests, helping you manage debugging information and control source map access.

Modifying the SourceMap header can be helpful if you want to redirect or block source map files for security reasons or to ensure you are testing with the correct mapping during development.