Test Mobile Sites with the Chrome Web Browser

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

To test your iPhone or iPad website in the Chrome web browser, you can launch the developer tools by clicking the Wrench icon in the top right corner of the browser window and choosing Tools →Developer Tools or by choosing the key command Control+Shift+I in Windows or Command+Option+I on the Mac.

The Developer Tools window in Chrome has many tools to help you find detailed information about any page you open in the browser. Using the Elements panel, shown, you can view the source HTML or CSS styles, browse the Document Object Model, and manipulate each of them in real time. After the window is open, you can leave it connected to the main browser or allow it to float independently.

The Resources panel shows resources that have been loaded, such as HTML, CSS, JavaScript, Images, Fonts, HTML5 Databases, and other elements related to a web page. The interactive panel makes it possible for you to make changes to the code and see their impact (without changing the live web page because the tools are only temporarily altering the code that’s cached in the browser.)

The developer tools include several tabs, including the Network panel, which shows the components a page is requesting from web servers, the length of requests, and the bandwidth that’s required. The Scripts panel shows a list of scripts requested by the page and comes with a full-featured script debugger.