Debugging Experience Builder widgets using Visual Studio 2022

209
0
04-28-2022 11:18 AM
PeterK
by
New Contributor

If you are using Microsoft Visual Studio 2022 as your development environment I was able to use the steps below to debug Experience Builder widgets using that IDE (Visual Studio Code has most of the same functionality as VS 2022 but it may not be the IDE for you):

 

Install ExpBld per ESRI instructions at: https://developers.arcgis.com/experience-builder/guide/install-guide/


Do not run 'npm audit fix' regardless of errors on the install of ExpBld.


Run both ExpBld Client and Server on development machine.


Open a browser to https://localhost:3001/ on development machine, create a new Experience that you will use to test you widget in.


After creating a new experience, add your widget to the experience, save and preview it. In preview tab in browser, copy the URL to the test experience, probably something like: https://localhost:3001/experience/1/?draft=true


Open Visual Studio and select 'Continue without code' on the splash screen.


From the File menu, select 'Open' and then 'Web Site' and browse to the client directory of your ExpBld install. Click on 'client' and then click the 'Open' button.


Click on the Debug menu, then 'client Debug Properties', in the 'Start Action' area, select 'Start URL' and paste in the URL to your test experience (i.e. https://localhost:3001/experience/1/?draft=true).


In the Server area, select 'Use default Web server' and for Debuggers, select ASP.NET.  Then click 'Apply'


Select the Debug menu again and select 'Options'. Be sure that these items are checked:

  • Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
  • Enable using the multi-target JavaScript debugger for debugging JavaScript in ASP.NET projects (requires debugging restart)
  • Enable using the multi-target JavaScript debugger for debugging JavaScript in Node.js project systems (requires debugging restart)

You may want to uncheck 'Enable Just My Code' to catch all errors.


On the Standard toolbar, select Microsoft Edge as your debug browser, then press start debugging.


If you are asked about adding a web.confg, say yes.


You should now be able to set breakpoints in your source code and have those hit as you test your Experience.


If you create a new widget directory, you'll have to stop and restart your ExpBld client and server to get the widget to show up in the ExpBld interface to be able to add it to a new Experience.

Note:  VS 2022 can only debug Node.js project in Edge or Chrome.

Hope this helps

0 Kudos
0 Replies