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.

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.

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.

And here’s the big reveal…

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.

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