question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to turn on debug mode in webpack-dev-server

See original GitHub issue

I need to see how webpack-dev-server proxy is trying to redirect calls to API. At the moment when running yarn dev after displaying Listening at http://localhost:8000 console is silent.

I’m changing in build/dev-server.js:

const devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

to:

const devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    // quiet: true,
    logLevel: 'debug',
});

that’s an option I found in webpack-dev-middleware README. But webpack-dev-server seems to ignore it.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
folmertcommented, Feb 19, 2018

Thanks for an insightful answer! I had a feeling that this file is not used.

I’ve moved the proxy rule from devServer to proxyTable as instructed here: https://vuejs-templates.github.io/webpack/proxy.html and now I get the logs as expected:

[HPM] Rewriting path from “/api/admin/v1/users” to “/admin/v1/users”

The proxy itself doesn’t work yet, but with these logs it will be easier to figure out why.

1reaction
LinusBorgcommented, Feb 19, 2018

I’m using proxy option in devServer section of webpack config, which I appended here:

So you try to use this option of webpack-dev-server:

https://webpack.js.org/configuration/dev-server/#devserver-proxy

Well, you will have a hard time with that, because this template doesn’t use webpack-dev-server yet.

/build/dev-server.js contains the custom implementation of a development server.

In other words: You try to config a proxy feature of webpack-dev-server`` but your project doesn’t even use it, and setting debug options for webpack-dev-middleware won’t do anything about that.

Additionally, my initial answer applies: Proxying is not done by the webpack-dev-middleware (I already linked you to the middleware that’s responsible for proxying in my first reply). So adding a debug flag to it will not let you debug proxy traffic even if you define proxyTable correctly.

Solution:

  1. use the /config/index.js proxyTable option, which we provided for you.
  2. Set the loglevel in the proxy middleware instead of the dev-middelware (https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Debugging | webpack
This gives you the power to easily create breakpoints, debug memory usage, expose and examine objects in the console, and much more. In...
Read more >
How to use VS Code debugger with webpack-dev-server ...
I just want to make VS Code's debugger work ...
Read more >
How I solved and debugged my Webpack issue through trial ...
When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location.
Read more >
Add support for WebPack webpack-dev-server debugging (all ...
I'm building meteor/webpack application and a problem with debugger; is that when triggered, server.js file is opened with breakpoint, not original file. I ......
Read more >
How to debug a webpack app in the browser - Jakob Lind
Enable source maps in your webpack app to debug easier ... Now rebuild your project and open up in the browser. You will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found