Enable Source Mapping

UXP Developer Tool
1

Is it possible to use something like source mapping when building with webpack? Sometimes the error messages in the XD Dev Console are ambiguous, referring to a line from the bundled main.js, not the true source file.

-Thanks!

1 Like
2

The build process compiles your code into one single main.js file which is the only file XD looks at other than manifest.json. I can’t think of a good wait to map it back to the source code. anyone?

1 Like
3

@stevekwak
There is a standard for source maps (in JS), which could (and for this would have to get parsed) by XD. Cf. https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/. With it (which can get generated for basically all build processes, may that be from TypeScript, a simple webpack JS to JS compilation or whatever else), it is possible to trace back the “original” file location.

1 Like
4

Is source mapping possible with Chrome Devtools in Adobe XD?

I tried the following steps but it didn’t work.
It doesn’t show webpack file tree in Chrome Devtools.
Has anyone ever had this problem?

  1. git clone GitHub - pklaschka/xd-plugin-boilerplate: A boilerplate for plugins for Adobe XD CC including preconfi
  2. Add 「devtool: ‘source-map’,」 「to webpack.config.js」.
  3. Create 「debug.json」 to 「dist」 folder.
  4. npm install
  5. npm run debug:install
  6. Run 「CheckNetIsolation LoopbackExempt -is -n=“Adobe.CC.XD_adky2gkssdxte”」 as administrator.
  7. Run Adobe XD.
  8. Run 「chrome://inspect」, then 「inspect」.
  9. Right click on main.js in Chrome Devtools and select 「Add source map
」
    10.Enter the following in 「Source map URL」
    main.js.map
    file:///path/to/main.js.map ※Adobe XD developer folder
    file:///path/to/main.js.map ※xd-plugin-boilerplate foler

Thanks for the help.