Debugging Chromium preload script in devtool, no source map

35 Views Asked by At

I'm debugging Electron Apps a lot in Chromiums devtool. I have a lot of code in preload (written in typescript) (socket stuff), but it is very annoying that there's no source or sourcemap found for preload under sources/page tab.

The webpack config are using inline sourcemap when packaging and the preload are build as preload.js and seems to contain sourcemap indeed in the bundle.

But it would be great if it was reflected in 'Sources' tab of devtools enabling setting breakpoints on the preload typescript level etc. I can step "into" from my other calling script parts but then I step into the bundled js version which is not very useful.

Have anyone succeeded making this work then sharing their way would be appriciated.

Here's my webpack config:

const configuration: webpack.Configuration = {
  devtool: 'inline-source-map',

  mode: 'development',

  target: 'electron-preload',

  entry: path.join(webpackPaths.srcMainPath, 'preload.ts'),

  output: {
    path: webpackPaths.dllPath,
    filename: 'preload.js',
    library: {
      type: 'umd',
    },
  },

  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
    }),

    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),

    new webpack.LoaderOptionsPlugin({
      debug: true,
    }),
  ],

I don't know enough about how this works with electrons browser window sending the path to preload etc. for it to work under devtools.

Any help would be highly appreciated:-) Thanks

BR from Peter, Denmark.

0

There are 0 best solutions below