Can't debug in Chrome DevTools, only when using webpack

Adobe XD UXP Plugin API
1

Hi, is it possible to debug with DevTools when using webpack?

Prior to adding webpack I tried debugging my plugin with chrome://inspect and it was working using a debug.json containing,

{
  "port": 9345,
  "breakOnStart": false
}

Then I added my own webpack setup and it works great but I lost chrome debugging. As a test, I tried this boilerplate plugin project and debugging in chrome still wasn’t available. No targets appear under the “Remote Target #LOCALHOST” header.

Here’s my webpack (not from the boilerplate project referenced above)

const path = require('path')

module.exports = {
  // entry: "./src/main.jsx",
  entry: "./src/main.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    libraryTarget: "commonjs2"
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: "none", // prevent webpack from using eval() on my module
  // devtool: "source-map", // trying to get chrome://inspect debugging working (works when not using webpack)
  // devtool: "cheap-module-source-map & cheap-module-inline-source-map", // trying to get chrome://inspect debugging working (works when not using webpack)
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  externals: {
    uxp: "uxp",
    scenegraph: "scenegraph",
    // application: "application"
  }
}

I’ve tried playing with webpack’s devtool options but it’s not helping. I’m not sure what else to try but having a debugger was definitely more productive. Thanks for any tips!

1 Like
2

What aspect of it isn’t working for you? For me, debugging works (webpack or no webpack), but source maps, for now, do not appear to get recognized by the dev tools (not sure about that, though)…

Do you have your debug.json next to the manifest.json? Since webpack, after all, has some own folder structure, this might be an easy-to-overlook problem. In the boilerplate, it has to be /dist/debug.json.

Then, you’ll also have to run (different to what’s noted in the docs)

CheckNetIsolation LoopbackExempt -is -n="Adobe.CC.XD_adky2gkssdxte"

before running XD as discovered by @paolo.agostinetto (cf. Chrome DevTools in Windows: enable loopback).

For me, it’s working with this in the boilerplate…

3

Also, there may sometimes just be instances when it doesn’t work and you have to restart Chrome, XD, plugins etc. a few times. The Chrome Dev Tools integration is, after all, still in Beta and I’ve experienced some rough edges relatively often, meaning solutions you’ve tried might have been correct, but it just was “this case” where some other link in the chain broke :wink:

4

Thanks for your quick reply! You were right about my debug.json location. I had it in the root and that’s where my pre-webpack setup all was before but good eye noticing that I had restructured and am now using /dist with webpack. I moved my debug.json into there and it works again, which is awesome. I didn’t need to add the CheckNetIsolation option FYI.

1 Like