Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Debugging in Chrome

Page of 168

The debugger that ships with Webkit-based browsers (Google Chrome, Apple Safari), depicted in the illustration below, enables you to inspect the DOM of your application, review all HTTP requests, and read the contents of cookies and HTML 5 local storage. Using this tool is particularly helpful when trying to debug AJAX request query strings, inspect the DOM elements that were created in your application by the Sencha Touch framework, set debugging breakpoints, and performance tune your app.

The Chrome Debugger, viewing http requests

The debugger is partitioned into the following seven segments:

Label Description
Elements Enables you to click on any area in your browser and inspect its markup. It also displays all the CSS applied to the element and allows you to selectively enable, disable, and modify individual styles.
Resources Enables you to review the contents of HTML 5 local database (SqlLite), HTML 5 Local Storage, HTML 5 Session Storage, HTTP cookies, and the HTML5 Application Cache.
Network Displays all HTTP communications. This is particularly useful for troubleshooting AJAX requests. Displays both data transmitted via the HTTP header to the server as well as the content returned from the server.
Sources Displays all of the JavaScript files that were loaded into the browser as part of the request. You can set breakpoints and step through your code one line at a time. You can also define Watch Expressions to keep an eye on the contents of your variables.
Timeline Displays the time to download files from the server, the time to execute scripts, and the time to render the output. Use the timeline to develop insights into where your bottlenecks might be in your code as well as benchmark your changes.
Profiles Similar to the timeline, the Profiles panel captures the execution of your application and then displays the percentage of CPU utilization that was required to execute specific methods or handle events. You can also profile the performance of your CSS to see how long selector matching took and take a heap snapshot to understand memory distribution among your page's Javascript objects and related DOM nodes.
Audits Evaluates the performance of your application and provides helpful optimization tips.
Console Displays error messages as well as the output from executing console.log() statements. You can also execute javascript code interactively in this view.

 

Page of 168
comments powered by Disqus