topic How do you debug JS in Splunk 7? in Dashboards & Visualizations

How do you debug JS in Splunk 7?

eroffol — Thu, 22 Feb 2018 19:45:54 GMT

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?

Re: How do you debug JS in Splunk 7?

eroffol — Thu, 22 Feb 2018 20:47:27 GMT

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?

Re: How do you debug JS in Splunk 7?

jeffland — Fri, 23 Feb 2018 08:16:43 GMT

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.

Re: How do you debug JS in Splunk 7?

eroffol — Fri, 23 Feb 2018 14:25:11 GMT

Wow that was simple! Thank you!