Web Dev Tools

[taikonaut]

Hey all, first post…

So I’ve tinkering with CSS for quite a while now… and normally I use the Web Dev Tools in Chrome to actually try out stuff in the CSS live just to have a quick workflow and then adjust them in the CSS files.

Is there any way to start up the MM on my Raspberry and then, like… use the Chromium Web Dev tools to make some progress in styling the thing? So far I’m changing stuff in the CSS, restart the mirror… not happy, shut it down… change stuff in the CSS… restart mirror… that’s quite tedious.

Any tips for me how to actually access the web dev tools, when the MMis running in full-screen mode on my Pi?

Cheers!

[sdetweil]

@taikonaut just hit refresh, f5 in the dev window or ctrl-R in the MM window, to reload MM with new css (and modulename.js), etc

u can start MM with the dev window open by using npm start dev

when MM is full screen, ctrl-shift-i toggles the dev window on/off…

u can also do this remote from the PI, if u have

address:"0.0.0.0",
ipWhitelist:[],

in config.js to allow remote, in your house, systems to connect … then u can use chrome on your pc too

[taikonaut]

Uuuh! The more you know! Thanks! Great advice! :thumbs_up:

[sdetweil]

@taikonaut cool

all this is the same as normal dev window access on chrome on PC, any web page

only thing mm related is the address/ipWhitelist stuff

[taikonaut]

@sdetweil Yes, it is. The whitelisting finally was a breakthrough for me.

Now I connect to the PI via RDP, change stuff at a whim, check it in the browser, use the Web Dev Tools as I’m used to… sometimes you just need a nudge in the right direction.

Made more progress last night than I did in all of the weeks before.

Thanks again.