September 2012
Intermediate to advanced
552 pages
14h 48m
English
Content preview from Professional HTML5 Mobile Game Development
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Exploring the Chrome Developer Tools
Chrome is available on all platforms, and its developer tools are top-notch. Almost any piece of information you want to view about your page is available as it’s running, and you can execute arbitrary JavaScript from the console. Safari has tools that are nearly identical (they share the same codebase); however, Safari isn’t available for Linux and isn’t nearly as popular as Chrome among developers.
Activating Developer Tools
Unlike Firebug, Chrome developer tools come pre-installed with Chrome and just need to be opened. To access the tools, you can go to the Wrench menu in top-right corner of the browser, select Tools, and then select Developer Tools. On a PC or Linux, you can also press Ctrl+Shift+I to open them. On a Mac, Command+Option+I works.
Inspecting Elements
The first tab on developer tools is Elements (see Figure 7-1) and it enables you to view the current state of the Document Object Model (DOM). This is different from the HTML you see in View Source, which shows you the HTML loaded from the server because JavaScript may have modified the DOM. On the left pane, you can browse around the DOM, opening and closing individual block elements as wanted and modifying attributes by double-clicking them. You can also right-click (Ctrl-click on a Mac) to make further modifications, such as editing the Node as HTML or adding or removing elements.
Figure 7-1: Inspecting an element.
If you want to inspect a specific DOM element on the ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.