Testing your web site in different web browsers and mobile devices

When building your web site, at some point you should test how your site looks in different web browsers and mobile devices. To do this all you need is the Google Chrome web browser. Follow the steps below to test your site. The below steps were written while using Chrome version 33.0.1750.154. Future updates of Chrome may have the icons or tabs in different places.

1. In Chrome, open the “Developer tools” via the button with the horizontal lines in the top right corner of the Google Chrome web browser
2. Now with “Developer tools” open, in the bottom right corner click the round gears icon (the word “Settings” appears when you mouseover it)
3. In the “General” tab, check the “Show ‘Emulation’ view in console drawer” checkbox and close that overlay
4. With the “Developer tools” still open, in the bottom right corner click the icon with a greater than symbol and three lines (the words “Show drawer” appear when you mouseover it) and a new tab appears below the “Developer tools”
5. Click the “Emulation” tab and now you can see how your web site looks in different mobile devices (in the “Device” tab), different screen sizes (in the “Screen” tab), and different user agents/web browsers (in the “User Agent” tab)