StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p><strong>Contents of part 2</strong> (navigate to: <a href="https://stackoverflow.com/questions/10541225/cross-browser-testing-all-major-browsers-on-one-machine#10541470">part 1</a>)</p> <p>&emsp;4.  Internet Explorer<br> &emsp;5.  Firefox<br> &emsp;6.  Opera<br> &emsp;7.  Chrome<br> &emsp;8.  Safari<br> &emsp;9.  Developer tools (and shortcuts)<br> &ensp;10.  Measured set-up time and disk space<br> &emsp;&emsp;&emsp; •&ensp; Time needed per browser (install & config)<br> &ensp;11.  Optimal usage<br> &emsp;&emsp;&emsp; •&ensp; Homepage at <code>http://10.0.2.2:8888/</code></p> </blockquote> <hr> <blockquote> <h1>Installation & configuration</h1> </blockquote> <p>Browser configuration tips:</p> <ul> <li>Home page</li> <li>Disable check for: "Default browser" and "updates".</li> <li>Activate Developer tools</li> </ul> <hr> <blockquote> <h1>4. Internet Explorer</h1> </blockquote> <p>Windows 7 does not allow running older instances of IE <sup>but see note below</sup>. That is why a Win XP VM is needed.</p> <p>IE cannot be downgraded, so start with the lowest version, then upgrade IE in a <strong>separate Sandboxie</strong>. Set the preferences in the lowest browser version before upgrading, so that you only have to set the main preferences once.</p> <ul> <li>IE6 - Installed by default in WinXP</li> <li><a href="http://download.microsoft.com/download/3/8/8/38889dc1-848c-4bf2-8335-86c573ad86d9/IE7-WindowsXP-x86-enu.exe" rel="nofollow noreferrer">IE7</a>/<a href="http://download.microsoft.com/download/C/C/0/CC0BD555-33DD-411E-936B-73AC6F95AE11/IE8-WindowsXP-x86-ENU.exe" rel="nofollow noreferrer">IE8</a> - Install in Sandboxie (WinXP)</li> <li>IE9+ - Get a pre-built Windows virtual machine images from the <a href="http://www.modern.ie/en-us/virtualization-tools#downloads" rel="nofollow noreferrer">modern.IE</a> website.<br> These images expire 30 days after first use. When the images are expired, they shut down after an hour of use. If you do not wish to re-create the images every time, change the hardware clock of your VM before activating the image.<br> E.g. If you use VirtualBox, launch the terminal and issue the following command (replace the capitalized names with something sensible):<br> <code>VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset <OFFSET IN MS, prefixed by plus or minus></code></li> </ul> <p>Fully offline installers for IE6 (and even IE5.5) are available <a href="http://helpdesk.uvic.ca/software/downloads/windows/msiexpl.html" rel="nofollow noreferrer">at this site</a>.</p> <p>For IE6 and IE7, the <a href="http://www.microsoft.com/download/en/details.aspx?id=18359" rel="nofollow noreferrer">Internet Explorer Developer Toolbar</a> should be installed. IE8+ has <a href="http://msdn.microsoft.com/en-us/library/gg589512%28v=vs.85%29.aspx" rel="nofollow noreferrer">built-in F12 Developer tools</a>.</p> <p><strong>Configuration</strong></p> <ul> <li>Start IE6 settings: Home page, Security, Cookies, default browser.</li> <li>IE7: Get rid of the First run page, via (IE7 Sandboxie) registry. See <a href="http://social.technet.microsoft.com/Forums/en/itprovistaie/thread/91c92a44-1baf-48c3-bae2-12ed926d5639#258fd0f0-120a-4f1c-ad8c-d18a77421cfc" rel="nofollow noreferrer">this post on Microsoft's TechNet forum</a>.</li> <li>IE8: Get rid of the "Set Up Windows Internet Explorer 8" dialog. This can be done by starting IE8, then clicking "Later", or <a href="http://www.winhelponline.com/blog/disable-ie8-tour-welcome-screen-runonce-all-users/" rel="nofollow noreferrer">modifying the registry</a>.</li> </ul> <p>It is actually possible to run IE6 - 8 in Windows 7 through application virtualization. <a href="http://www.vmware.com/products/thinapp/" rel="nofollow noreferrer">VMWare ThinApp</a> works great, but it takes considerably more time to set up, because you need to capture the installation of Internet Explorer. Also, the software package is very expensive (keygens are freely available, but unethical).</p> <hr> <blockquote> <h1>5. Firefox</h1> </blockquote> <p><strong>Option 1 (lazy)</strong>:<br> <a href="http://utilu.com/UtiluMFC/" rel="nofollow noreferrer">Utilu Mozilla Firefox Collection</a>. This tool contains installers for all Firefox versions (200+ MB). Firebug, the Web Developer toolbar and Flash are also included.</p> <p><strong>Option 2</strong>:<br> <em>Multiple Firefox versions can easily be installed and executed at the same time.</em></p> <ol> <li><a href="ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/" rel="nofollow noreferrer">Download</a> Mozilla's official <a href="https://developer.mozilla.org/en/Profile_Manager" rel="nofollow noreferrer">Profile Manager</a>.</li> <li>Download the relevant Firefox versions from <a href="http://releases.mozilla.org/pub/mozilla.org/firefox/releases/" rel="nofollow noreferrer">http://releases.mozilla.org/pub/mozilla.org/firefox/releases/</a>. Older versions can be found at <a href="https://ftp.mozilla.org/pub/mozilla.org/firefox/releases/" rel="nofollow noreferrer">ftp.mozilla.org</a>.</li> <li>Install each Firefox version. It is convenient to choose one main directory ("Firefox"), and use the version numbers as names for the subdirectories ("3.6").</li> <li>Extensions: Start the <strong>oldest</strong> Firefox version, and get your favourite extensions: <ul> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/" rel="nofollow noreferrer">Firebug</a> - A must-have for old Firefox versions. Not really needed for the latest Firefox versions, that have a nice set of <a href="https://developer.mozilla.org/en-US/docs/Tools" rel="nofollow noreferrer">built-in dev tools</a>.</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/" rel="nofollow noreferrer">HttpFox</a> - A simple and effective tool to measure HTTP requests.</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" rel="nofollow noreferrer">Web Developer</a> - An extremely useful toolbar for web development. Saves much time.</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/console%C2%B2" rel="nofollow noreferrer">Console<sup>2</sup></a> - Enhances the built-in Console (<kbd>Ctrl</kbd> <kbd>Shift></kbd> <kbd>J</kbd>).</li> </ul></li> <li>Preferences: <code>Tools > Options</code> (Windows), <code>Edit > Preferences</code> (Linux) <ul> <li>General: Homepage</li> <li>Security: Uncheck all settings, except for "Warn me when sites try to install add-ons".<br> (Do not forget to view the Warning message settings, via the button at the bottom).</li> <li>Advanced: <ul> <li>General: <ul> <li>Check for default browser: off</li> <li>Submit crash reports: off</li> </ul></li> <li>Update: Disable all updates</li> </ul></li> </ul></li> <li>Clean-up: Close all tabs, press <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Del</kbd> and check everything. Then close Firefox.</li> <li>Firefox' <a href="https://developer.mozilla.org/en/Profile_Manager" rel="nofollow noreferrer"><strong>Profile Manager</strong></a>:<br> <a href="https://i.stack.imgur.com/eeN6c.png" rel="nofollow noreferrer" title="Firefox' profile manager"><img src="https://i.stack.imgur.com/eeN6c.png" width="450" height="250" alt="screenshot" title="Full size"/></a> <ul> <li>Duplicate each profile via the <code>Copy</code> option.</li> <li>A <a href="https://i.stack.imgur.com/opgTT.png" rel="nofollow noreferrer" title="Profile manager: Copy profile dialog">dialog <sup>screenshot</sup></a> opens. Choose an appropriate name (e.g. <code>Firefox 3.6</code>) and a destination.</li> <li>Use the <code>Firefox version</code> option to select the default Firefox version for the profile.</li> <li>Also check the <code>Start new instance [-no-remote]</code> box, to allow multiple simultaneous Firefox versions running at a time.</li> </ul></li> <li>Finishing up <ul> <li>Use the <code>Start Firefox</code> button to start an instance of Firefox.</li> <li>Let the add-on compatibility check run and update where necessary.</li> <li>Clear the cache, history, etc. using <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Del</kbd>.</li> <li>Repeat this step for each Firefox version.</li> </ul></li> </ol> <hr> <blockquote> <h1>6. Opera</h1> </blockquote> <p><strong>Opera</strong>: A list of all installers is available on <a href="http://www.opera.com/browser/download/?custom=yes" rel="nofollow noreferrer">Opera.com</a>. Multiple versions can be installed side-by-side without any problems. During the installation, choose "Custom", and a <strong>different</strong> directory.<br> On installation, also choose to use the same profile for all users.</p> <p><strong>Important preference: Settings > Preferences > Advanced > Security > Do not check for updates.</strong></p> <p>Note: Opera 15+ uses the same rendering and JavaScript engine as Chrome.</p> <hr> <blockquote> <h1>7. Chrome</h1> </blockquote> <p><strong>Chrome</strong>: Stand-alone installers can be downloaded from <a href="http://www.filehippo.com/download_google_chrome/history/" rel="nofollow noreferrer">File Hippo</a>.<br> It is also possible to run multiple Chrome versions side-by-side.</p> <p>Although Sandboxie can be used, it's recommended to use the next native method in order to run multiple versions side-by-side.</p> <ol> <li>Download the desired version(s) from <a href="http://www.filehippo.com/download_google_chrome/history/" rel="nofollow noreferrer">File Hippo</a>.</li> <li><strong>Create</strong> a main directory, e.g. <code>C:\Chrome\</code>.</li> <li><strong>Extract</strong> the installer (=<strong>without installing</strong>), using <a href="http://www.7-zip.org/" rel="nofollow noreferrer">7-Zip</a> for example.<br> After extracting, a <code>chrome.7z</code> archive is created. Also extract this file, and descend the created <code>Chrome-bin</code> directory.<br> Now, you see <code>chrome.exe</code> and a dir like <code>18.0.1025.45</code>.<br> Move <code>chrome.exe</code> to <code>18.0.1025.45</code>, then move this directory to <code>C:\Chrome</code>. The remaining files in <code>Chrome-bin</code> can safely be deleted.</li> <li><p>Create a shortcut <strong>for each version</strong>:</p> <pre><code>"C:\Chrome\18.0.1024.45\chrome.exe" --user-data-dir="..\User Data\18" --chrome-version=18.0.1025.45 </code></pre> <p>Explanation of this shortcut:</p> <ul> <li><code>"C:\Chrome\18.0.1024.45\chrome.exe"</code> • This is the <strong>launcher</strong></li> <li><code>--user-data-dir="..\User Data\18"</code> • User profile, relative to the location of <code>chrome.exe</code>. You could also have used <code>--user-data-dir="C:\Chrome\User Data\18"</code> for the same effect. <strong>Set your preferences for the <em>lowest</em> Chrome version, and duplicate the User profile for <em>each</em> Chrome version.</strong> Older Chrome versions refuse to use User profiles from new versions.</li> <li><code>--chrome-version=18.0.1025.45</code> • <strong>Location</strong> of binaries: <ul> <li>The location (eg <code>18.0.1025.45</code>) must be the name of the directory:</li> <li>Must start and end with a number. A dot may appear in between.</li> <li>The numbers do not necessarily have to match the real version number (though it's convenient to use real version numbers...).</li> </ul></li> </ul></li> </ol> <p>Regarding configuration: All preferences can be set at <code>chrome://settings/</code>. I usually change the home page and "Under the hood" settings.</p> <ul> <li>Disable auto-updates: <a href="http://dev.chromium.org/administrators/turning-off-auto-updates" rel="nofollow noreferrer">http://dev.chromium.org/administrators/turning-off-auto-updates</a></li> </ul> <p>With the lot of Chrome releases, it is not practical to have all versions installed. I have created a VB script that automates these steps, so I can just store the installers, then run the script whenever I need to test an old version of Chrome: <a href="https://gist.github.com/Rob--W/2882558" rel="nofollow noreferrer">https://gist.github.com/Rob--W/2882558</a></p> <hr> <blockquote> <h1>8. Safari</h1> </blockquote> <p>Note: Safari support on Windows has been discontinued. The last supported Safari version on Windows is 5.1.7; you need a Mac or an OS X VM to test your sites in newer Safari versions.</p> <p>Safari does <a href="https://apple.stackexchange.com/questions/11441/can-i-run-two-versions-of-safari-side-by-side">not natively support</a> multiple versions or user profiles side-by-side. Safari 4 is <a href="http://caniuse.com/usage_table.php" rel="nofollow noreferrer">close to death</a>, so you only have to test 5.*. All Safari versions can be downloaded from <a href="http://www.oldapps.com/apple_safari.php" rel="nofollow noreferrer">Old Apps</a>.</p> <ul> <li>Download and install <a href="http://www.oldapps.com/apple_safari.php?old_safari=21?download" rel="nofollow noreferrer">Safari 5.0</a>.</li> <li>Start Safari, set your preferences.</li> <li><strong>Create a new <em>Sandboxie</em> sandbox for each additional installation</strong>.<br> It's important to initially install the <strong>oldest</strong> version, so that the user profile can be adapted by newer versions.</li> <li>For more information on installing in Sandboxie, see the <em>Sandboxie</em> and <em>Internet Explorer</em> section.</li> </ul> <p>The Developer tools have to be enabled via <code>Preferences > Advanced > Show Developer menu in menu bar</code>. After installing Safari, uninstall Apple software Updater, via <code>Control panel > Add/Remove software</code>.</p> <hr> <blockquote> <h1>9. Developer tools (and shortcuts)</h1> </blockquote> <ul> <li>Internet Explorer <ul> <li>IE6 / IE7: <a href="http://www.microsoft.com/download/en/details.aspx?id=18359" rel="nofollow noreferrer">Internet Explorer Developer toolbar</a></li> <li>IE8 <kbd>F12</kbd> <a href="http://msdn.microsoft.com/en-us/library/ie/dd565628%28v=vs.85%29.aspx" rel="nofollow noreferrer">Developer tools</a> <sup>Built-in</sup></li> <li>IE9+ <kbd>F12</kbd> <a href="http://msdn.microsoft.com/en-us/library/gg589512%28v=vs.85%29.aspx" rel="nofollow noreferrer">F12 Developer tools</a> <sup>Built-in</sup></li> </ul></li> <li>Firefox <ul> <li>3.6+ <kbd>F12</kbd> <a href="http://getfirebug.com/" rel="nofollow noreferrer">Firebug</a> (see <a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/" rel="nofollow noreferrer">addons.mozilla.org</a>)</li> <li>4+ <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>K</kbd> <a href="https://developer.mozilla.org/en/Using_the_Web_Console" rel="nofollow noreferrer">Web console</a> <sup>Built-in</sup></li> <li>All <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>J</kbd> Error console <sup>Built-in</sup> (Extensible using <a href="https://addons.mozilla.org/en-US/firefox/addon/console%C2%B2/" rel="nofollow noreferrer">Console<sup>2</sup></a>)</li> </ul></li> <li>Opera <ul> <li>9.5+ <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> <a href="http://www.opera.com/dragonfly/documentation/" rel="nofollow noreferrer">Opera Dragonfly</a> <sup>Built-in</sup></li> <li>15+ <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>J</kbd> <a href="https://developers.google.com/chrome-developer-tools/" rel="nofollow noreferrer">Chromium Developer Tools</a> <sup>Built-in</sup>.</li> </ul></li> <li>Chrome <ul> <li>All <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>J</kbd> <a href="https://developers.google.com/chrome-developer-tools/" rel="nofollow noreferrer">Chrome Developer Tools</a> <sup>Built-in</sup>.</li> </ul></li> <li>Safari <ul> <li>4+ <kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>C</kbd> <a href="http://developer.apple.com/library/safari/documentation/appleapplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html" rel="nofollow noreferrer">Safari Developer Tools</a> <sup>Built-in</sup>. These tools are disabled by default. Enable it via <code>Preferences > Advanced > Show Developer menu in menu bar</code>.</li> </ul></li> </ul> <hr> <blockquote> <h1>10. Measured set-up time and disk space</h1> </blockquote> <ul> <li>Setting up the base environment takes <strong>30 minutes</strong>.</li> <li>Installing browsers does not require much time.</li> <li>Depending on the number of browsers, configuring them can take some time.<br><br></li> <li>Setting up a WinXP VM with the browsers as listed in this guide + Opera 12 beta: <ul> <li>Size of downloads: 585MB</li> <li>12 browsers</li> <li>Time used: 1:09 hour (32 minutes to get to IE)</li> <li>Appliance size: 1.1G / imported size: 2.2G. </li> <li><strong>Detailed log: <a href="http://pastebin.com/R7WGPK99" rel="nofollow noreferrer">http://pastebin.com/R7WGPK99</a></strong></li> </ul></li> <li>Setting up a huge WinXP VM for detailed browser compatibility tests: <ul> <li>24 browsers</li> <li>Time used: 2:15 hours</li> <li>Appliance size: 1.4G / imported size: 3.0G</li> <li><strong>Log: <a href="http://pastebin.com/SJEgxNyr" rel="nofollow noreferrer">http://pastebin.com/SJEgxNyr</a></strong></li> </ul></li> </ul> <h3>Time needed per browser (install & config)</h3> <ul> <li>Opera: 2 minutes</li> <li>Internet Explorer: 3 minutes *</li> <li>Safari: 4 minutes *</li> <li>Firefox: 5 minutes</li> <li>Chrome: 6 minutes</li> </ul> <p>* excludes time to set up a Sandboxie Sandbox ( < 1 minute).</p> <hr> <blockquote> <h1>11. Optimal usage</h1> </blockquote> <p>When you've finished installing, use CCleaner to clean junk, then:</p> <ul> <li>Export the appliance (this appliance can be saved elsewhere as a back-up).</li> <li>Remove the newly created Virtual Machine</li> <li>Import the appliance (these steps reduce the file size of the VM)</li> <li>Create a snapshot (to be used as a checkpoint)</li> </ul> <p>From now on, when you've finished testing web pages, turn off the VM, and choose "Restore snapshot". This will keep your VM tidy and fast.</p> <p><img src="https://i.stack.imgur.com/ep1jq.png" alt="Turn off machine > Restore snapshot" title="VirtualBox dialog: Turn off VM and restore snapshot"></p> <h3>Homepage at <code>http://10.0.2.2:8888/</code></h3> <p>The guest OS can access the host OS by IP address <code>10.0.2.2</code>. A server running on port <code>8888</code> can be accessed at the guest through <code>http://10.0.2.2:8888/</code>, even when the host does not have an internet connection.</p> <p>For this reason, setting <code>http://10.0.2.2:8888/</code> as the home page is recommended.</p> <p>Possible use cases:</p> <ul> <li>Test a single page.</li> <li>Automatically show a certain page, depending on the exposed User agent (e.g. by redirection).</li> <li>Fiddling: Create a fiddle in Chrome, and test it in Firefox.</li> <li>Share text and links.</li> </ul> <p>All of the previous can easily be implemented on a simple server (I've used <a href="http://nodejs.org/" rel="nofollow noreferrer">Node.js</a>, for example).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload