42

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?

Yosi
  • 2,936
  • 7
  • 39
  • 64

4 Answers4

74

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.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Has anybody been having any issues when reloading an extension? It seems like I have to reload an extension several times in order for its code to show up in the dev tools window again. – jab Mar 22 '16 at 02:59
  • It should be noted that the dev tools will need to be closed and reopened in order to refresh the changes – Craig Wayne Jul 26 '19 at 11:31
3

Found an easy way, just right-click in the Devtools panel, of your extension, and in the popup click on "inspect". it will open another Devtools for the entire Devtools with a focus on your extension panel HTML.

No need to detach the main Devtools.

Nisim Joseph
  • 2,262
  • 22
  • 31
2

To me it works with detaching the DevTools and hit CTRL+SHIFT+i (Windows).

Möhre
  • 929
  • 1
  • 6
  • 17
  • To explain the existence of this answer: my original answer had an error in the key combination (Alt instead of Shift). This has been fixed. – Xan Apr 24 '19 at 09:50
0

For me it works with CMDOPTIONi

Version 104.0.5112.101 (Official Build) (arm64) (Apple m1 silicon)

vrspiration
  • 59
  • 6