Every developer should be doing interactive debugging. Here’s how to debug client-side SuitesScript using vsCode.
Before continuing on, I’d highly recommend you watch this video by James Quick. It’s worth your time. Thanks James!
Now that you know what’s possible, let’s get this working with NetSuite. There are several ways to go about it.
- Configure vsCode to auto-start Chrome and open the URL that you’d like to debug
- Configure vsCode to attach to an already-open page in Chrome
Let’s look at my launch.js file. It defines 2 configurations (methods of starting debugging).
Here is where I’d select one of my two configurations to start interactive debugging. You can easily see how these dropdowns match my 2 configurations in my launch.js file.
In this example, logic_comp_common.js lives locally in my
[vsCode workspace root]\Components\Common folder. This matches the location I’ve set in webRoot parameter. This lets vsCode and Chrome seamlessly match the downloaded version of the code seen by the browser with vsCode’s version of the code saved locally.
When the two files match vsCode lets me set stops directly in my workspace copy of logic_comp_client.js.
Option #2 – “Any URL Attach” tells vsCode to attach to an already open web page. In this case, I click the second option in the dropdown before clicking the green “Play” button to start debugging.
But first (don’t ya hate that)… In order to attach, I need to tell Chome to start in debugging mode. I do this in the shortcut where I launch Chrome. Note! The port specified here must match the one in launch.json.
In this example, when I try to set a stop in logic_comp_common.js, the breakpoint will not turn bright red like it did in the previous example. The reason: vsCode cannot correctly associate logic_comp_common.js in my workspace with the file downloaded from the server to the browser.
This is because the layout of the files in my vsCode workspace does not match the layout of the files on the server.
If the folders had matched, this would have worked. However, I can work around this. If I double-click the file under “Loaded Scripts”, it will open a second copy (the browser’s copy) of the file. Note below that logic_comp_common.js appears in two tabs.
In this copy of the logic_comp_common.js, I can set stops and step through code.
Hopefully, I’ve worked through enough examples of how to launch vsCode debugger and how to associate files in your local workspace with files downloaded from server to browser and set stops. Between my notes and the video, you should be successful in doing interactive debugging in vsCode. That’s where I’m headed! Won’t you join me?