Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug chrome devtools panel extension?

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?

like image 488
Yosi Avatar asked Dec 26 '14 19:12

Yosi


People also ask

How do I debug Chrome extensions?

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.

How do I debug Chrome extensions Orcode?

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.

What is debug extension?

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.


1 Answers

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.

like image 159
Xan Avatar answered Oct 02 '22 18:10

Xan