In case anyone is wondering (and at the risk of stating the obvious to
everyone but me), it *is* possible to add a breakpoint to one specific
instance of a method of a web component thusly:
- Right click and inspect element inside the custom element you want to
debug
- Find the containing containing custom element, using #shadow-root
nodes (if applicable) and dashed tag names as your clues
- Right-click on the containing custom element and select Copy => Copy
Selector
- Go to the properties tab and select the second node that has the
methods associated with the custom element. Unfortunately, it is labeled
"HTMLElement" rather than the more self-explanatory constructor property
- Find the method towards the end, in faint lettering
- Right click on the method and select Show Function Definition
- Within the function, right click where you want to put the breakpoint
and select "Add conditional breakpoint..."
- In your conditional breakpoint editor, put: * this.matches('[paste
selector from above]')*
I still think it would be useful to provide a way to do this in fewer
steps, but that's just me.
On Tuesday, April 11, 2017 at 8:31:53 PM UTC-4, Bruce Anderson wrote:
>
> More suggestions:
>
> In the properties tab, it appears to list the inheritance hierarchy
> leading up to the custom element, including mixins. That's great. But
> there are many rows that show "HTMLElement" at the top level. It would be
> much better if it showed the name of the constructor instead where
> applicable, so it is easy to find the layer you are looking for.
>
> I think the top level node should show the object fully merged together,
> including the methods. For some reason, the methods only show if I go one
> level down to the top most "HTMLElement."
>
> And I'll add my Trumpian "lots of people want" the ability to add a
> breakpoint in a method just for that particular instance of a custom
> element. Okay, "lots of people" is a colleague I work with, and me. Is
> there an easy programmatic trick to get this to happen?
>
> On Tuesday, March 7, 2017 at 5:43:38 PM UTC-5, Bruce Anderson wrote:
>>
>> It's nice that Chrome dev tools provides some support already for
>> debugging custom elements, i.e. being able to inspect an element, then
>> click on the containing custom element, and opening the properties tab.
>>
>> But the support is quite klunky compared to what the React chrome
>> extension provides -- in particular color coding in sharp red where the
>> React component containers are, and with a single click, seeing all the
>> property values of the element.
>>
>> Are there immediate plans to similarly enhance the chrome dev tools for
>> native custom elements? Any ETA? Or, alternatively, a chrome extension
>> like React's?
>>
>> I'm not sure if the React extension supports this, but one additional
>> feature that would be really beneficial, is if, in the window where you can
>> inspect the properties / methods defined for a particular custom element
>> instance, one could add a break point to any of the methods (on entry),
>> only for that instance of the selected custom element, especially if it
>> could persist on refreshing the page, just like breakpoints in the
>> javascript source.
>>
>> Would be great to know either way what the plans are. Apologies if I
>> missed it being announced in the Polymer Summit, or if this already exists
>> and I'm not aware of it.
>>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/835e3538-095c-4774-8ae2-d775fdee1846%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
