14

I'm using webpack in a .Net project to bundle my javascript files. I recently ran into a bug that I'd like to debug using chrome dev tools.

In my webpack config file, I added the following line to generate source maps. 

devtool: 'source-map'

After running npx webpack the following files were generated in my dist folder. project directory

So I know for sure these files were generated. When I open up resources.entry.js in the chrome debugger, I see the following.

source map detected

However, I can't seem to actually find the source map so that I can place a break point. I can't find it in the tree.

tree

and I can't seem to do a ctrl + p to search for it like Chrome suggests.

ctrlp

What exactly do I need to do to be able to debug using my source javascript files?

Thank you.

onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • **See Also**: [Sourcemaps are detected in chrome but original source is not loaded](https://stackoverflow.com/q/39146381/1366033) – KyleMit Nov 01 '20 at 21:35

4 Answers4

14

You need to manually add the source maps in dev-tools. Following are the steps.

  1. Open DevTools
  2. Open source tab
  3. Open the minified JS file
  4. Right-click in source code (editor) area
  5. Select the option, "Add Source Maps"
  6. Enter the name of the sourcemaps

Also, make sure you have sourcemaps enabled. (Check this: https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)

Update: Its available in chrome 85 as well.

enter image description here

Snackoverflow
  • 5,332
  • 7
  • 39
  • 69
Chathuranga
  • 1,008
  • 1
  • 15
  • 26
  • Manually adding it was the step I was missing. I can now see it in the document tree and add break points. Thank you. – onTheInternet Feb 21 '20 at 12:14
  • in chrome 85, there is no "Add source maps" menu item. – Patrik Laszlo Sep 22 '20 at 05:19
  • It's available in Chrome 85 as well. Updated the answer with a screenshot. – Chathuranga Sep 22 '20 at 07:07
  • I do not see the "Add source map" option in chrome 86 as well. Or does it not appear if chrome detects the source map from website? Can I remove it somehow to add my own? – Snackoverflow Dec 08 '20 at 13:54
  • 3
    Found it, you have to specifically select the concatenated js file and right click in its editor view. If you select some other file and right click in the editor view, "Add source map" option will not appear. You may want to add that step between steps 2 and 3 :) – Snackoverflow Dec 08 '20 at 13:56
  • 6
    I have tried to add it, but it doesn't do anything, what should be the url? I have added the same that appears in the processed js file, but is not working – Matteo Dec 24 '20 at 03:46
  • this is weird, I doubt that's the way to do it – Aurelien B May 05 '21 at 22:36
  • 1
    @Matteo I found it... `http://localhost:4200/main.js.map` works for me! – Jasper Dec 06 '21 at 16:39
  • Man I wished this actually worked. That is missing int he drop down in Chrome today. – user959690 Feb 10 '22 at 02:04
3

Despite Chathuranga's answer not working in my Chrome DevTools, I have figured out a solution for the problem

Chrome version: 102.0.5005.115 (Official Build) (arm64)

Step 1: Open the DevTools.

Step 2: Select the setting icon at the top right corner: setting icon

Step 3: Preferences- check the option "Enable JavaScript source maps: enable sourcemap

Kelei Ren
  • 360
  • 4
  • 10
  • 1
    If `Enable JavaScript source maps` checked, but still source map does not appear, then you should check the `Ignore List` tab as well. In my case, the source file was added to the ignore list somehow. I cannot recall when I added, I must have misclicked sometime. – Botond Balogh Nov 21 '22 at 12:24
0

I arrived here because I was also having issues with source maps.

Symptoms:

  • Chrome dev tools showed the minified index.js.
  • There was a proper //* sourceMappingURL=index.js.map at the end of the file.
  • right-clicking in the code and choosing "add source map" popped up a dialog window, but filling it in never had any effect.

I finally figured out that Chrome seems to either not support, or has a bug with, source maps on ipv6 URLs.

i.e.: If you're developing against a URL like http://[2006:...:42]:8080/index.js it will just not try to load source maps. Fun!

I worked around it by restarting my dev server and (also) binding to an ipv4 address.

Cody Casterline
  • 787
  • 5
  • 11
0

If other solutions don't work, you can try this:

devtool: inline-source-map

This way, you can make the sourcemap included in the bundle.

Ömer Hattapoğlu
  • 68
  • 6