extending google chrome devtools style inspector

Question

Is it possible to add custom functionality to chrome devtools?

I want to add a button in to chrome style inspecter ( green button in the picture ) .

When button is clicked, I want to show an alert with file and line number.

I read about extending devtools from google documentation, but couldn't found anything to do something like I expect.

If you think it's possible, can you tell me some starting point?

Thanks.

It's not possible. You can write your own panel though, see the link above. — wOxxOm, Apr 18 '18 at 04:50

score 2 · Answer 1 · answered Apr 18 '18 at 14:36

2

DevTools tech writer here. It's not officially supported, but there are various ways you can unofficially extend DevTools:

Write an extension, as ceejayoz mentioned in the comments.
You might be able to write a Snippet that automates the DevTools behavior that you want to achieve. This workflow is quite hacky / convoluted, but powerful.
Run your own modified version of the source code. It's surprisingly easy to set up.

answered Apr 18 '18 at 14:36

Kayce Basques

thanks modified version seems to be a good option for me.but one question if i modified it can i use it in chrome or i have to use chromium ?iknow they quite same but i like if i can use it in normal chrome. – while true Apr 19 '18 at 00:09
hey kayce let's say i create a new tab in devtools.but then i need to list down all applied styles,overridden styles , is there a easy way to get all this in chrome api?or do i have to write my own functions for that? – while true Apr 19 '18 at 00:37

1 Answers1