Dashboards & Visualizations

How do you debug JS in Splunk 7?

eroffol
Path Finder

We just made the switch from Splunk 6.2.3 to Splunk 7.0.1 and a lot of our custom JS broke. I am trying to debug through and make changes where necessary, but I can't seem to use any of my browsers (Chrome, Firefox, IE) to debug. With Splunk 6.2.3, I used to be able to view my JS files in the web console and add breakpoints. It seems like with Splunk 7.0.1, I can add JS and have it work, but I can't add breakpoints to my source because I can't find it in the web console.

For example, here are the steps I took to reproduce this:
1. Create a new app (called test)
2. Create a directory under $SPLUNK_HOME/etc/apps/test/appserver/static/
3. Added a JS file in $SPLUNK_HOME/etc/apps/test/appserver/static/hello.js. Code is just a simple console.log("Hello");
4. Created a dashboard in the test app.
5. Linked new dashboard to hello.js. <dashboard script="hello.js">...
6. Restarted splunk
7. Navigate to the new dashboard
8. Opened web console

In Splunk 6.2.3, the console output looks like:
Hello hello.js:6:1
I can then click on hello.js:6:1 and navigate to the JS source, add breakpoints, etc...

In Splunk 7.0.1, the console output looks like:
Hello common.js%20line%2014%20%3E%20eval:5:1
If if click on common.js%20line%2014%20%3E%20eval:5:1, it navigates me to view-source:http://<splunk_hostname>:<splunk_port>/en-US/static/<uid>/build/pages/enterprise/common.js line %3E eval and I get a "Page not found".

I can navigate to http://<splunk_hostname>:<splunk_port>/static/app/test/hello.js with both 6.2.3 and 7.0.1. How do I make it so I can debug my JS in Splunk 7.0.1?

0 Karma
1 Solution

jeffland
SplunkTrust
SplunkTrust

The way js is loaded has changed from 6.2, see the answers and discussions here (not the accepted answer, the ones below that).

You've got several options, the easiest is to add the line

//# sourceURL=hello.js

to the file and it'll appear in your debugger under that name.

View solution in original post

0 Karma

jeffland
SplunkTrust
SplunkTrust

The way js is loaded has changed from 6.2, see the answers and discussions here (not the accepted answer, the ones below that).

You've got several options, the easiest is to add the line

//# sourceURL=hello.js

to the file and it'll appear in your debugger under that name.

0 Karma

eroffol
Path Finder

Wow that was simple! Thank you!

0 Karma

eroffol
Path Finder

It looks like I lost some formatting. Here is the revised end to my question:
In Splunk 6.2.3, the console output looks like:

Hello                                                                                            hello.js:6:1

I can then click on hello.js:6:1 and navigate to the JS source, add breakpoints, etc...

In Splunk 7.0.1, the console output looks like:

Hello                                                                  common.js%20line%2014%20%3E%20eval:5:1

If if click on common.js%20line%2014%20%3E%20eval:5:1, it navigates me to view-source:http://:/en-US/static//build/pages/enterprise/common.js line %3E eval and I get a "Page not found".

I can navigate to http://:/static/app/test/hello.js with both 6.2.3 and 7.0.1. How do I make it so I can debug my JS in Splunk 7.0.1?

0 Karma
Get Updates on the Splunk Community!

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Announcing the General Availability of Splunk Enterprise Security 8.1!

We are pleased to announce the general availability of Splunk Enterprise Security 8.1. Splunk becomes the only ...

Developer Spotlight with William Searle

The Splunk Guy: A Developer’s Path from Web to Cloud William is a Splunk Professional Services Consultant with ...