Easy way to debug a webview in a VS Code extension
I’ve used this API for building my own extensions and it’s a lot of fun. But sometimes things can get annoying when trying to debug a webview.
Fortunately, there’s an easier way!
VS Code is build with Electron which comes with a Chrome browser built-in. Not only that but Chrome’s DevTools follow along as well! This allows you to debug both VS Code itself and webviews. Here’s how:
- Run your extension in debug mode
- Open the webview you’d like to debug
Ctrl + Shift + P(Win/Linux),
Cmd + Shift + P(Mac) to open the command panel
- Search for the
Open Webview Developer Toolscommand
That’s all! Happy debugging. Oh, and if you prefer video, I’ve made a short clip of the steps above.
Share on Twitter