remote-debugger-webpack

remote debugger for webpack

Feature

Use weinre

• Remote debug on web console.
• Auto find out idle port.
• Auto inject script tag to html file in webpack-dev-server.

Use vorlon

• Remote debug on web console.
• Auto find out idle port.
• Auto inject script tag to html file in webpack-dev-server.

Install

npm i remote-debugger-webpack --save-dev

npm i vorlon --save-dev
# or
npm i weinre --save-dev

Usage

import RemoteDebuggerPlugin from 'remote-debugger-webpack';

export default {
  ...
  plugins: [
    new RemoteDebuggerPlugin({
    appendScriptTag: true, // whether inject socket script tag 

    vorlonServer: true,  // whether run weinre server in background when run webpack
    vorlonOption: {
      port      : undefined,  // if not define, it can use a idle port
      proxyPort : undefined,  // if not define, it can use a idle port
      state     : '',
    },

    weinreServer: true, // whether run weinre server in background when run webpack
    weinreOption: {  // see: http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html
      httpPort     : undefined,  // if not define, it can use a idle port
      boundHost    : undefined,  // if not define, it can use local ip( not 127.0.0.1)
      verbose      : false,
      debug        : false,
      readTimeout  : 5,
      deathTimeout : 15,
      defaultId    : 'anonymous', // define a default id, if define 'auto', it will give you a random id. format is `${platform}-${browser}-${uid}`
    },

    httpProxyServer: true, // whether run http proxy in background when run webpack
    httpProxyOption: {
      port: 9877,
    },
  ],
  ...
}

Weinre Muti-User

I hope that weinre can find out all the connect by target id, but it didn't. so muti-user are not support, now only one user. you can configure the options to define another id. Anonymous is default.

At last

You can also use the debug plugin of browsersync.