Front-end web development can involve a lot of tiny incremental changes, seeing how they fit in with - and affect - the rest of the design.
This usually involves hammering the refresh button of your browser after every change - which whilst on it’s own sounds like a minor gripe - multiply that over the Firefox, Chrome, various Internet Explorer versions and any mobile devices you’re using to see how the minor amends turns out on across multiple browsers and devices, it can become pretty laborious (especially if you’re like me and need to refresh for absolutely every line of code changed).
Enter PrePros, a piece of software we’ve been trialling for the last few weeks on one of our latest front-end-heavy projects, which brings to the table a handy-dandy little feature: Live Browser Refresh. This solves that meticulous problem outlined above by detecting when you’ve hit save on a LESS / SASS / CSS or JS file, then automatically compiles your code and refreshes any browser pages pointing to the specified project url, be they desktop browsers or any mobile devices connected to another of PrePros’ awesome features: Multi-Device Testing.
Making Multi-device testing that bit easier
Our current setup to test mobile devices on our local development environments is to run Fiddler (a local debugging proxy server), and reroute the phone / tablet’s internet through the developer’s computer in order to access their projects. Whilst this has served us pretty well so far, it can get pretty tricky when multiple people want to test on various projects across different computers, leading to us having to reroute each device’s internet through each computer every time, which can get pretty tedious.
PrePros has it’s own internal server, but instead uses your computer’s local IP, and attaches the project to a unique port (e.g. Project 1 would be accessible via 192.168.0.50:7849, Project 2 via 192.168.0.50:2159 etc), meaning any device on the network can connect to it without having to mess around with proxy settings on each device.
This instantly saved us a lot of hassle with device testing, as now anyone with a phone or tablet can quickly connect to a developer’s computer and see how things look, then pass it on to the next person who just pops in their IP and port in a new browser tab. Simples!
Debugging code on various devices
But what if something is broken or different on one of those test devices? Most phones don’t have on-board web debugging options, what little debugging information is available on iOS can only be accessed once hooked up to a copy of Safari on a Mac - which makes figuring out why that phone renders the image across the entire screen instead of the 50% it’s meant to needlessly cumbersome and difficult.
But hold up, doesn’t PrePos have some Remote Debugging features? Hells yeah!
PrePros enables you to remotely debug any device viewing your project via a Google Chrome Inspector-style debugging tool Weinre - which means you can quickly figure out what styles are being applied to elements, any debugging output and most of the features you’d find in Firefox or Chrome’s debugging tools (Network traffic, event timeline etc) for most devices, which has made testing and fixing device-specific issues a breeze.
PrePros definitely has the capacity to streamline your front-end development process, from compiling your CSS / JS and refreshing your connected browsers on file saves, to allowing you to easily connect, test and debug your projects on a whole array of devices. I’d definiely recommend you investigate PrePros to see if it can help your front-end development (try it’s unlicensed version which gives you file compiling and live browser refresh, but not device testing), or check out the free alternatives for it’s features which we explored or used before.
Some free alternatives for Front-End Web Developers
Fiddler - Local debugging proxy server
Weinre - The remove device debugging which PrePros uses, which you can install yourself should you wish
WinLESS - Windows interface for compiling LESS when saving files
LiveReload - Refreshes your browser automatically after saving any relevant files (CSS/JS)