Debugging webpack-dev-server application

I am using webpack-dev-server to run a typescript application.

Is it possible to debug a typescript application running under webpack-dev-server in Webstorm 2017.1?

Thank you.

18 comments
Comment actions Permalink

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

 

1
Comment actions Permalink

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/

0
Comment actions Permalink

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

0
Comment actions Permalink

Sure tell me what details do you want.

0
Comment actions Permalink

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

0
Comment actions Permalink

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'

0
Comment actions Permalink

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

0
Comment actions Permalink

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

1
Comment actions Permalink

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

0
Comment actions Permalink

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.

0
Comment actions Permalink

>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

0
Comment actions Permalink

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

0
Comment actions Permalink

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?

1
Comment actions Permalink

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>
0
Comment actions Permalink

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

Best Regards

RB

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

0

Please sign in to leave a comment.