askvity

How to Add a Source Map Manually in Chrome DevTools

Published in Chrome DevTools Debugging 3 mins read

Yes, you can manually add a source map to a local file in Chrome DevTools by interacting with the processed file in the Sources panel.

Adding a source map manually in Chrome allows you to map your compiled or minified code (like bundled JavaScript or CSS) back to its original source files within the browser's debugging tools. This is particularly useful when the source map isn't automatically picked up by Chrome or when debugging local files.

Based on the information from the "Load a source map manually" reference, here's the process:

  1. Host Source Maps Locally: Ensure your source map files (.map files) are accessible on your local machine.
  2. Open DevTools: Navigate to the web page where the processed file is loaded in Chrome. Open Chrome DevTools by pressing F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS).
  3. Enable Source Maps: Although typically enabled by default, you should ensure source maps are active in DevTools settings for optimal debugging. You can usually find this in DevTools > Settings (gear icon) > Preferences > Sources.
  4. Open the Processed File: Go to the Sources panel in DevTools. In the file tree on the left, locate and select the deployed (processed) file you want to map (e.g., a .min.js or a bundled .js file). This file will open in the editor pane.
  5. Add the Source Map:
    • Right-click anywhere within the content of the processed file that is open in the Editor pane.
    • From the context menu that appears, select the option Add source map.
  6. Specify Source Map Location: A prompt will appear asking for the URL or path to your source map file. Enter the local path or URL where your source map is hosted.

Once the source map is loaded correctly, Chrome DevTools will use it to display your original source code in the Sources panel and allow you to debug using your unminified, uncompiled files.

This manual method is described in the reference as a way to "Load a source map manually".

By following these steps, you can effectively connect your source code to the running code in the browser for easier debugging and understanding.

Related Articles