Then to Console-Tab typing: this.document.location = “chrome://extensions”
Then I see one extension
Here I would like to add an additional extension: vuejs-devtools (see 1st link)
(I added the points 1 to 3 to a screenshot below)
@TechAkayy Thanks for your message. Always curious about the other setups around.
Your approach doesn’t allow to select the HTML elements and showing the Pinegrow classes, properties in Pinegrow at the same time, right?
(What I mean is that the built-in Pinegrow-Browser gives Pinegrow-details from an element clicked within Pinegrow)
Hi,
no. Within the pinegrow-canvas we have the preview. I understand the preview to be just a chrome-browser-window with additional features. Within this browser-window we have the possibility to select elements (see Point 1 in screenshot) … The question is, if you can, in your electron solution, still do that or if you have to save your css, html, js file and refresh your browser-page?
What I ment originally with this post, was to be able to use the highlighted feature in Point 2 of the screenshot. If this feature is activated, we can simulate the behaviour like the real end-user. With the vue-dev-tools available in chrome-console you leverage that feature.
I’m not really well qualified with the Pinegrow lexicons, but this is what I call them personally (marked on the below screenshot)…
Canvas - where you can drag and drop and visually build your page
Tree - source/dom mode of the page
Preview externally - opens the page in an external browser at port 40000
Preview internally / Click mode - preview the page internally within pinegrow (like in pt-3 above), so you can interact with the page just like in an external browser
If I understand your question correctly, you are asking if in Click mode (like in pt-4 above), you can interact with the page just like how you would in an external browser and if it talks nicely with the vue-devtools electron app running outside pinegrow?
Also, is your site a vue-cli based SPA served using vue-cli-service at 8080 (or) cdn-based single html page using dom-template?
Hi @_Peter,
So the “browser” in Pinegrow is not straight Chrome. It uses the Chromium engine - the same one that is in chrome and many other browsers. However, the browser is not a full Chrome implementation. It only supports part of the Chrome extensions API - check it out here. So, I don’t think there is any way to run most extensions on Pinegrow. Having said that, I do want poke around the package since NWJS does support the chrome.tabs which runs devtools.
Cheers,
Bob
Vue/react devtool extensions on nwjs in the link below, not sure if you could make it available on pinegrow, may be have a flag in the settings to activate them… as not all users might want to see them when opening the pinegrow devtools…
Again, my personal opinion is to not add the framework specific extensions in pinegrow devtools, as the electron apps are already available as an alternate solution for major frameworks - DevTools Extension | Electron
… and also due to the level of support pinegrow currently offers for vue/react apps which are mostly rendered via javascript funnelled through webpack-based dev servers!
Oh cool, @TechAkayy,
Totally missed that in the docs. I was hoping that the --load-extension could be run without a recompile. I agree with you that there are some good apps out there to help with JS framework builds, plus it is hard to tell what specific elements a particular dev will need.
Cheers,
Bob
