MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Web Dev Tools

    Scheduled Pinned Locked Moved Custom CSS
    5 Posts 2 Posters 1.6k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T Offline
      taikonaut
      last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil
        last edited by 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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • T Offline
          taikonaut
          last edited by

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

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @taikonaut
            last edited by

            @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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            T 1 Reply Last reply Reply Quote 0
            • T Offline
              taikonaut @sdetweil
              last edited by 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.

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy