I’m the kind of no-code developer who’s always looking for new resources to optimize my workflow. One thing that’s always been tough for me is testing my WordPress projects on mobile while I’m developing. I won’t lie—there have been many times when I worked directly on the live project, published on the server, using the project URL to adjust every little detail. That poor server endured countless updates and refreshes. I’ve lost track of how often this made me impatient, unproductive, and even crashed the server from so many page reloads while testing Elementor-built pages.
Although Elementor is an amazing tool, it’s not really designed for constant “update page” clicks. It consumes a lot of server resources. With each refresh, a massive amount of elements, CSS files, and other resources are updated. On top of that, this workflow slowed me down since I had to load the site directly from the server, dealing with cache issues and other performance impacts along the way.
But another thing I won’t lie about is that when it came to mobile versions, I often ended up neglecting them. The mobile experience rarely received the level of attention it deserved. But how could I overlook such an important detail, especially when the majority of users are on mobile?
Looking for a way to optimize my workflow, I discovered BrowserSync, and as they say in their tagline, it’s a “time saver”—and it truly is.
Now, whenever I want to check a project on mobile, I simply open the terminal and type:browser-sync start --proxy "http://localhost:10003" --files "css/*.css"
In this case, localhost:10003 is the local address generated by LocalWP. After running the command, the following information appears:
The address http://192.168.1.2:3000 is the one I can use to view the WordPress installation on my phone, as long as it’s connected to the same Wi-Fi network 😉
Now, if the internet goes down, I won’t even worry. I’ll just ask for Voxel to be sent to me by mail, and I’ll be perfectly fine, accessing my Voxel projects right from my phone! 🥳
