topic Re: Visual Studio Code For IDE in Web AppBuilder Custom Widgets Questions

Visual Studio Code For IDE

BrettLawson — Wed, 24 Oct 2018 16:34:36 GMT

I'm trying to use visual studio code to debug my custom web app builder widget. I have set up my dev environment out site of the install directory of C:\WebAppBuilderForArcGIS. Then I use the scaffolding created by esri-appbuilder-js generator to run grunt and copy my files into the appropriate directories in WebAppBuilderForArcGIS. My question is how can I now use Visual Studio Code to step through and debug my code? If I use the launch config below then the application page doesn't fully load. The weird thing is that the moment I detach the visual studio code debugger then it finishes loading.

{
 "type": "chrome",
 "request": "launch",
 "name": "Launch Chrome against localhost",
 "url": "https://kipawa:3344/webappbuilder/apps/2/",
 "webRoot": "${workspaceFolder}"
 }

If I try to attach the Visual studio code to a running instance of the app in Chrome with the launch config below, then my break points are never hit.

{
 "type": "chrome",
 "request": "attach",
 "name": "Attach to Chrome",
 "port": 9222,
 "webRoot": "${workspaceFolder}"
 },

Re: Visual Studio Code For IDE

ElenaRakovich — Wed, 24 Oct 2018 18:37:47 GMT

I am successfully using Visual Studio 2015 to debug my web app builder widgets. I copied the application folder to C:\inetpub\wwwroot. In IIS configured it as an application. In VS opened File --> Open --> Web Site , navigated to the application folder.

Then opened Debug --> Properties --> Start Options, under "Server" selected "Use custom server" and as "Base URL" gave the application URL ( http://machine_name/app_name ). I am able to debug directly from VS and all breakpoints are hitting.

Hope it helps.

Re: Visual Studio Code For IDE

BrettLawson — Thu, 25 Oct 2018 17:31:58 GMT

I like the idea of this approach, thanks!

Re: Visual Studio Code For IDE

NicolasRoger — Fri, 13 Sep 2019 13:08:16 GMT

Elena,

could you share more detail about what you did? I have the following questions:

First:

I copied the application folder to C:\inetpub\wwwroot.
...
In VS opened File --> Open --> Web Site , navigated to the application folder.

did you copy ...\WebAppBuilderForArcGIS\server\apps\2 or ..\WebAppBuilderForArcGIS?

Then:

In IIS configured it as an application.

Where can we configure IIS?

Then:

Then opened Debug --> Properties --> Start Options, under "Server" selected "Use custom server" and as "Base URL" gave the application URL ( http://machine_name/app_name ).

What debugger did you check under the server "Use custom server". I have the following choices. Am I missing any?:

Thank you

EDIT:

Nevermind I got it. I'll post my solution below.

Re: Visual Studio Code For IDE

NicolasRoger — Fri, 13 Sep 2019 13:36:48 GMT

So I did almost like Elena suggested but I changed a few things.

1-I am using visual studio2017.

2-I didn't copy app folder anywhere particular (EDIT: The folder is on a local drive. This doesn't seems to work otherwise)

3-In visual studio, I opened a website and navigated to something like " ...\WebAppBuilderForArcGIS\server\apps\2"

4-I have no idea what IIS is or how to configure it so I didn't bother.

5-In the "Start Options" properties, I did like Elena suggested (Custom webserver with adress similar to this: "https://MyComputerName:3344/webappbuilder/apps/2/").

6-Again in the "Start Options" properties, I chose Native debugger:

7-I choose chrome as IIS debugger (whatever that mean):

8-To start debugging, I first manually started "..\WebAppBuilderForArcGIS\startup.bat". I then went back to visual studio and started debugging => Hit points in the code are hit!

I hope this help someone.

Re: Visual Studio Code For IDE

shaylavi — Wed, 18 Sep 2019 07:24:47 GMT

I used to work like that until I realized how slow my loading time gets when using VSCode.

You should really consider using the built-in dev tools in chrome.. they're extremely powerful! you can manipulate the code on-the-fly before applying it on VSCode for example.. complete debugging support of course with watch, conditional break points, network examining and much more. and above all maximum performace.. just my two cents.

Shay.

Re: Visual Studio Code For IDE

NicolasRoger — Thu, 17 Oct 2019 19:55:08 GMT

Ok, I managed to also debug my app in visual studio CODE.

-First you need to install the extension "Debugger for chrome" ( https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome ) for visual studio code.

-Then you need to open a workspace pointing to your app ( ...\WebAppBuilderForArcGIS\server\apps\2\ for exemple)

-Then you go to Debug/Add configuration. I used the following configuration:

{
            "type": "chrome",
            "request": "launch",
            "name": "Launch webApp",
            "url": "https://MycomputerName:3344/webappbuilder/apps/2/",
            "port": 3344,
            "webRoot": "${workspaceFolder}"
}

-Make sure "..\WebAppBuilderForArcGIS\startup.bat" is manually launched then start debugging in visual studio CODE => hit points are hit!

Re: Visual Studio Code For IDE

SuiHuang — Sun, 16 Aug 2020 22:56:24 GMT

This, this detail instruction works for me. I used it in VS2019.

Re: Visual Studio Code For IDE

SuiHuang — Sun, 16 Aug 2020 23:08:52 GMT

I installed debugger for chrome and tried, but got the issue in the screenshot.

Then I tried again by deleting the attribute "port", this time the WAB site could launch, but VS Code indicates that my break point is unbound.

Is it because of the version difference in VSCode, WAB, and the Debugger for Chrome?

Below are my versions.

I am using WAB 2.17