Developer Resources: View and manually load source maps

Sofia Emelianova
Sofia Emelianova

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

Overview

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.

The source map load error in the Console.

In the Developer Resources panel, 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.

The Status and Error columns.

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.

Filtering out source maps that don't contain 'js' in URL.

Troubleshoot loading source maps

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 Checkbox. Load through website.

The 'Load through website' checkbox

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.

    Selecting 'Add source maps' from the menu.

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

    Specifying the source map URL.

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

    A manually loaded source map makes the original file appear in the file tree.

  7. Proceed to debug your original file.