The Chrome DevTools (Developer Tools), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.
This overview of DevTools points out the most popular and useful features. DevTools help inspect, debug and optimize Web applications. Following are a break down of features DevTools provide:Inspecting the DOM and styles
Inspecting the DOM and styles
- Working with the console
- Improving network performance
- Improving rendering performance
- Inspecting Storage
Web Developer Toolbar
Chrome store location: Web Developer Toolbar
Adds a toolbar button with various web developer tools. The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox. The extension is available for Chrome and Firefox, and will run on any platform that these browsers support including Windows, OS X and Linux.
Chrome store location: Backbone DevTools Backbone team hasn't done much for improving the tool itself but this is good enough for debugging Backbone.js apps. Following are the features provided by Backbone DevTools:
- Inspects views, models, collections and routers
- Detecst which objects have been instantiated
- Diaplys a very useful view" hierarchy in the Elements panel
- Inspect a DOM element and the closest View will be exposed via $view in the console."
Chrome store location: Ember Inspector Yehuda Katz has been working on Ember Inspector, which improves Ember.js debugging workflow with easy inspection of controllers, views, and objects when running an Ember.js application. This tools provides features to get insights into models and their attributes, layers, bound computed properties and avoid the need to dig deep into the Ember object graph to figure out what is happening behind the scene."
Chrome store location: Angular Batarang Angular Batarang(a superheroic tool that lives up to its name) is the most mature of the extensions you can find." The root scope(Scopes provide mechanism for watching the model and provide event processing life cycle) can get diffcult to trace ,so it's useful that it helps you to inspect nested scopes.
Angular Batarang provides following features:
- Visualise dependancies
- Debug applications
- Analyse performance of app extensions to address perfomance bottlenecks
- Get insights into models
- View DOM elements of a scope
- Inspect nested scopes
Chrome store location: Thorax Inspector Thorax Inspector is an inspector extension for Thorax, a Backbone + Handlebars framework to build large scale web applications.
This tool lets you inspect Thorax projects, Views, Models and Collections via the Elements panel."
Chrome store location: Knockout Context Debugger
Knockoutjs Context Debugger shows the knockout context & data for the selected DOM node in a sidebar of the elements pane. Knockoutjs debugging extension adds a extra sidebar in the elements pane of the chrome dev tools with the relevant knockout context and data for the selected element. Very usefull if you got large/nested viewmodels. Allows to add tracing to every observable/computed.
- Fully CSS3 compatible
- Images support
- 11 filters
- Works offline
There are more extensions and helpers out there. Following are few of them: