How to debug in WebStorm?

Grafana Plugin Development
1

I’m trying to develop some custom dashboards for our Grafana service. Is there a doc somewhere that shows how to get started with debugging the executable that’s built in the docs /bin/grafana-server? I can launch the server fine, but can’t actually attach to anything.

2

Don’t know. Most of us in the Grafana team, use Visual Studio Code and debugging Go code works out of the box there. Does Webstorm have support for Go?

3

Hey thanks for the reply. I think there’s a dedicated IDE for golang, which is fine, but now I’m confused on if I’m debugging a javascript app or a go app :slight_smile:

4

Is there a quick doc somewhere for how to get started developing in Grafana? I primarily only want to debug the frontend.

5

http://docs.grafana.org/project/building_from_source/

Follow the instructions to yarn install --pure-lockfile and then skip to the “Developing Grafana” section:

bra run for the backend and npm run watch for the frontend. (npm run build is if you want to do a release build of Grafana).

Then you should be able to debug in Chrome or whatever.

The frontend is Angular and the backend is Go. Frontend code is in the public directory and backend code is in the pkg directory. I think it is a quite normal web app with a backend api and a SPA frontend so not sure what you are confused about?

6

Awesome, thanks for the details! I was confused because I don’t normally have to debug web apps at all - so I’m not well versed in what’s “normal” :slight_smile:

Thanks again, I think this should definitely get me going.

7

Hi, sorry to be a bother! I’ve been working on this (literally) all day and can’t get any of my breakpoints to hit. I know you said you guys don’t use WebStorm, which is fine - at this point I’m really just wanting any debugger to work – I can’t even get breakpoints in Chrome to hit.

Here’s what I’ve done:
bra run
npm run watch

In WebStorm:

In Chrome:

  • Opened inspector and set breakpoints in the main.js file:

    47 PM
    47 PM1048×553 101 KB

  • Navigated to the page

  • No breakpoints hit (I’m not sure how to force Chrome to use my local .js file instead of pulling one? Maybe that’s the issue?)

If there’s a way you (or anyone) could give me just a quick “here’s how to setup vscode/webstorm/chrome for debugging” that be super helpful. Sorry I’m not more experienced in this.

Quick Update

I was able to get a breakpoint in WebStorm to hit, but it’s in the dashboard_loaders.ts file, here:

console.log($routeParams.type, $routeParams.slug);
dashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug).then(function(result) {
  $scope.initDashboard(result, $scope);
});

As expected, when trying to hit http://grafana.staged-by-discourse.com/dashboard/script/main.js?orgId=1, I get the console output of script main.js – the files I want to debug are in ../public/dashboards. Breakpoints here still aren’t hit unfortunately, but at least I know that my Chrome and WebStorm are kind of working together.

Any insight into why WebStorm would be able to see the stuff in ../public/app/core/routes but not ../public/dashboards/?

8

Just did a test and I could debug a scripted dashboard.

I set a breakpoint here and then stepped in.

image
image1750×591 152 KB

image
image1746×807 186 KB

9

Ok, yeah I can break there also - but can you set a breakpoint in scripted.js and have it hit (as in, the actual script definition in /public/dashboards)? This looks like it’s boiling down to a misunderstanding of how the dashboard scripts are served (and a lack of knowledge of Javascript in general maybe).

I was hoping to set a breakpoint in my script file, but it looks like it’s serving that file as an anonymous (or some other JS terminology :slight_smile:) file that I can’t set breakpoints in beforehand?

10

It is dynamically loaded javascript which is why it is hard to set a breakpoint. Haven’t tried it but maybe this would work:

11

Hi, how do you debug Grafana code using Visual Studio Code and Go?