micotton / dejavue Goto Github PK

Reproduction:

Create component property with string value, open list of props in DejaVue inspector.

Result

Property is shown without quotations so boolean false is indistinguishable from string "false"

Expected result:

All string values shown with proper quotation marks.

I think I'm not the only one here using Firefox instead of Chrome, it would be really nice to have a Firefox version.

DejaVue keeps creating new travel steps in weird moments like in middle of transition (so I have like 3 steps with just next animation frames) , in middle of nowhere (or I just dont see the changes) or even in middle of selecting a text block (You can even see the selection box on half of the text).

Is this prone to some improvements or it was intended to work this way?
And can we know what is the meaning of green/gray globules on graph?

I use the Dark theme on Chrome dev tools by default.

When the plugin loads up, text is in black, and on the dark grey background, it's hard to read, would you be able to detect a dark theme, and change text colour to white/light grey instead?

I apologize if this is some sort of limitation I'm unaware of, however the component graph doesn't expand the full width of the window.

Chrome 55.0.2883.95 (64-bit)
macOS 10.12.3

Let me know if more info is needed. Otherwise, great tool keep up the good work.

I just wanted to try as the screenshots looked nice, but I was unable to even see localy how DejaVue works
I end up with a screen containing two titles and a slider bar with a button "Resume App" appearing some times

any clues to whether you are planning something like this

Testing comment

I can't get it to work (using Chrome Canary/Stable under macos). Got it working sometimes after some page refreshes, but seems random.

Popping development console it shows this:

Error in response to storage.get: TypeError: Cannot read property 'reduce' of null at drawTree (chrome-extension://jpigngmphmclcmikmcbcfplgnhlnefbp/app/assets/js/devtools.js:371:31) at Object.callback (chrome-extension://jpigngmphmclcmikmcbcfplgnhlnefbp/app/assets/js/devtools.js:287:33) at chrome-extension://jpigngmphmclcmikmcbcfplgnhlnefbp/app/assets/js/devtools.js:286:50

Reproduction:

Create component property with array of objects, open list of props in DejaVue inspector.

Result

Property is shown with too much details for each array element.
In my case:

demos: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Expected result:

Type should be displayed just as Array or as a collapsible block.

I have props 23, when display with component inspector, the last four props outside the dark background box.

Reproduction:

Create a property with string content of <p>test1</p><pre style="background:red">test2</pre>. Open components props in DejaVue component inspector.

Result

test2 is styled differently because its parsed with the HTML/style tags.

Expected result:

All HTML tags should be escapped.

Notes:

Same applies for Vars and Changes

I use .dev local domains to host sites, would be nice to use this on such sites.

Reproduction:

Create a component property as

_options: [Array, Object]

then open props list from that component inside of component inspector.

Result

The property is not listed

Expected result:

Property should be listed.

Reproduction:

change string property of component, open list of props in DejaVue inspector, go to Changes section.

Result

1. Changes of string values are beggining with a " character, but there is no matching closing character.
2. Shouldn't the first value be name of my prop?
   In my case:

Close modal33 changed from "Close modal2 to "Close modal

Expected result:

`title` changed from "Close modal2" to "Close modal"

Reproduction:

Create component property with object content, open list of props in DejaVue inspector.

Result

Type of property is shown as [object Object]

Expected result:

Type should displayed as simply Object (in the same matter Function in shown)

I have several Vue instances on the page (being created and destroyed), and only the first one is ever displayed even when it is destroyed.

Hi Guys

I am trying to add this plugin to Chrome by following the 6 steps in the README. 1 to 5 worked as expected but step 6 doesn't.

6. Click "load unpacked extension", and choose shells/chrome.

When I click "load unpacked extension" I see no shells/chrome folder. Is it supposed to have been built in step 3?

Thanks

Paul

Reproduction:

Open DejaVue, then (in my case) open tab above this component. Now hover the component in DejaVue graph.

Result:

Blue overlay box is shown in the place where the component was before opening the tab.

Expected result:

Overlay should update to real component position.

Inspector is not synchronized after router-view content changes. Is this a bug?
(:: Please forgive my poor English. )

I use bootstrap-vue intensively. Because of this, there many components visualized which are not important. Most of the bootstrap-vue components start with b-. It would be a cool feature if we could filter components (hide specific or show specific).

Reproduction:

Edit some component and move and zoom graph in DejaVue, next move travel slider.

Result

Graph position and zoom levels are lost on every slider move.

Expected result:

Graph should stay on the selected zoom level (and if possible also position)

Hey, i using electron and electron-devtools-installer for installing chrome extension for electron

Error on this line

$('a').on('click', function (e) {

Thanks for pretty cool extension 👍

or add an option to view the console.log data.

e.g.

// run each component through the DVconstructor
                                        console.log('components', components)

                                let methodKeys = Object.keys(node).filter((el) => {
                                    if(el[0] === '_' || el[0] === '$') return false
                                    else if(typeof node[el] === 'function') return true;
                                    else return false;
                                })

                                console.log(methodKeys)