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!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...