Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.