How to quiet the console.log outputs?
volkanunsal opened this issue · 21 comments
This kind of output in the browser console is really hard to work with. Can I disable these outputs?
[HMR] App is up to date.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
You can copy paste webpack/hot/only-dev-server to your project, strip logs from it and use your version instead.
Closing, let me know if I missed something!
Silent option in configuration would be nice.
It's not really something we can control in RHL. You can file an issue with Webpack.
It's a bit hacky, but I currently have this and it helps by clearing the console of old logs after each refresh:
if (WEB_ENV === 'development') {
console.clear();
}
The WEB_ENV variable is set by WebPack in the config.
I'd use if ('production' !== process.env.NODE_ENV) in this case.
You'd need to set it to true using DefinePlugin for production anyway so React is properly compressed.
How disable console.log for webpack/hot/only-dev-server ??
const server = new WebpackDevServer(compiler, { stats: {colors: true}, hot: true, clientLogLevel: 'none', //quiet: true, watchOptions: { ignored: /node_modules/ } /* historyApiFallback: { index: '/' }*/ });
quiet: true not working!
Add this to your apps index.js:
// Clear after module reload
window.addEventListener('message', e => {
if ('production' !== process.env.NODE_ENV) {
console.clear();
}
});For example, this is part of my index.jsx entry point:
...
const render = Component => {
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider className='full-size'>
<Component />
</MuiThemeProvider>
</Provider>,
document.getElementById('root')
);
};
render(App);
if (module.hot) {
module.hot.accept();
window.addEventListener('message', e => {
if ('production' !== process.env.NODE_ENV) {
console.clear();
}
});
}if (module.hot) will get culled out when we run production minification, and every time HMR reloads, we'll clear the console.
This is really annoying, could anyone tell me where these logs are located in the react-hot-reload folder? Did not see them.
@leongaban They're sprinkled liberally througout the code.
Go to your /node_modules/webpack folder and run a search and replace:
find . -type f -name "*.js" -exec sed -i '' 's/console.log.*$//g' {} \;
There's also this:
A quick way to silencing could be filtering in devtools with regex. i.e. ~ /^((?!(\[HMR|\[WDS)).)*$/
UPDATE: in chrome 62 we can simply use -HMR -WDS
Add this to your apps index.js or index.ts:
var _log = console.log;
console.log = function () {
if (arguments[0].indexOf('[HMR]') == -1) //remove hmr logging
return _log.apply(console, arguments);
};
Import log module directly in your bundle, and change logLevel:
import { setLogLevel } from 'webpack/hot/log';
setLogLevel('none');
For those who can't make it work with import { setLogLevel } from 'webpack/hot/log', see this comment: webpack/webpack#6265 (comment)
Hey guys, none of these suggestions worked for me, except the CLI option does!!
webpack --client-log-level warning
// or
webpack --client-log-level error
It defaults to info which is where all the [HMR] and [WDS] spam comes from.
You can also just set clientLogLevel in your webpack devServer config:
devServer: {
clientLogLevel: 'none'
}
https://webpack.js.org/configuration/dev-server/#devserverclientloglevel
If you're using webpack-hot-middleware, you can configure it like this: webpack-hot-middleware/client?reload=true&noInfo=true
Webpack config
devServer: {
clientLogLevel: "silent",
I love you guys. Finally found this thread after raging hard for like two years
In the current version the config is:
devServer: {
client: { logging: 'none' }
}