Debug poject and step into BabylonJS code

Questions
1

Is it possible to debug a project and step into the BabylonJS code?

How do you guys setup such a project? When I am trying to debug my code I can step into the code but I only see the minified babylon.js functions.
I would like to step through the Babylon Typescript files.

(my setup for now is bundled with webpack)

Thanks!

2

Using the ES6 packages this is something you should be able to do
Pinging @sebavan for confirmation

3

The @babylonjs/core packages includes map files for this purpose. Also if you rely on babylon.max.js, there is the associated .map available in the dist folder.

4

Thank you for your answers.
I tried to include the source maps but failed.

Here is a test project - I can debug my own code but not the library code:

Perhaps someone is using a similar approach and got it working?

5

Your project does not rely on the es6 version @babylonjs/… of npm and is using atm the min version of Babylon which does not have a map file as we discussed earlier.

You need to either change your dependency or use the max version of babylon delivered in the npm packages.

To do so use alias setup in Webpack:

resolve: {
extensions: [’.tsx’, ‘.ts’, ‘.jsx’, ‘.js’, ‘.json’],
alias: {
“babylonjs”: path.resolve(__dirname, ‘node_modules/babylonjs/babylon.max.js’),
“babylonjs-loaders”: path.resolve(__dirname, ‘node_modules/babylonjs-loaders/babylonjs.loaders.js’)
}
},

and also, fix your sourceMapDevPlugin:
new webpack.SourceMapDevToolPlugin({
filename:’[file].map’,
include:[‘vendor.js’]
}),

and do not embed a second d.ts file for babylon as it is creating a lot of dupplicate errors in TS.

image

1 Like