title: Breakpoints in WebStorm not hitting for JavaScript debugging
body: <p>I have the following configuration setup in WebStorm:</p>
  
  <p><a href="https://i.stack.imgur.com/Q8Whw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q8Whw.png" alt="enter image description here"></a></p>
  
  <p>When I click debug, it launches Chrome fine and navigates to the page, but my breakpoints never get hit. It's connected somehow though because I see all of the <code>console.log()</code> output in WebStorm.</p>
  
  <p>I'm trying to navigate to the URL specified in the screenshot and have breakpoints in <code>main.js</code> get hit, but it doesn't work as expected (see: at all). I'm not exactly sure what I'm missing. I've tried setting a remote URL for the specific <code>main.js</code> file in the <em>Remote URLs</em> section, but that didn't help either.</p>
  
  <p>For reference I run the application via <code>bra run</code> and <code>npm run watch</code>.</p>
  
  <p><strong>Quick Update</strong></p>
  
  <p>So I've been able to actually get a breakpoint to hit, but it's in a different file (in a different path):</p>
  
  <p><code>../public/app/core/routes/dashboard_loaders.ts</code> allows me to stop at breakpoints, but <code>../public/dashboards</code> doesn't. </p>
  
  <p><a href="https://i.stack.imgur.com/6o9nj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6o9nj.png" alt="enter image description here"></a></p>
  
  <p>When I navigate to <a href="http://localhost:3000/dashboard/script/main.js?orgId=1" rel="noreferrer">http://localhost:3000/dashboard/script/main.js?orgId=1</a>, it hits the route:</p>
  
  <pre><code>.when('/dashboard/:type/:slug', {
      templateUrl: 'public/app/partials/dashboard.html',
      controller : 'LoadDashboardCtrl',
      reloadOnSearch: false,
      pageClass: 'page-dashboard',
    })
  </code></pre>
  
  <p>Which ultimately <em>does</em> load the file <code>../public/dashboards/multi.js</code> -- but no breakpoints are hit.</p>
  
  <p><strong>Further Updates</strong></p>
  
  <p>It looks like the script is served via <a href="https://github.com/grafana/grafana/blob/master/public/app/features/dashboard/dashboardLoaderSrv.js#L84" rel="noreferrer">the following command</a> (in <code>../public/app/features/dashboard/dashboardLoaderSrv.js</code>):</p>
  
  <pre><code>/*jshint -W054 */
  var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data);
  var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services);
  </code></pre>
  
  <p>Where <code>$routeParams</code> are <code>type:script</code> and <code>slug:main.js</code> - If I step into this function, I get an anonymous(?) file that's identical to my actual <code>main.js</code> file, but the name is like <code>43550</code> instead of <code>main.js</code> -- I think this is boiling down to a fundamental lack of knowledge in how JavaScript handles something on my part. :)</p>