polymerlabs / polydev Goto Github PK
View Code? Open in Web Editor NEWAutomatic web components profiling in chrome devtools
Automatic web components profiling in chrome devtools
Reported by a community member, Polydev breaks the demo found here: http://polygit.org/components/paper-dropdown-menu/demo/index.html?dom=shadow
When this extension is enabled in Chrome, all of the GitHub key mappings on a pull request page to open sidebar selection dialogs (i.e, 'a' opens Assignees, 'l' opens Labels, [P]rojects, and [M]ilestones) will fire even typing in an input field. It seems to break the default event propagation behavior for input fields.
Just noticed this visiting http://x-tag.github.io/
just like most tables :) ✌️
Users should be able to see and edit properties of Polymer elements selected in the elements panel.
Users should be able to see what custom properties have cascaded to an element.
This will be useful even when Chrome lands native custom property support to debug issues when using the polyfill in other browsers.
Chromium 44.0.2403.89, Linux
Poolymer tab is present, but completely empty (tried browser restart, page reload, etc.)
When polydev is enabled, the takeRecords method of MutationObserver is gone, breaking several webpages, a.o. polymer pages with dom=shadow.
When I have this extension enabled, the search bar at the top of the page refuses to actually perform searches (although accepts search terms, etc), and the spinning activity indicator is perpetually visible (even when nothing should be happening).
Uninstalling / disabling this extension restores expected behaviour in Google Play Music.
The Polydev plugin is causing some serious issues that prevent browsing relevant Polymer Project documentation or other websites with the script enabled. I know its recommended to install the plugin on a different profile in Chrome, but it seems inconvenient that the plugin specifically breaks the https://www.polymer-project.org/1.0/ website and the documentation hosted on it.
When I visit https://www.polymer-project.org/1.0/ website with the Polydev Chrome plugin installed, the plugin prevents scripts on the page from running successfully and prevents the page UI from being drawn correctly (the header and logos no longer resize and display correctly).
When I've left the plugin running in the background, I've noticed it causes similar TypeErrors Cannot read property '_bound' of null
on other websites and breaks functionality.
Uncaught TypeError: Cannot read property '_bound' of null
at HTMLDocument.obj.removeEventListener (polydev/vendor/zone-microtask.js:995:15)
at HTMLElement._resetFocusedContent (https://www.polymer-project.org/elements/elements.js:18:20083)
at HTMLElement._complexObserverEffect (https://www.polymer-project.org/elements/elements.js:13:12758)
at HTMLElement._effectEffects (https://www.polymer-project.org/elements/elements.js:13:10019)
at HTMLElement._propertySetter (https://www.polymer-project.org/elements/elements.js:13:9767)
at HTMLElement.__setProperty (https://www.polymer-project.org/elements/elements.js:13:9891)
at HTMLElement._applyConfig (https://www.polymer-project.org/elements/elements.js:13:20952)
at HTMLElement._afterClientsReady (https://www.polymer-project.org/elements/elements.js:13:20819)
at HTMLElement._ready (https://www.polymer-project.org/elements/elements.js:11:16053)
at HTMLElement._readyClients (https://www.polymer-project.org/elements/elements.js:11:16212)
OS: OSX 10.11.6
Chrome build: 54.0.2840.87
Polydev build: 0.0.6
Thanks for providing this plugin. Let me know if I can provide you with any additional information to help you resolve the problem.
Suddenly all return values from Polymer.Base.async
were undefined
. As soon as I disabled the polydev extension, the return values were all fine again.
With polydev enabled
ready: function() {
var job = this.async(function() { console.log('did it'); }, 1000);
console.log(job); // -> undefined
}
With polydev disabled
ready: function() {
var job = this.async(function() { console.log('did it'); }, 1000);
console.log(job); // -> -3 as expected
}
Is polydev maybe hungry for the return values ;)
I got next error on dialog opening:
obj.addEventListener @ polydev/vendor/zone-microtask.js:973
Gestures.add @ polymer.html:774
Polymer.IronOverlayBehaviorImpl._toggleListener @ iron-overlay-behavior.html:268
(anonymous function) @ iron-overlay-behavior.html:286
(anonymous function) @ polymer.html:1355
arguments.(anonymous function) @ polydev/vendor/zone-microtask.js:406
(anonymous function) @ polydev/vendor/zone-microtask.js:98
run @ polydev/vendor/zone-microtask.js:118
zoneBoundFn @ polydev/vendor/zone-microtask.js:91
I was told that it's an issue related to polydev (not to polymer itself), so please take a look to it.
Open the below link in chrome with polydev enabled
http://output.jsbin.com/curike
The issues disappear when I disabled polydev.
From @fozziethebeat on October 29, 2015 18:28
I've recently seen a problem in Chrome on both Ubuntu and Mac OSX where opening an iron-overlay throws a Javascript error:
Uncaught TypeError: Cannot read property 'toString' of null
The full stack trace looks like:
obj.addEventListener @ polydev/vendor/zone-microtask.js:973
Gestures.add @ polymer.html:752
Polymer.IronOverlayBehaviorImpl._toggleListener @ iron-overlay-behavior.html:268
(anonymous function) @ iron-overlay-behavior.html:286
arguments.(anonymous function) @ polydev/vendor/zone-microtask.js:406
(anonymous function) @ polydev/vendor/zone-microtask.js:98
run @ polydev/vendor/zone-microtask.js:118
zoneBoundFn @ polydev/vendor/zone-microtask.js:91
I've seen this with both iron-dropdown and several custom elements I've used that mixin iron-overlay-behavior.
Copied from original issue: PolymerElements/iron-overlay-behavior#47
When polydev is enabled, google search is broken. It still works when entering a query in the address bar, but when changing the query in the search field of the page and pressing enter, the search results become and remain disabled.
The following error message is shown in the console:
polydev/vendor/zone-microtask.js:123 Uncaught TypeError: Cannot read property 'elements' of undefined
I don't know if this is something polydev could be the right place for, but I wanted to propose this anyway.
If one builds an application with the mediator pattern and therefore makes heavy use of the data binding system, I think it would be quite useful if we had the ability to record the data flow in the binding system.
Would love to here what you guys think?
Reported here
PolymerElements/iron-overlay-behavior#39 (comment)
This plugin used to be quite handy, but now it no longer seems to work with sites that I was successful debugging before.
Steps to reproduce:
The perf bookmarklet at https://gist.github.com/ebidel/57c9e9379ec6b0bda16d has some numbers that would be interesting to add:
reflectToAttribute
and the element that the property belongs to (can be a source of bad perf)WebComponentsReady
firing timeHTMLImportsLoaded
firing timeIt would be wonderful if the developer tools supported Polymer.dart as well as Polymer.js; either natively in Dartium, or, more likely, though dart2js
compiled code in Chrome.
Currently when attempting to use the extension on a Polymer.dart (transpiled to JS) site, I get a stack trace in the Console, and the page fails to load at all:
Uncaught TypeError: Cannot assign to read only property 'createdCallback' of #<HTMLElement>
document.registerElement @ VM793:2128
registerElement @ interop_support.js:64
dart._registerCustomElement @ html_dart2js.dart:40049
dart.PolymerDeclaration.registerType$1 @ html_dart2js.dart:18101
dart._hookJsPolymer_registerDart_closure.call$0 @ declaration.dart:128
dart._RootZone.run$1 @ zone.dart:1161
dart._hookJsPolymer_registerDart.call$3 @ loader.dart:86
dart.Primitives_applyFunctionWithPositionalArguments @ js_helper.dart:1386
dart._callDartFunction @ js_helper.dart:1347
(anonymous function) @ js_dart2js.dart:103
d._register @ polymer.min.js:14
f.flush @ polymer.min.js:14
f.ready @ polymer.min.js:14
f.check @ polymer.min.js:14
(anonymous function) @ polymer.min.js:14
n @ webcomponents.min.js:14
i @ webcomponents.min.js:14
(anonymous function) @ webcomponents.min.js:14
r @ webcomponents.min.js:14
t @ webcomponents.min.js:14
(anonymous function) @ polymer.min.js:14
c @ polymer.min.js:13
run @ VM793:118
zoneBoundFn @ VM793:91
On chrome://settings and other WebUI which use Polymer elements, the Polymer tab only displays a "Custom Element Profile" card with a "REFRESH" button; clicking the Refresh button does nothing.
From the extension:
polymer-panel connected Port {sender: Object}
background.js:23 from polymer-panel Object {messageType: "tab-id", tabId: 23} Port {sender: Object}
background.js:25 polymer-page tab-id 23
background.js:23 from polymer-panel Object {messageType: "get-element-stats", tabId: 23} Port {sender: Object}
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): TypeError: Cannot read property 'postMessage' of undefined
at chrome-extension://mmpfaamodhhlbadloaibpocmcomledcg/src/background.js:37:13handler @ extensions::uncaught_exception_handler:8exports.handle @ extensions::uncaught_exception_handler:100EventImpl.dispatch_ @ extensions::event_bindings:376EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94dispatchOnMessage @ extensions::messaging:310
background.js:44 element-zones.onConnect Port {sender: Object} 25
i.e
I think this will make it a bunch easier for humans to understand the numbers
I defer to @paulirish for some sage knowledge on the best way to present this one 🙇
warning as follows:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
Specifically, this is about line 52 in src/content-script.js
(Stable Chrome channel, version 47.0.2526.80 with PolyDev version 0.0.6 from Chrome Webstore)
Are we supposed to get element-zones via bower? I'm having trouble finding the right version. When I manually remove the branch name (just PolymerLabs/element-zones
in bower.json
) I get more 404s for things like imd#export
(which is also dependend on from element-zones
).
~/dev/polymer/polydev % bower install
bower element-zones#^0.2.0 not-cached git://github.com/PolymerLabs/element-zones.git#^0.2.0
bower element-zones#^0.2.0 resolve git://github.com/PolymerLabs/element-zones.git#^0.2.0
bower imd#export not-cached git://github.com/PolymerLabs/imd.git#export
bower imd#export resolve git://github.com/PolymerLabs/imd.git#export
bower polymer#~1.1.1 cached git://github.com/Polymer/polymer.git#1.1.5
bower polymer#~1.1.1 validate 1.1.5 against git://github.com/Polymer/polymer.git#~1.1.1
bower iron-icons#~1.0.3 cached git://github.com/PolymerElements/iron-icons.git#1.0.6
bower iron-icons#~1.0.3 validate 1.0.6 against git://github.com/PolymerElements/iron-icons.git#~1.0.3
bower paper-button#~1.0.4 cached git://github.com/PolymerElements/paper-button.git#1.0.11
bower paper-button#~1.0.4 validate 1.0.11 against git://github.com/PolymerElements/paper-button.git#~1.0.4
bower paper-material#~1.0.2 cached git://github.com/PolymerElements/paper-material.git#1.0.6
bower paper-material#~1.0.2 validate 1.0.6 against git://github.com/PolymerElements/paper-material.git#~1.0.2
bower iron-icon#~1.0.4 cached git://github.com/PolymerElements/iron-icon.git#1.0.8
bower iron-icon#~1.0.4 validate 1.0.8 against git://github.com/PolymerElements/iron-icon.git#~1.0.4
bower polymer#^1.0.0 cached git://github.com/Polymer/polymer.git#1.4.0
bower polymer#^1.0.0 validate 1.4.0 against git://github.com/Polymer/polymer.git#^1.0.0
bower iron-iconset-svg#^1.0.0 cached git://github.com/polymerelements/iron-iconset-svg.git#1.0.9
bower iron-iconset-svg#^1.0.0 validate 1.0.9 against git://github.com/polymerelements/iron-iconset-svg.git#^1.0.0
bower paper-material#^1.0.0 cached git://github.com/polymerelements/paper-material.git#1.0.6
bower paper-material#^1.0.0 validate 1.0.6 against git://github.com/polymerelements/paper-material.git#^1.0.0
bower paper-ripple#^1.0.0 cached git://github.com/polymerelements/paper-ripple.git#1.0.5
bower paper-ripple#^1.0.0 validate 1.0.5 against git://github.com/polymerelements/paper-ripple.git#^1.0.0
bower iron-icon#^1.0.0 cached git://github.com/polymerelements/iron-icon.git#1.0.8
bower iron-icon#^1.0.0 validate 1.0.8 against git://github.com/polymerelements/iron-icon.git#^1.0.0
bower paper-behaviors#^1.0.0 cached git://github.com/polymerelements/paper-behaviors.git#1.0.11
bower paper-behaviors#^1.0.0 validate 1.0.11 against git://github.com/polymerelements/paper-behaviors.git#^1.0.0
bower iron-flex-layout#^1.0.0 cached git://github.com/polymerelements/iron-flex-layout.git#1.3.1
bower iron-flex-layout#^1.0.0 validate 1.3.1 against git://github.com/polymerelements/iron-flex-layout.git#^1.0.0
bower element-zones#^0.2.0 ENORESTARGET No tag found that was able to satisfy ^0.2.0
Uncaught TypeError: Cannot read property 'toString' of null
below is the code giving the issue:
handler is null.
function patchEventTargetMethods(obj) {
var addDelegate = obj.addEventListener;
obj.addEventListener = function (eventName, handler) {
var fn;
//Ignore special listeners of IE11 & Edge dev tools, see angular/zone.js#150
if (handler.toString() !== "[object FunctionWrapper]") {
With Shady DOM the element panel shows only the composed tree. It may be useful for the developer to see both the light and local tree from Shady DOM, and to be able to select those elements as in the built-in elements panel.
There may be limitations, like not being able to see styles for non-distributed nodes.
Or something like this... zone.js breaks quite a few sites ATM (like google)
Would be nice if this plugin did not break other sites 😉
I like the approach we used here https://github.com/marionettejs/marionette.inspector
where you have to manually opt in to running the script
we then kinda hack into the guts of backbone and marionette and reload the page
cc @jasonLaster prob will have more insight on this for us 👏
Who is showing this at polymer summit!? I will probably use it myself.. :)
I face issues when the chrome extension is enabled and I use the branches webcomoonents#v1 and polymer#2.0-preview in my webpage, I get a bunch of errors dom-module.html:32 Uncaught TypeError: Cannot read property 'register' of undefined(…)
http://output.jsbin.com/wuxezi/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.