Polymer debugging extension
How to run:
- Clone the repository.
- Navigate to cloned directory.
- Get dependencies with
boweris installed before this).
- Get Closure compiler from here.
- Unzip file and put
- Install vulcanize
npm install -g vulcanize
- Build the project.
- The extension was put into
- Open Chrome and go to
Load unpacked extension.
build/select it, Chrome will install the extension
- Open a web page written with Polymer
- Open devtools and navigate to the
- You will see 2 sides in the
- The left side has two views of the DOM tree you can switch between.
- One is the
Composed DOM viewand the other is the
Local DOM view.
- An element is either
brown. Blue ones are Polymer elements while the rest are not.
- Polymer elements when hovered on, show a
View Sourcebutton, which if you click will take you to the definition file of the Polymer element.
- Hovering over an element highlights it in the page.
- The DOM trees respond to DOM mutations and are hence up-to-date.
Composed DOM viewgives you the entire composed DOM tree.
Local DOM viewfocuses more on a selected element and can show both light DOM and composed DOM separately.
- In either of the views, clicking the
+button to the left of a Polymer element will take you to the
local DOM view(if you're not already in it) and show you the shadow DOM contents of the element. In this view, the entire composed DOM tree is never exposed. It goes one level deep into the shadow DOM and shows the light DOM of each child at that level.
- Clicking the
-button (when its shown) will zoom out of the shadow DOM and show just the light DOM of the element.
- For convenience, one may find an element in the devtools inspector and select it. It will automatically get selected in the Polymer pane's composed DOM tree.
- In the right hand side of the pane are 3 tabs.
- They get filled up in response to what is selected in the element trees.
propertiestab shows the properties of the selected element. (These object-trees are shown slightly differently for Polymer elements)
modeltab shows the model that is behind an element (if any).
breakpointstab shows a list of methods of the selected element. Clicking on any will add a breakpoint to the first line of the method.
- All properties/methods in the right side are live. They are kept up-to-date via O.o().
- All properties can be modified by clicking on their values and entering new valuesand this change takes immediate effect in the page.
- Some properties have a
refreshbutton next to them. These properties are implemented as accessors and hence can't be kept up-to-date via O.o(). One has to refresh it to fetch the latest value.
Note: It needs Object.observe() to work which means only Chrome 36 and above.