Docs: Using React Tools debugger with Grafana #1559
Draft
+79
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ✨ This PR can be merged. It will not be considered when calculating future versions of the npm packages and will not appear in the changelogs. |
briangann
added
the
no-changelog
josmperez
approved these changes
Feb 20, 2025
| @@ -0,0 +1,78 @@ | |||
| --- | |||
| id: debugging-plugins | |||
| title: Add anonymous usage reporting | |||
There was a problem hiding this comment.
The title should match the H1 on line 12
|
|
||
| # How to set up Grafana for React Tools profiling and debugging | ||
|
|
||
| Using the React Tools debugger in the browser is very useful when either creating a new plugin or troubleshooting an issue with an existing plugin. |
There was a problem hiding this comment.
Suggested change
| Using the React Tools debugger in the browser is very useful when either creating a new plugin or troubleshooting an issue with an existing plugin. | |
| The React Tools debugger in the browser is invaluable for developing new Grafana plugins and troubleshooting existing ones. |
|
|
||
| ## Setup for debugging | ||
|
|
||
| By default Grafana docker images do not include a debug build for React. |
There was a problem hiding this comment.
Suggested change
| By default Grafana docker images do not include a debug build for React. | |
| By default, Grafana Docker images do not contain a React debug build. |
|
|
||
| By default Grafana docker images do not include a debug build for React. | ||
|
|
||
| By using a debug build of grafana you are able to easily step through code that has not been "uglified" and also use the "Profiler" in React Dev Tools. |
There was a problem hiding this comment.
I'm not sure what "uglified" means or why Profiler is in quotes. If Profiler is a UI element, you can put it in bold.
|
|
||
| By using a debug build of grafana you are able to easily step through code that has not been "uglified" and also use the "Profiler" in React Dev Tools. | ||
|
|
||
| To use a debug build, update your `docker-compose.yml` with the corresponding version found on hub.docker.com. |
There was a problem hiding this comment.
Suggested change
| To use a debug build, update your `docker-compose.yml` with the corresponding version found on hub.docker.com. | |
| To use a debug build, update your `docker-compose.yml` with the corresponding version found on [hub.docker.com](https://hub.docker.com/). |
| ... | ||
| ``` | ||
|
|
||
| Alternatively you can use an environment variable and not modify the existing docker-compose.yml file: |
There was a problem hiding this comment.
Alternatively, you can use an environment variable instead of modifying the existing docker-compose.yml file:
| ... | ||
| ``` | ||
|
|
||
| Alternatively you can use an environment variable and not modify the existing docker-compose.yml file: |
There was a problem hiding this comment.
Suggested change
| Alternatively you can use an environment variable and not modify the existing docker-compose.yml file: | |
| Alternatively, you can use an environment variable without modifying the existing `docker-compose.yml` file: |
|
|
||
| ## Using React Tools | ||
|
|
||
| Once your docker environment has started up, navigate to the instance and select |
There was a problem hiding this comment.
Suggested change
| Once your docker environment has started up, navigate to the instance and select | |
| After your Docker environment starts, go to the instance and select |
|
|
||
| Once your docker environment has started up, navigate to the instance and select | ||
|
|
||
| `View->Developer->Developer Tools` |
There was a problem hiding this comment.
Suggested change
| `View->Developer->Developer Tools` | |
| **View** > **Developer** > **Developer Tools**. |
|
|
||
| `View->Developer->Developer Tools` | ||
|
|
||
| You can now use the "Profiler" tab in the debugging tools, which provides Flamegraph, Ranked, and Timeline options. |
There was a problem hiding this comment.
Suggested change
| You can now use the "Profiler" tab in the debugging tools, which provides Flamegraph, Ranked, and Timeline options. | |
| You can now use the **Profiler** tab in the debugging tools, which provides Flamegraph, Ranked, and Timeline options. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it:
Adds docs for setting up debugging tools for Grafana developers
Which issue(s) this PR fixes:
Fixes #1058
Special notes for your reviewer:
Requires grafana/grafana#101027