Thursday, May 30, 2013

Chrome Developer Tools

At: Hotdog menu > Tools > Developer tools ...is where the Chrome Developer Tools are kept in Google's Chrome browser. Ctrl-Shift-I also opens them up. The hotdog menu is found in that button with three horizontal lines with rounded ends on it which tells you "Customize and control Google Chrome" when you mouse over it. Anyways, at the tools: Tabs will run across the top reading:

  1. Elements
  2. Resources
  3. Network
  4. Sources
  5. Timeline
  6. Profiles
  7. Audits
  8. Console

 
 

Open files in the "Sources" tab and set breakpoints in .js files there. When running a page, skip ahead from a breakpoint by pressing F5. If you have Firebug Lite open at the same time as the Developer Tools you probably won't even be able to see the content of the web site at hand. Close Firebug Lite in this case by clicking on the icon at the upper right of its pane which looks like a short vertical line surrounded by a circle.

Addendum: What I say about skipping ahead by pressing F5 is completely wrong. F5 refreshes the browser.

No comments:

Post a Comment