Select to view content in your preferred language

Experience Builder Developer Edition - Debugging deployed application

261
1
Jump to solution
2 weeks ago
Labels (1)
ATFerguson
Regular Contributor

I'm running ArcGIS Experience Builder 1.17 on ArcGIS Enterprise 11.3. I noticed that there is a small bug in my deployed application running on Windows IIS that I am not able to reproduce in my development environment. As such, I am trying to debug the deployed app (downloaded via the app-download.js script, https://developers.arcgis.com/experience-builder/guide/experience-deployment/#automated-deployments). 

I want to set a breakpoint in the deployed, transpiled JavaScript running on IIS from my browser. However, I am unable to get execution to 'break' when the line with the breakpoint executes. When the line with the breakpoint executes, it flashes in the browser developer tools "sources" tab, but execution doesn't stop.

I've tried updating <ExB root>\client\webpack\webpack.common.js line 472 from:

exports.sourceMapOption = process.env.NODE_ENV === 'production'? false: 'inline-source-map';

, which creates a widget.js file in the myWidget\dist\runtime\ folder
to:

exports.sourceMapOption = process.env.NODE_ENV === 'production'? false: 'source-map';

which creates a widget.js file and a widget.js.map file in the myWidget\dist\runtime\ folder, but either way, I'm unable to make breakpoints work in the transpiled code that runs on my web server.

 

I'm new to webpack, and I haven't been able to find any resources on the Esri/Experience Builder documentation that describes debugging the deployed application. If anyone has any suggestions, I'd appreciate it!

0 Kudos
1 Solution

Accepted Solutions
VenkataKondepati
Occasional Contributor

Hi @ATFerguson,

A few quick checks usually solve it:

  1. Make sure Chrome has Enable JavaScript source maps turned on.

  2. Confirm widget.js ends with //# sourceMappingURL=widget.js.map and that IIS serves the .map file (add a MIME mapping for .map → application/json in web.config).

  3. Rebuild the app with devtool: 'source-map' and set minimize: false if you want easier debugging.

Once the map loads with a 200 in the Network tab, breakpoints should stick. If not, try dropping a debugger; statement in your code to confirm execution is hitting the right spot.

Regards,
Venkat

View solution in original post

1 Reply
VenkataKondepati
Occasional Contributor

Hi @ATFerguson,

A few quick checks usually solve it:

  1. Make sure Chrome has Enable JavaScript source maps turned on.

  2. Confirm widget.js ends with //# sourceMappingURL=widget.js.map and that IIS serves the .map file (add a MIME mapping for .map → application/json in web.config).

  3. Rebuild the app with devtool: 'source-map' and set minimize: false if you want easier debugging.

Once the map loads with a 200 in the Network tab, breakpoints should stick. If not, try dropping a debugger; statement in your code to confirm execution is hitting the right spot.

Regards,
Venkat