I am trying to write Chrome DevTools extension, but I am having some troubles to debug it.
How can I inspect my panel html and debug it's javascript?
Navigate to the chrome extensions management page at chrome://extensions and ensure developer mode is on. Click the Load Unpacked button and select the broken extension directory. After the extension is loaded, it should have three buttons: Details, Remove and Errors in red letters.
To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting “Run and debug”. Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command.
Visual Studio Code's debugging architecture allows extension authors to easily integrate existing debuggers into VS Code, while having a common user interface with all of them.
If you detach the Dev Tools (icon next to x
in the top right corner) in a separate window, and press Ctrl+Shift+I while Dev Tools window is focused, you will invoke the Dev Tools for the Dev Tools window.
As far as I am aware, it's not possible for a docked configuration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With