Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Live Preview and Debugging Your Webpages: Many Devices, Simultaneously
1869
single,single-post,postid-1869,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Presentation_Blog_header

Live Preview and Debugging Your Webpages: Many Devices, Simultaneously

Writing code for a website is quick compared to other programming languages. The problem, though, is because what you build can look different on so many different browsers and platforms it can be huge pain when you are making many small changes to see what it looks like on screen. This gets even more frustrating when you have to test on mobile devices. All you fancy media query people know what I’m talkin’ about. Let’s look at a regular workflow:

  1. Put your files on a web server (either remotely or on your computer)
  2. Load up the page in a browser
  3. See it isn’t quite right
  4. Make a change
  5. Hit save, switch to your browser, hit reload.
  6. Not quite right. Repeat steps 4 and 5 about 100 times.

If you’re checking it out on a mobile phone steps 4 – 6 will, without fail, give you warm and fuzy “Hulk smash” feelings. If you’re debugging complicated javascript on a mobile device then you’re bound to pop a blood vessel…

The Hulk not amused by debugging mobile browsers.

There’s a better way my friends, and it comes in the form of two different tools working together. The first is LiveReload.

LiveReload
Auto-refresh when you save

($9.99 through the Mac App store)

 

LiveReload, as you’ve probably guessed, reloads the page for you as soon as you hit save. This may not sound impressive at first, but ever since the first moment I hit save on a project and saw my changes pop-up in the browser, I was in love. Did I mention it will refresh your mobile devices simultaneously as well?

If you like working with LESS CSS files, it has a built-in LESS support which will compile your LESS files into CSS for you. Any CSS changes are applied to the page without reloading at all. I’m not sure how it accomplishes it, but my best guess is witchcraft. If you’re unfamiliar with LESS, it’s worth checking out.

Before you Begin:

Make sure you have a web server running on your computer. Luckily, every Mac has one built-in. Just go to System Preferences > Sharing. From there make sure that the Web Sharing checkbox is checked. ( For more information check out this article).

Installation:

  1. Download the application here (There is a Windows version as well which is still in beta)
  2. Launch LiveReload
  3. Click the plus button, and add the folder you want it to monitor for you.
  4. Paste this code into the HEAD tag of your html you are debugging:
    <script>
    	document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>
  5. Browse to the URL of your project in your browser on the computer or mobile ( i.e. http://192.168.1.70/~username/testapp ).
  6. Save something in your project folder and watch it reload by itself!

    Adding a project in LiveReload is easy!

 

Weinre
Remote Element inspector and JavaScript Debugger

(download it here)

WeinreWeinre picks up where LiveReload left off. This gives you the Chrome web inspector on any remote device, including your iPhone, iPad, Android. It looks and works exactly like the Chrome development tools do.

If you’ve ever wondered what properties a TouchEvent gives you, the order your functions are firing, or how to make a chocolate soufflé, this makes it extremely find out. Well, maybe not the soufflé thing, but it will let you know where you are running into JavaScript errors.

Weinre window, with DOM Inspection and JavaScript Console

Installation:

  1. Download the application here (Choose the Mac application if you’re on a Mac.)
  2. Unzip and copy the Application to your Applications folder.
  3. Open up the Terminal (under Applications/Utilities/Terminal). We’re going to need to tell Weinre that it is okay to connect to remote devices.
  4. Type this and then hit return:
    mkdir ~/.weinre
  5. Copy and paste this into the terminal, then hit return:
    echo 'boundHost: -all-
    httpPort: 8081
    reuseAddr: true
    readTimeout: 1
    deathTimeout: 5
    ' > ~/.weinre/server.properties
  6. Launch Weinre
  7. Paste this code into the HEAD tag of your html you are debugging. Make sure to replace YOUR_HOST with your computer’s IP address or host name (i.e. 192.168.1.101 or kipp.local):
    <script src="http://YOUR_HOST:8081/target/target-script-min.js#anonymous"></script>
  8. Browse to the URL of your project in your browser on your mobile phone or iPad ( i.e. http://192.168.1.70/~username/testapp )
  9. You should be able to go back to Weinre and click the Element or Console tab and see live output from your device.

Changing CSS properties and HTML in the Elements tab will be visible live on your device, making it easy to fine-tune positioning of elements, or strange layout glitches. If you are using media queries, this comes in very handy.

The Weinre javascript console

An of example of how I used LiveReload and Weinre in my development workflow I mentioned earlier was to look at event properties. This was a life-saver because reliable documentation on the web can be hard to come by.

After setting up a button and hooking it up to a touch event, I typed “console.log(event)”  and I could see all the goodies the mobile browser gave me. Turns out Mobile Safari reports every touch point on the screen.

Another way that I used this setup was to tweak the on-screen buttons for iPad (which don’t show up on the desktop version of my site). Instead of making a change to my CSS, saving, reloading, etc, I nudged the numbers in the Inspector until the button appeared where it was supposed to. Then I just used that number and put it back into the CSS to make the change permanent.

That essentially covers the workflow I use for developing both desktop and mobile sites. It allowed me to watch my changes take place on multiple devices at once as soon as I hit save, as well as more easily fine tuning my page. It has been such a lifesaver for me, I hope it is as helpful to you as well.

(Download the Orbiting Earth demo files, with Javascript includes for Weinre and LiveReload