15

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.

Improve this question
1

4 Answers 4

Reset to default
16
+50

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

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Manually adding it was the step I was missing. I can now see it in the document tree and add break points. Thank you.
in chrome 85, there is no "Add source maps" menu item.
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 :)
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 I found it... http://localhost:4200/main.js.map works for me!
|
4

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

Improve this answer

2 Comments

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.
I disable the Ignore List still did not work
1

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.

Improve this answer

Comments

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. 😑

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.