This tiny extension parses payload of requests that your web application makes to DataDog API and displays particular events using familiar UI of the DevTools Network panel.
Testing DataDog API calls isn't the most pleasant thing you do at work. The SDK client has batching enabled by default (for good reasons!), so to find out if your event was sent, you need to search through all requests and manually split messages before formatting them as JSON. Or manually log payloads before sending, which is fine, but not convenient.
Thanks to the power of LLMs and endless hours spent on writing CSS to make the UI look like native tab in DevTools, you can enjoy your work again.
Install it via Chrome Web Store.
To set up the development environment:
-
Clone the repository:
git clone https://github.com/erykpiast/datadog-viewer
-
Navigate to the project directory:
cd datadog-viewer -
Install Node.js (e.g. with
nvm) and enable corepack:nvm install corepack enable -
Install dependencies:
pnpm i
-
Build the project:
pnpm build
-
Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked" and select the
distdirectory of the project
- Open Chrome and navigate to
Note
If you want to change styles only, you can easily test your changes in the CodePen. It has all the styles used in the extension and a simplified markup.
We welcome contributions! Please follow these steps to contribute:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature-branch
-
Make your changes and commit them using the conventional commits syntax. Please, always explain why you're making this change.
git commit -m "fix: improve search results quality Setting Fuse threshold to 0.4 gives overall better results - tested empirically. "
-
Push to the branch:
git push origin feature-branch
-
Open a pull request on GitHub.
For any questions or issues, please open an issue on the repository.
Thank you for using and contributing to my first Chrome Dev Tools extension!