Developer Resources: View and manually load source maps

Use the Developer Resources tab to check if DevTools loads source maps successfully. If required, you can load them manually.

When you open DevTools, it attempts to load source maps, if any. In case of failure, the Console logs an error similar to the following.

In the Developer Resources drawer tab, you can view the source map load status and even load source maps manually.

# Open Developer Resources and check status

To check the load statuses of source maps:

1. Open DevTools, make sure to enable source maps, and navigate to > More tools > Developer Resources.

2. In the table, check the values in the following columns:

   • Status to see if the source map loading was a success or failure.
   • Error to read the error message, if any.

# Filter resources by URL or Error

To focus on source maps that interest you, enter text in the textbox at the top to filter out source maps that don't contain this text in URLs or error messages.

# Troubleshoot

By default, DevTools requests source maps rather than the website. Such requests may be treated as cross-origin and might not get through.

To make the website request source maps first, in the top right corner of Developer Resources, check Enable loading through target.

If you still have issues with loading source maps, try to load them manually as described next.

# Load a source map manually

If you encounter load failures or, for example, want to debug your original code on a website in production that lacks source maps, you can load them manually:

1. Generate source maps using tools that support them.

2. Host the source maps locally.

3. Open DevTools on your page and make sure to enable source maps.

4. Open the deployed (processed) file in Sources, right-click it in the Editor, and select Add source map from the menu.

   

5. In the textbox, specify the source map URL and click Add.

   

6. Check if the source map appeared in Developer Resources and the original file (mapped from the deployed one) in the file tree.

   

7. Proceed to debug your original file.