How do I setup for code stepping and inspection for plugin development

Hi, I am working on some custom datasource plugin for grafana.

I am looking for a way to start the plugin code in debug mode and do code stepping as well as live inspection for easier developing experience.
Looking for advice here as current solution to setup console log is not very helpful.

It would also be nice if i can test/debug the plugin separately from the rest of the grafana stack.

Thanks in advance!

Plugins are debugged the same way any JavaScript is - in the browser. Chrome and Firefox have excellent debug tools. You don’t say if you are writing in plain JavaScript, ES6 or TypeScript - if you are writing in some modern version of JS then you will need source maps to debug properly (but if you are using ES6 then you probably have those already).

Debugging a data source in Chrome:

The only way to do this is with unit tests and by mocking out the Grafana server code to be able to execute your code (which I highly recommend). As it is a plugin, it cannot be executed its own - it relies on Grafana code to work and Grafana does most of the work.

Example of a plugin with tests:

Here is the query_ctrl test:

https://github.com/grafana/azure-monitor-datasource/blob/master/specs/query_ctrl_specs.ts

If you are using Visual Studio Code then this extension combines it with Chrome for debugging JavaScript:

Hi,

I have installed grafana on windows and then
I have downloaded the simple-angular plugin and integreted into my grafana, and run the following command for the

yarn install --pure-lockfile

yarn watch

I am able to do the changes to the plugin and changes are getting reflected as well on refresh.
But i am not able to debug the code in browser.

can any one tell me how could I Debug the plugin, is it posssible to do that ?
@daniellee could you please help me in that ASAP