如何自定义铬devtools元素面板上的rightclick [英] how to customize rightclick on chrome devtools elements panel

问题描述

devtools elements panel right click

look at the image above. right clicking on any node displays menu of options like 'add attribute' and 'edit attribute' etc...

I want to be able to extend the right click menu to add my custom events. for example, I need to get the xpath of the node. I know I can extend the right click on actual page instead of extending right click on the source of the page.

https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel API's only supports selection change.

解决方案

Unfortunately, the Extending DevTools API doesn't expose the context menu from the internal DevTools source code. Sometimes the API documentation omits some available functions/properties, so I confirmed this with:

alert(Object.getOwnPropertyNames(chrome.devtools.panels.elements));

It returned onSelectionChanged,createSidebarPane only, which matches the documentation.

The WebInspector object in the DevTools source code has a populateNodeContextMenu function on WebInspector.ElementsTreeElement.prototype, but this cannot be accessed through the Extending DevTools API. It is completely separate.

这篇关于如何自定义铬devtools元素面板上的rightclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！