title: Can't find javascript source map to debug in chrome devtools
body: <p>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. </p>
  
  <p>In my webpack config file, I added the following line to generate source maps. </p>
  
  <pre><code>devtool: 'source-map'
  </code></pre>
  
  <p>After running <code>npx webpack</code> the following files were generated in my <code>dist</code> folder. 
  <a href="https://i.stack.imgur.com/0hTDf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0hTDf.png" alt="project directory"></a></p>
  
  <p>So I know for sure these files were generated. When I open up resources.entry.js in the chrome debugger, I see the following. </p>
  
  <p><a href="https://i.stack.imgur.com/gk0Js.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gk0Js.png" alt="source map detected"></a></p>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/x5BgJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x5BgJ.png" alt="tree"></a></p>
  
  <p>and I can't seem to do a <code>ctrl + p</code> to search for it like Chrome suggests.</p>
  
  <p><a href="https://i.stack.imgur.com/4tRt4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4tRt4.png" alt="ctrlp"></a></p>
  
  <p>What exactly do I need to do to be able to debug using my source javascript files? </p>
  
  <p>Thank you. </p>