User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Steps to reproduce:

Create a new tab in the inspector panel to display the attributes of the selected element.

1. Go to https://getbootstrap.com/docs/5.3/components/modal/#examples
2. Inspect close button

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

I like the idea of listing the attributes of an element somewhere besides the tree view as it is sometimes hard to grasp them, especially when there are many of them.

Though I don't think they fit into the Rules view. They are (normally) unrelated to styling/CSS, so having them there and possibly displaying them as a CSS rule doesn't make sense, in my opinion. This information also doesn't fit into any of the other existing side panels.

Therefore, I believe a new side panel should be created holding information about the node in the markup. That panel could initially be filled with the list of attributes, which could be toggled by users. Though it could also provide additional information about the selected node, like the name, the namespace it is in, show DOM variables (like the DOM side panel in Firebug), link to documentation on MDN, etc.
And I intentionally wrote "node" and not "element", because that panel could also display information for text nodes, attribute nodes, comment nodes, document nodes, etc.
With that, it would also work for SVG, MathML and XML.

Sebastian

You are right, Sebastian.

The image is only a mockup. The original idea is creating a new panel, as the title says.

I created a webextension that might cover this: https://addons.mozilla.org/en-US/firefox/addon/inspector-dom-sidebar/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

It does show all the DOM properties of the selected node though, so maybe it's too much?

Maybe doing another devtools webextension is the best way forward here? Which would show the attributes and allow to modify them. Then if this seems useful we can consider adding it as an official sidebar.