devtools-docs/docs/extensions-gallery.html

{{+bindTo:partials.standard_devtools_article}}

<style>
  li.webstore-tile.flex-item {
    list-style: none;
    padding: 25px 0;
    clear: left;
}

.webstore-tiles ul {
    padding: 0;
}

img.webstore-tile-image {
    width: 50%;
    float: left;
    padding-right: 10px;
}
</style>

  <div class="container">
    <div class="webstore-tiles-view">
    <div class="webstore-text">
    <h1>Featured DevTools Extensions</h1>
    <p>Recommended Chrome DevTools extensions for improving your delight during debugging and development.</p>
    </div>


</div>

   <div class="webstore-tiles">
        <ul class="features flex-container flex-container-style fixed-height" id="results">

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="http://i.imgur.com/V47o35o.jpg" width="224px" src="http://i.imgur.com/V47o35o.jpg" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Angular Batarang
  </div>
  </a>
  <div class="webstore-tile-description">
    This extension features tools to help find and address performance bottlenecks, and visualize and debug applications.
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/devtools-terminal/leakmhneaibbdapdoienlkifomjceknl">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="http://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/image_0.png" width="224px" src="http://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/image_0.png" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    DevTools Terminal
  </div>
  </a>
  <div class="webstore-tile-description">
    DevTools Terminal is a new Chrome DevTools extension that brings the power of the terminal to your browser. If you ever find yourself context-switching between Chrome and the command-line for tasks like: pulling down as…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh4.googleusercontent.com/oBZgX7bO-LoH5iqPDuST1HtHB46fdnmz1xDjBFz2Mw-Y4Yw7Vs90bHgqk1A9gWssFRxp2T4UXgo=s640-h400-e365-rw" width="224px" src="https://lh4.googleusercontent.com/oBZgX7bO-LoH5iqPDuST1HtHB46fdnmz1xDjBFz2Mw-Y4Yw7Vs90bHgqk1A9gWssFRxp2T4UXgo=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Ember Inspector
  </div>
  </a>
  <div class="webstore-tile-description">
    The Ember Inspector is a plug-in for the Chrome developer tools that makes understanding and debugging your Ember.js application a snap.

After installing this extension, you'll be able to easily:

- View all of the rou…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh5.googleusercontent.com/kZnxEqqQ7pHQk3aUpR_Pq4OJp1iwmcdAxWrbS8DtOgODt2Xk2FXq8juI54-UOsmN9zs3LNv34w=s640-h400-e365-rw" width="224px" src="https://lh5.googleusercontent.com/kZnxEqqQ7pHQk3aUpR_Pq4OJp1iwmcdAxWrbS8DtOgODt2Xk2FXq8juI54-UOsmN9zs3LNv34w=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Backbone Debugger
  </div>
  </a>
  <div class="webstore-tile-description">
    Adds a panel under the Chrome Developer Tools that displays in real-time all your application views, models, collections and routers. Data displayed includes:
