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!

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...