How to easily and quickly debug a Azure Devops dashboard widget?
I'm writing a dashboard widget for an Azure Devops dashboard, and I'm finding the cycle of modify-publish-refresh dashboard-set breakpoints in Chrome tools-refresh page again to be rather tedious.
Is there a way to test or debug a dashboard widget directly within Visual Studio or VS Code?
I'm using Add a dashboard widget as a starting template for my widget - happy to change though!
You can develop locally. Since Azure DevOps uses an iframe to show your extension's content, you can run a local server and reference that in the vss-extension.json manifest.
By default, when you launch the Developer Tools, the Developer Console is in the context if the primary page, or the top window. In other words, you're able to access the top window's DOM and state. Use the "Target" dropdown (shown above) to switch the context to your extension's frame. You are now able to access the DOM and global state of your extension's frame.
Besides, you could also use an official extension Azure DevOps Extension Hot Reload and Debug.
This repository demonstrates how to load an Azure DevOps extension's code directly from the dev machine rather than bundle all the code and deploy it through the marketplace. We will leverage the (somewhat hidden) capability in Azure DevOps to load content from localhost, which will enable us to use hot reload and debug in VS Code.
More detail info and ways, please kindly refer below links: