A bit of a tangent, but I seemed quite similar:

I notice that there is a 'properties' tab on the 'elements' pane. It's not bad, but one really has to drill down to find the properties one wants to see, so much so that it is mostly useless, in many cases.

One of my use-cases is trying to examine the properties of a Polymer element (which seem to be $0.__data). Another is plain custom elements with classes that extend HTMLElement and LitElement. In the 'properties' tab, all the element's properties are grouped together and it's a pita to dig through to find what you want.

Is there not a way to isolate the ones we've actually defined in our code? Perhaps there is a technique to writing a class's properties that would help? Perhaps, like Polymer, when extending HTMLElement, we should also put our properties into a single property named '__data', so that we can be sure it won't clash with the properties of the built-in element classes?

I guess I might be a little confused in general on this, so feel free to enlighten me :)

One small observation. The dev tools seem very JS specific, but it seems to me that web development is really more about elements.  For example, I find it irritating that when I set a breakpoint in a JS function on a Polymer element, it will break on that line for any instance of that element. There's no easy way to specify it to break for that line for a specific element.
Is it not possible to somehow link the 'elements' and 'source' panes so that we can specify 'stop on this line for this element'? Perhaps something like, on the 'edit breakpoint' menu add a 'select element' which then switches to the 'elements' tab with the elements on that type highlighted, allowing the user to select one of them.