<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>themattharris.com &#187; browsertesting</title>
	<atom:link href="http://themattharris.com/tag/browsertesting/feed/" rel="self" type="application/rss+xml" />
	<link>http://themattharris.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Tue, 01 Jun 2010 17:30:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Testing Websites on Google Android</title>
		<link>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2009%2F06%2Ftesting-websites-on-google-android%2F&amp;seed_title=Testing+Websites+on+Google+Android</link>
		<comments>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2009%2F06%2Ftesting-websites-on-google-android%2F&amp;seed_title=Testing+Websites+on+Google+Android#comments</comments>
		<pubDate>Wed, 03 Jun 2009 01:14:36 +0000</pubDate>
		<dc:creator>themattharris</dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[browsertesting]]></category>
		<category><![CDATA[emulator]]></category>
		<category><![CDATA[mobile]]></category>

		<guid isPermaLink="false">http://themattharris.com/?p=303</guid>
		<description><![CDATA[The other day I was developing a site for a client who wanted to be sure their new site would work on the Android platform. I don&#8217;t own a phone which runs Android so I started looking around for an emulator instead. If you do the same you&#8217;ll quickly find the Android Development website which [...]]]></description>
			<content:encoded><![CDATA[<p>The other day I was developing a site for a client who wanted to be sure their new site would work on the Android platform. I don&#8217;t own a phone which runs Android so I started looking around for an emulator instead. If you do the same you&#8217;ll quickly find the <a href="http://developer.android.com/index.html" rel="external">Android Development</a> website which holds a wealth of Android development information aswell as the <acronym title="Software Development Kit">SDK</acronym>. This is helpful but I found it wasn&#8217;t clear whether this would let me test websites or not. For this reason I&#8217;ve put together this quick how-to on getting the Android emulator running on your computer.<span id="more-303"></span></p>

<h2>What you will need</h2>

<ul>
<li>The latest <a href="http://developer.android.com/sdk/" rel="external">Android SDK</a></li>
<li>At least version 1.5 of the <a href="http://java.sun.com/javase/downloads/index.jsp" rel="external">Java Developer Kit</a>. (type @java -version@ into your terminal or command prompt to find out the version you have).</li>
<li>About 10 minutes of time</li>
</ul>

<h2>Setting Up</h2>

<ol>
<li>Follow the instructions on the Android <a href="http://developer.android.com/sdk/1.5_r2/installing.html" rel="external">SDK installation page</a> making sure you follow the steps for adding the tools directory to your path. In my case I put the SDK into <code>~/Code/Android</code> (where <code>~/</code> is my home directory).</li>
<li>Restart your command prompt or terminal and type <code>android</code>. You should be presented with the android help information. If not check you set the path correctly.</li>
</ol>

<h2>Target Platforms and Android Virtual Devices (AVDs)</h2>

<p>It is possible to create emulators (AVDs) for each version (or target) of Android. To do this we need to check which hardware targets are available and what their target ID is. If you type <code>android list targets</code> into your terminal you will be presented with something similar to the code below.
<pre class="brush: plain;">Available Android targets:
id: 1
     Name: Android 1.1
     Type: Platform
     API level: 2
     Skins: HVGA (default), HVGA-L, HVGA-P, QVGA-L, QVGA-P
id: 2
     Name: Android 1.5
     Type: Platform
     API level: 3
     Skins: HVGA (default), HVGA-L, HVGA-P, QVGA-L, QVGA-P
id: 3
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Description: Android + Google APIs
     Based on Android 1.5 (API level 3)
     Libraries:
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: HVGA (default), HVGA-L, QVGA-P, HVGA-P, QVGA-L
</pre></p>

<p>From this information we can see the SDK supports Android 1.1 and 1.5 and their target IDs are 1 and 2 respectively. Knowing this information we can now create our Android Virtual Device. To create an AVD for Android 1.1 (target ID 1) with the name <strong>android1.1</strong> we type:</p>

<p><pre class="brush: plain;">android create avd -n android1.1 -t 1</pre></p>

<p>Similarly for Android 1.5 we type:</p>

<p><pre class="brush: plain;">android create avd -n android1.5 -t 2</pre></p>

<p>A few things to know about AVDs.
* When creating AVDs you can use any name you like. I choose <strong>android1.1</strong> and <strong>android1.5</strong> as they were easier to remember.
* When prompted about hardware settings just press <code>enter</code> as there should be no need to customise the hardware when testing websites.
* AVDs are created in a hidden folder in the root of your home directory. On Linux and MacOS this is <code>~/.android/avd</code>.
* You can find out what AVDs you have by typing <code>android list avd</code> in the terminal.</p>

<h2>Running the Emulator</h2>

<p>Having created the AVDs we can now run the emulator by typing <code>emulator -avd avdname</code>. This command is the one you will need to use from now on if you want to test websites in Android. For example, if we want to emulate Android 1.1 we would type:</p>

<p><pre class="brush: plain;">emulator -avd android1.1</pre></p>

<p>The first time you run the emulator you will be asked if you are happy for Emulator to send usage statistics to Google.
<img src="/content/uploads/2010/01/android-firstrun-300x209.png" alt="The Android SDK Permission to send usage statistics prompt" title="Android First Run" width="300" height="209" class="align-left size-medium wp-image-309" /></p>

<p>It can take about 10-30 seconds for the Android Emulator to boot up. During this time you will see the Android boot screen.
<img src="/content/uploads/2010/01/android-loading-300x250.png" alt="Android Emulator Boot Screen" title="Android Loading" width="300" height="250" class="size-medium wp-image-311" /> <img src="/content/uploads/2010/01/android-loaded-300x250.png" alt="Android Emulator Home Screen" title="Android Home Screen" width="300" height="250" class="size-medium wp-image-310" /></p>

<p>That&#8217;s it! To test your websites just load the Browser from the home screen. To enter a URL click Menu and then select <strong>Go</strong> or <strong>Go to URL</strong> depending on the version of Android you are running.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2009%2F06%2Ftesting-websites-on-google-android%2F&amp;seed_title=Testing+Websites+on+Google+Android/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Locally hosted websites and virtual machines</title>
		<link>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2008%2F08%2Flocally-hosted-websites-and-virtual-machines%2F&amp;seed_title=Locally+hosted+websites+and+virtual+machines</link>
		<comments>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2008%2F08%2Flocally-hosted-websites-and-virtual-machines%2F&amp;seed_title=Locally+hosted+websites+and+virtual+machines#comments</comments>
		<pubDate>Sat, 09 Aug 2008 09:08:11 +0000</pubDate>
		<dc:creator>themattharris</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[browsertesting]]></category>
		<category><![CDATA[dns]]></category>
		<category><![CDATA[hosts]]></category>
		<category><![CDATA[parallels]]></category>
		<category><![CDATA[vmware]]></category>
		<category><![CDATA[windows]]></category>

		<guid isPermaLink="false">http://www.themattharris.com/?p=51</guid>
		<description><![CDATA[So here&#8217;s the situation. You&#8217;ve got a development copy of a website on your local Macbook and you&#8217;ve been making some changes to it. Everything looks great but you want to make sure you haven&#8217;t made changes that stop the site rendering the way you expect in Internet Explorer or Firefox 2. Usually you&#8217;d make [...]]]></description>
			<content:encoded><![CDATA[<p>So here&#8217;s the situation. You&#8217;ve got a development copy of a website on your local Macbook and you&#8217;ve been making some changes to it. Everything looks great but you want to make sure you haven&#8217;t made changes that stop the site rendering the way you expect in Internet Explorer or Firefox 2.  Usually you&#8217;d make use of your corporate network computers to test the site but your working remotely so don&#8217;t have that luxury. You do, however, have a couple of virtual machines running Windows XP and different versions of browsers.  The question is, how do you test the changes without committing them to the live site?<span id="more-51"></span></p>

<p>The answer is remarkably simple and allows you to test any site hosted on your local machine with browsers installed on your virtual machines. In all of this I am assuming your running Mac OS X and Windows XP in the virtual machine.  That being said, as long as your know your hosts IP address and the virtual machine is running Windows 95 upwards this will work. By host I mean the machine which you run VMWare or Parallels on.</p>

<h2>What you need</h2>

<ul>
<li>A virtual machine application such as <a href="http://www.vmware.com/products/desktop_virtualization.html">VMWare</a> or <a href="http://www.parallels.com/en/desktop/">Parallels</a></li>
<li>A website hosted on your local machine</li>
</ul>

<h2>What to do</h2>

<p>With your virtual machine turned off, edit it&#8217;s settings to ensure it is running the Network card in &#8220;Bridged&#8221; mode.  What this does is allow your virtual machine to appear on your network as if it was another computer, rather that the default NAT mode that hides the virtual machine behind the hosts IP address.</p>

<p>Next start up your virtual machine and whilst it&#8217;s loading, make a note of the hosts IP address. You can find your IP address in the network preferences or through the command <code>ipconfig</code> (Windows) or <code>ifconfig</code> (Linux and Mac).</p>

<p>With the virtual machine now loaded go to Start > Run and type <code>notepad "c:\windows\system32\drivers\etc\hosts"</code>. This will load up the file Windows uses to alias IP addresses to host names.</p>

<p><img src="/content/uploads/2010/01/hosts.jpg" alt="The default Windows hosts file" width="661" height="419" class="alignnone size-full wp-image-202" /></p>

<p>The file is very well explained but in a nutshell, you put the IP address of the host at the beginning of the line, and the domain name that should point to it. So, lets assume my host IP is 10.0.1.97 and the domain I am developing is www.themattharris.com. In the hosts file I would enter a new line as</p>

<p><pre class="brush: plain;">10.0.1.97       www.themattharris.com</pre></p>

<p>Now lets assume i&#8217;m also developing another domain on the host called www.tokofu.com. All I need to do is add another line to the hosts file <pre class="brush: plain;">10.0.1.97       www.tokofu.com</pre></p>

<p><img src="/content/uploads/2010/01/filledin.jpg" alt="Hosts file filled" width="661" height="419" class="alignnone size-full wp-image-201" /></p>

<p>Save the file and test in your virtual machine. The domains you entered into the Windows hosts file will have caused your web browser to request the site from your host and not the Internet.</p>

<p>We can also validate this by running two commands in the Windows Command Prompt. If we run <code>nslookup</code> the computer will lookup the domain name using a DNS server.  If we run the command <code>ping</code> Windows instead uses the address it knows from the hosts file. You can see this by loading a command prompt (Start &gt; Run and type <code>cmd</code> ) and entering <code>nslookup your-domain.com</code> and <code>ping your-domain.com</code></p>

<p><img src="/content/uploads/2010/01/addresscompare.jpg" alt="addresscompare" width="674" height="344" class="alignnone size-full wp-image-200" /></p>

<p>To restore the default behaviour you edit the &#8220;c:\windows\system32\drivers\etc\hosts&#8221; file and either delete the lines you entered, or start the line with a &#35; (this marks the line as a comment).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.themattharris.com/feeder/?FeederAction=clicked&amp;feed=Articles+%28RSS2%29&amp;seed=http%3A%2F%2Fthemattharris.com%2F2008%2F08%2Flocally-hosted-websites-and-virtual-machines%2F&amp;seed_title=Locally+hosted+websites+and+virtual+machines/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
