SuiteScript 2.0 Client Script Debugging

I recently ran into a problem where I created a Suitelet that downloaded HTML to include in the page. Next, I wanted to add JavaScript. However, when I went to debug the JavaScript in Chrome it threw an error, but the “Sources” tab in Chrome Dev Tools was blank. I saw the red X, but there was no code. Just the X! Here’s how to fix that. 

First, a little background. This is important because this might be the only scenario where you experience this problem. It has to do with JavaScript that is included inline with a <Script> tag.

Why was I bundling my HTML and JavaScript into one file? If you’re not interested, then skip to the end. That’s where you’ll get your answer to how to debug inline JavaScript in Chrome.

My Suitelet fetches a couple of files from NetSuite’s file cabinet.

Here’s a snippet from the Suitelet that adds an inline HTML element to my screen and then fetches 2 files from the file cabinet and injects the contents into the inline element. It saves putting all the HTML in the Suitelet.

Inline HTML Element

To be thorough, here’s the code that actually fetches the HTML prior to pushing it into the form. It is completely irrelevant to the problem at hand.

Load File method

And here’s a snippet from the HTML that I’m injecting into my Suitelet. The only thing of relevance here is the fact that I’m keeping my JavaScript in the same file as the HTML. I wanted to make it easy on myself to find it. And when I’m making changes to HTML and JavaScript, I upload just this one file.

download HTML

And here’s the big reveal…
sourceURL

When you put this comment into your JavaScript, Chrome will associate what’s in the script tag with this file name. Here the “Sources” tab from Chrome’s Dev Tools screen.

Amazing

Now you can find it, set breakpoints, and even see code when something blows up. Amazing!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s