Debugging webpack-dev-server application

A picture of the current setup (debug is not working) :

Sure it's possible; but it may require additional configuration (remote URL mappings, etc.). See http://stackoverflow.com/questions/34785314/how-to-debug-angular2-seed-project-in-phpstorm-webstorm/34789890#34789890, for example - instructions there refer to angular2-seed project that uses webpack-dev-server; see also https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

If you can't make it work, please provide your project (doesn't look like a proprietary one, as far as I can tell from the picture) - I might be able to assist

Sure tell me what details do you want.

please provide the project - just zip the entire folder (except for node_modules - as they can be restored from package.json) and upload to some file server

https://github.com/skiabox/TypescriptProject1

what command do you use to build and run your project? I've tried 

"webpack-dev-server --progress --port 8000"

with different options other options... And i always get 'ReferenceError: exports is not defined'

Nothing fancy.I am using just webpack-dev-server without any arguments.

well... I'd say that your setup is a complete mess.

- delete `dist' folder, run webpack-dev-server, open URL in browser => GET http://localhost:8080/dist/app.js 404 (Not Found)

Expected behavior, as webpack-dev-server doesn't flash generated files to disk when building your project, everything is in memory

- now run `webpack` => dist is generated and can be served, but as soon as you open .ts file to add breakpoint, generated file is overwritten by TypeScript compiler, that you had enabled for some unknown reason - result is 'ReferenceError: exports is not defined'

Still you can:

- uncheck 'enable typescript compiler' in Preferences | Languages & Frameworks | TypeScript

- build the project with 'webpack' to generate dist

- run 'webpack-dev-server' - though it will rebuild the project, generating different bundle and sourcemaps, WebStorm still can resolve breakpoints generated by webpack in previous run.

- create javaScript Debug run configuration for http://localhost:8080/, debug, once page is loaded, refresh the browser - breakpoints in src/app.ts will be hit

Note that you won't be able to debug your app in chrome Dev tools when running webpack-dev-server - so a working debugging from webstorm is a kind of fluke, a bit of magic:) Just a hack to make debugging work in some edge cases

Thank you for your advice.

I followed your proposed steps and it is working if you have chrome dev tools closed.

If you have chrome dev tools open it says something about a chrome bug.

>If you have chrome dev tools open it says something about a chrome bug

yes, it's a known Chrome limitation - you can't attach 2 debuggers to the same page simultaneously, as soon as Dev Tools are opened, WevbStorm debugger is disconnected. See  http://code.google.com/p/chromium/issues/detail?id=129539

Hello, 

I'm also having some problems with setting up debugging. Here is the link to my problem with detailed description on StackOverflow: https://stackoverflow.com/questions/46697906/debugging-vuejs-2-in-webstorm

Could you please provide some help ?

Best regards

RB

Can't recreate.

My steps:

- create a new vue application using vue init webpack vue-webpack

- in build/webpack.dev.conf.js, change 

devtool: '#cheap-module-eval-source-map'

to

devtool: 'source-map'

- create a JavaScript Debug run configuration for http://localhost:8080 (no mappings required)

- set breakpoint in src/components/HelloWorld.vue, line 28

- start server with npm run dev, hit Debug

- refresh the browser page to get breakpoints hit

No extra breakpoints are hit.

Please can you provide a sample project I can use to recreate the issue?

I repeated your steps, and it works as you described, however, when adding some code to the project debugging stop working. eHere is the modified code for HelloWorld.vue, try setting up the breakpoint inside helloMethod(), and see if you can trigger it by pressing the button on the front end. For me it does not stop at the breakpoint, without setting up the mappings, like this: project/src ==> webpack:///src. And when this mapping is in place debugger is working, but when I press 'step over' in the interface it jumps to file app.js.

Best regards RB

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <div>
      <button @click="helloMethod()">hello</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    helloMethod(){
      let a = 'ee';
      let b = 'rr'+a;
      console.log("HelloMethod "+b)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

I forgot to mention that I'm using Ubuntu 16.04, and WebStorm 2017.2.4

Best Regards

RB

reproduced, logged as https://youtrack.jetbrains.com/issue/WEB-29261; please follow it for updates

We would also like to debug a webpack application. The interesting part is that the application runs as Microsoft Word addin, that uses IE11 as agent.