How can we improve the Microsoft Edge developer experience?

Show Lexical Scopes like Element/Form/Document for Inline Event Handler Callbacks

While writing an article to describe how browser's create a pseudo closure for inline event handlers, I found that Chrome had the ability to visualize these objects while F12 did not. If you review the article you'll find that by setting up an inline event handler on an element, some additional objects are injected into the scope chain of the function and under what circumstances. I would expect the F12 toolbar to be able to visualize these objects just like Chrome.

Here is the original article for reference:
http://www.justrog.com/2015/05/do-browsers-create-closures-sometimes.html

Near the bottom you'll also find an image of Chrome's behavior showing these objects as "With Object" semantics. Which is the same as the with() keyword and scope. I'm not sure this is the best way to refer to them, but at least they are visible.

29 votes
Vote
Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
You have left! (?) (thinking…)
Justin Rogers shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

2 comments

Sign in
(thinking…)
Sign in with: facebook google
Signed in as (Sign out)
Submitting...
  • Justin Rogers commented  ·   ·  Flag as inappropriate

    Some additional supporting evidence which shows that even moving from one form to another, keeps the bound scope chain set on the original form. This is so amazingly confusing that without tools you can't possibly figure out why things are happening the way they are.

    http://jsfiddle.net/p7bu92jw/2/

  • Justin Rogers commented  ·   ·  Flag as inappropriate

    Some supporting evidence. These hidden variables can lead to leaks. This shows how a button with a lexical scope wrapped around its form is maintains connection even after the button is removed from the form and the form is removed from the tree.

    http://jsfiddle.net/oko08kaw/

Feedback and Knowledge Base