- Views: rendering status, html element, associated model an…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/internal?hl=en">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh4.googleusercontent.com/RO9s2sb_dmJ3NZqSFIFwYzix16uJbk3WS91GRSIWkj_jjvXqpuOBZjnP8k5EFUIoT46ccSA39A=s640-h400-e365-rw" width="224px" src="https://lh4.googleusercontent.com/RO9s2sb_dmJ3NZqSFIFwYzix16uJbk3WS91GRSIWkj_jjvXqpuOBZjnP8k5EFUIoT46ccSA39A=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    React Developer Tools
  </div>
  </a>
  <div class="webstore-tile-description">
    Adds React React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools (formerly WebKit Web I…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/thorax-inspector/poioalbefcopgeaeaadelomciijaondk">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh5.googleusercontent.com/beJfKEvDoAZRDWtmY3DhXhXEljcSHgYGuXtg4vytp74KkZWfFx75pS9aedMwJ0FUx03FAvddIpM=s640-h400-e365-rw" width="224px" src="https://lh5.googleusercontent.com/beJfKEvDoAZRDWtmY3DhXhXEljcSHgYGuXtg4vytp74KkZWfFx75pS9aedMwJ0FUx03FAvddIpM=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Thorax Inspector
  </div>
  </a>
  <div class="webstore-tile-description">
    Inspector extension for Thorax, a Backbone + Handlebars framework to build large scale web applications.
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/grunt-devtools/fbiodiodggnlakggeeckkjccjhhjndnb">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://github-camo.global.ssl.fastly.net/fba20e792d4e064a683bbd02a16e1b8b523533ef/687474703a2f2f763134642e636f6d2f752f6772756e742d646576746f6f6c732d6d61696e2e706e67" width="224px" src="https://github-camo.global.ssl.fastly.net/fba20e792d4e064a683bbd02a16e1b8b523533ef/687474703a2f2f763134642e636f6d2f752f6772756e742d646576746f6f6c732d6d61696e2e706e67" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Grunt DevTools
  </div>
  </a>
  <div class="webstore-tile-description">
    Extends the Developer Tools, adding tools for Grunt!
A full GUI for your Gruntfile.
Supports background tasks, such as 'watch'.
Allows you to run tasks for multiple projects in a single window.
See the GitHub page fo…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/devtools-redirect/jmhdebkkippcccflcoddckhjjfgnfhnp">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh3.googleusercontent.com/mvnmRdjnvFHatZnHTcCatCbs4vqvFzamq8_W8_85EsKjiq3SxZ9YxW9OcBJeo_ll4zrDM9ZZvQ=s640-h400-e365-rw" width="224px" src="https://lh3.googleusercontent.com/mvnmRdjnvFHatZnHTcCatCbs4vqvFzamq8_W8_85EsKjiq3SxZ9YxW9OcBJeo_ll4zrDM9ZZvQ=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    DevTools Redirect
  </div>
  </a>
  <div class="webstore-tile-description">
    This devtools extension will allow you to work faster on your local files using the server environment, try modifications on a website without breaking it for other people. You're deciding which file(s) you want to redi…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh3.googleusercontent.com/P3WvrKqklL-j5cEBeGSNzUDv0seUxyEI6vc0a0SULABfChhWVwB0yARQuzHNtZGuj30nl4cRhA=s640-h400-e365-rw" width="224px" src="https://lh3.googleusercontent.com/P3WvrKqklL-j5cEBeGSNzUDv0seUxyEI6vc0a0SULABfChhWVwB0yARQuzHNtZGuj30nl4cRhA=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Knockoutjs context debugger
  </div>
  </a>
  <div class="webstore-tile-description">
    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 useful if you got large/nested viewmodels.

A…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/batmanjs-devtools/lgdibimihnidbcllamkdnpfeppdhgala">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="https://lh3.googleusercontent.com/DaY0MKwtzbRuSVrgDGWf5YoHb-QptKgEMC78FwZTVLruj6k-_vC3-EP4XLyBffdukRN5SrIAVB8=s640-h400-e365-rw" width="224px" src="https://lh3.googleusercontent.com/DaY0MKwtzbRuSVrgDGWf5YoHb-QptKgEMC78FwZTVLruj6k-_vC3-EP4XLyBffdukRN5SrIAVB8=s640-h400-e365-rw" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    BatmanJS DevTools
  </div>
  </a>
  <div class="webstore-tile-description">
    If you work with Batman.js, this Batman.js Devtools Chrome extension is an invaluable tool. It includes a variety of tools useful for developing with Batman.js right in your browser.
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="http://maxcdn.webappers.com/img/2013/08/live-edit.jpg" width="224px" src="http://maxcdn.webappers.com/img/2013/08/live-edit.jpg" style="display: inline;">
  </div>
  <div class="webstore-tile-title">
    Emmet LiveStyle
  </div>
  </a>
  <div class="webstore-tile-description">
    Unlike other similar tools, LiveStyle doesn't replace CSS file in browser (or file system) to display changes, it performs structural analysis as-you-type and maps changes from one CSS source into another.

Benefits are…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh4.googleusercontent.com/v33unyvSYqUo_uZxi-1ageW3dSNO47-BE1hjStW6u8h-Uol-xo2Zv5BOB6HxzK7LrcBGNHpbGg=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    SnappySnippet
  </div>
  </a>
  <div class="webstore-tile-description">
    SnappySnippet is a DevTools extension that allows you to extract CSS and HTML from selected DOM subtree (last inspected element). Then, with just one click, you can send selected code to CodePen, jsFiddle or JS Bin.

Ot…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/rappidjs-devtools/oalmajpfbgkkfeamkmgmmccnjfojogbh">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh6.googleusercontent.com/xMDQPmiknOqW7BktQtydMeznsjF8MW0Koelnl3ylajl4h-VCNokHUp8-lR6OIOJXJRbbob8A=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    RapidJS DevTools
  </div>
  </a>
  <div class="webstore-tile-description">
    An extra panel in the inspect dialog of the chrome developer tools, that let you inspect the insights of a rAppid:js application.

To enable the inspection for your application you need to add the following setting to y…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/railspanel/gjpfobpafnhjhbajcjgccbbdofdckggg">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh4.googleusercontent.com/lemKMju7dET6u2RZWK9gIG_2xyu0jDGlPa2kBfoJu3gzvNDL1HOcwNqV2c4dRNrDEP8bmB7rtg=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    RailsPanel
  </div>
  </a>
  <div class="webstore-tile-description">
    RailsPanel is a Chrome extension for Rails development that will end your tailing of development.log. Have all information about your Rails app requests right there in the Developer Tools panel. Provides insight to db/r…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh4.googleusercontent.com/cZiq75gy1K2ENi8iUFjj3--mgU1-r4Ftf-0vpVOKGwN3dwj0I3qV2woGG0lal0U1InLJlhAl=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    App Inspector for Sencha
  </div>
  </a>
  <div class="webstore-tile-description">
    Google Chrome™ Dev Tools extension for debugging Sencha™ applications.
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh5.googleusercontent.com/RNzDchmmCUoDzALHPCjQWbzKYA8n9oeULTF6Y2pTst8qBWwSNheEqdPXdbYvxzEdfD87VH48KA=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    jQuery Debugger
  </div>
  </a>
  <div class="webstore-tile-description">
    New Selector Inspector panel
Comfortably inspect your jQuery selectors, and watch their matching elements displayed on any website.
Designed to help you understand easily even the most complex selectors.

Two new sideba…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh6.googleusercontent.com/npKUbXpGzk7BEopp5fdMn7bHsab0qFtw7VWXDZC4bUtrt0NB7OkE4_q2It1rYWvqATY-e5AQ6wQ=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    PageSpeed Insights
  </div>
  </a>
  <div class="webstore-tile-description">
    The PageSpeed Insights browser extensions, available for Chrome and Firefox, allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.

PageSpeed Insights for Chrome is a Chr…
  </div>

</li>

<li class="webstore-tile flex-item">
  <a href="https://chrome.google.com/webstore/detail/django-debug-panel/nbiajhhibgfgkjegbnflpdccejocmbbn">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image"  width="224px"  src="https://lh5.googleusercontent.com/wkehKd8vrTnWylMFv020TcdKFS5Grh0slrgh-s4S4FL0POoqf_WWK2Wt6gUNO68UJnd_WAbp=s640-h400-e365-rw">
  </div>
  <div class="webstore-tile-title">
    Django Debug Panel
  </div>
  </a>
  <div class="webstore-tile-description">
    Django Debug Toolbar inside WebKit DevTools. Works fine with background AJAX requests and non-HTML responses. Great for single-page applications and other AJAX intensive web applications.

  </div>

</li>
</ul>
    </div>
    </div>
  </div>


{{/partials.standard_devtools_article}}