If you select a component, and then trigger something to change the state on the page. The dev tools do not reflect the change.

The idea behind this is when debugging for performance, it would be great to have some sort of toggle that I can turn on so that the next set of update flashes will stay and not fade away.

This would allow a user to toggle "freeze" and then do some action that causes various updates in the application. Then the user can see every single component that has updated do to that one action.

When a component re-renders, we should flash the component in the Metal.js devtools panel. This will allow users to debug unnecessary re-renders. This feature should probably be something you can toggle on and off.

There is something in my store which is causing the devtools to repeatedly print out

Args: 
VM1032:642  metal-devtools extension: (`clone`)

    TypeError: Illegal constructor

    at cloneObj (<anonymous>:639:20)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)
    at cloneObj (<anonymous>:649:26)

Until chrome crashes. TT ^ TT

It may have something to do with some dom elements I have in the store.

We're using an InfiniteScroll component, that has childComponents.
<InfiniteScroll>
<List data={data} />
</InfiniteScroll>

Within InfiniteScroll, we have this rendering the children.
render() {
return <div>{this.props.children}</div>;
}

but the component pane doesn't show any of the child component details.

After cloning the repo and running npm install, npm run build:chrome will fail with the following trace:

Chemas-MBP:metal-devtools jose.balsas$ npm run build:chrome

> [email protected] build:chrome /Users/jose.balsas/dev/bryceosterhaus/metal-devtools
> webpack --config shells/chrome/webpack.config.js

Hash: 171db2b98db8d015a0d4
Version: webpack 1.14.0
Time: 3439ms
           Asset     Size  Chunks             Chunk Names
   background.js  1.99 kB       0  [emitted]  background
contentScript.js  5.08 kB       1  [emitted]  contentScript
     devtools.js  2.33 kB       2  [emitted]  devtools
  initializer.js  2.55 kB       3  [emitted]  initializer
        panel.js   592 kB       4  [emitted]  panel
   [3] ./frontend/static .*(\.css|\.png|\.html) 201 bytes {4} [built] [2 warnings]
    + 170 hidden modules

WARNING in ./frontend/static .*(\.css|\.png|\.html)
Module not found: Error: Cannot resolve module 'file' in /Users/jose.balsas/dev/bryceosterhaus/metal-devtools/frontend/static
 @ ./frontend/static .*(\.css|\.png|\.html)

WARNING in ./frontend/static .*(\.css|\.png|\.html)
Module not found: Error: Cannot resolve module 'file' in /Users/jose.balsas/dev/bryceosterhaus/metal-devtools/frontend/static
 @ ./frontend/static .*(\.css|\.png|\.html)

ERROR in ./shells/chrome/src/background.js
Module not found: Error: Cannot resolve module 'file' in /Users/jose.balsas/dev/bryceosterhaus/metal-devtools/shells/chrome/src
 @ ./shells/chrome/src/background.js 3:0-23

ERROR in ./shells/chrome/src/devtools.js
Module not found: Error: Cannot resolve module 'file' in /Users/jose.balsas/dev/bryceosterhaus/metal-devtools/shells/chrome/src
 @ ./shells/chrome/src/devtools.js 3:0-26

ERROR in ./shells/chrome/src/panel.js
Module not found: Error: Cannot resolve module 'file' in /Users/jose.balsas/dev/bryceosterhaus/metal-devtools/shells/chrome/src
 @ ./shells/chrome/src/panel.js 3:0-23

Trying to still install the unpacked extension will fail with the following trace

Failed to load extension from: ~/dev/bryceosterhaus/metal-devtools/shells/chrome
Could not load extension icon 'build/metal.png'.

Currently doesn't work for soy components, this is due to when the content script is run. Once we add that, we also need to process the state data properly so that both jsx and soy will reflect the proper state.

In order to easily identify the components on a page, it would be nice to be able to highlight the component element in the live page same way as when you're hovering over the DOM panel in chrome devtools.

Possible reference might be:

https://developer.chrome.com/extensions/debugger#method-sendCommand
https://chromedevtools.github.io/debugger-protocol-viewer/tot/DOM/#method-highlightNode

Add keyboard support for navigating through component nodes

Should probably do something similar to what they did in react-devtools. It would be helpful to know without having to open the inspector.

facebook/react-devtools@60c3e1b

Similar to how react does this, we should add functionality that allows us to inspect a certain node in the DOM and then show that corresponding metal component. Also, we should provide capability to highlight dom node after selecting its metal-component on the Metal.js tab.

Hey Bryce this is AWESOME. I've missed the react dev tools since we switched to metal!

A tiny improvement is on the initial warning, it would be helpful to have a minimum metalJs version warning.

Our project is a few versions behind, so this didn't show anything other than the reload warning.

https://github.com/bryceosterhaus/metal-devtools/blob/master/frontend/components/InitialWarning.js#L6

Unable to scroll through the component tree. Might be due to using hot-reloading dev server.

Chrome Version 61.0.3163.100 (Official Build) (64-bit)