Using Chrome Development Tools - Basic
The Chrome Development Tools
For a complete description of Chrome Development Tools, refer to https://developers.google.com/chrome-developer-tools/docs/overview.
What follows is a description, from the CloudTV application developer's viewpoint, of the most commonly used features of the Chrome Developer Tools.
- Discover why some text on your page is 15px when you thought you set it to be 12px.
- Find where that extra 2px margin on your page is coming from.
- Do you populate the HTML of your page using document.write() or $(document.body).html(...)? You may want to inspect the live DOM-tree to see how it came out.
- Quickly make changes to CSS in a page without editing source, refreshing, and continually switching between your IDE and browser.
The Elements Panel in Chrome allows developers to interact and view the full DOM-tree, giving a rich set of tools to measure in pixels each element, full in-page highlighting of elements as you mouse over them in the panel, and editable CSS. You can even edit the attributes of your HTML elements inline by double-clicking on them.
The Network Panel enables developers to see the headers of AJAX requests and view the JSON/XML responses in a color-formatted tree. See how long images are taking to load, and where bottlenecks could be in your page load times. The Network Panel provides you with a sortable list of all network requests, and a timeline covering all requests.
Use the links in the footer of the Network Panel to show only Documents/Stylesheets/Images/.../WebSockets/etc.
You should always run through applications with this panel open, in order to debug certain issues such as misspelled assets resulting in 404 errors, and to help you identify services that are taking too long to respond. Consider, for example, an application which loads tweets from twitter, but the response at times can take 1.5 seconds. You may then realize you can reduce load times by changing the number of items you request from twitter from 100, down to 10 of the most recent tweets, and since your application only shows 2 or 3 at a time, this optimization is going to speed up your application load time. These types of decisions can be aided by using the Network Panel to identify bottlenecks.
The sources panel is by far the most developer-focused panel available in Chrome. It bridges the gap between traditional IDEs and developing in a scripting environment that has a disconnected emulator (the browser).
Once breakpoints are present, refresh the page and you will see script execution pause (indicated with an overlay on the page that says "Paused in Debugger," and have the opportunity to step in/over/out of the current function execution while having access to all of the current scope variables, global variables, and call stack.
Probably one of the least understood panels by new developers, the Sources Panel improves your ability to debug — no longer do you need to:
...to identify where your script is failing to execute as expected. You can spare alert() and console.log() the trouble, and can debug using breakpoints.