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.

Answer 1

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.