Resize Graphics and Photos for iPad and iPhone
Choose Widgets to Display on Your Blog
Display Information with a Twitter Feed Widget

Test Mobile Sites with the Chrome Web Browser

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.

image0.jpg

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.

image1.jpg

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.

blog comments powered by Disqus
How to Install Safari Testing Extensions
How to Activate User Agent Switcher in Safari
Tweak the Mobile Switcher
Detect and Direct Mobile Devices
How to Optimize Web Images in PNG Formats
Advertisement

Inside Dummies.com