devtools-docs/docs/extensions-gallery.html

{{+bindTo:partials.standard_devtools_article}}
<h1>DevTools Extensions Gallery</h1>

  <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>
     <p><input class="webstore-search" type="text" id="filter" placeholder="Search the list below"/></p>
     <p>&nbsp;</p>
</div>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

<script>

String.prototype.trunc = function(n){
    return this.substr(0,n-1)+(this.length>n?'&hellip;':'');
};

!function(a){"use strict";"function"==typeof define&&define.amd?define("jquery.sheetrock",["jquery"],a):a(window.jQuery)}(function(a){"use strict";a.fn.sheetrock=function(a,b){return a.target=this.length?this:!1,a=t(a),a&&(y(b)&&null!==b?h(a,b):g(a)),this};var b={},c=0,d="sheetrockError",e="sheetrockLoaded",f="sheetrockRowOffset",g=function(b){a.fn.sheetrock.promise=a.fn.sheetrock.promise.pipe(function(){return i(b)}).pipe(function(){return j(b)})},h=function(a,b){k(a),l.call(a,b),n.call(a)},i=function(b){var c={sql:"select * limit 1",dataHandler:r,userCallback:a.noop,target:!1};return-1===b.sql.indexOf("%")||s(b)?a.Deferred().resolve():(z("Prefetching column labels."),j(a.extend({},b,c)))},j=function(b){k(b),b.chunkSize&&b.target&&(b.sql+=" limit "+(b.chunkSize+1)+" offset "+b.offset,B(b.target,f,b.offset+b.chunkSize)),b.callback="sheetrock_"+c++;var d={data:u(b),context:b,url:a.fn.sheetrock.server,dataType:"jsonp",cache:!0,jsonp:!1,jsonpCallback:b.callback};return z(d,b.debug),a.ajax(d).promise().done(l).fail(m).always(n)},k=function(b){b.loading.show(),a.fn.sheetrock.working++},l=function(a){o(a,"warnings"),o(a,"errors"),z(a,this.debug),x(a,"status","table")&&x(a.table,"cols","rows")?this.dataHandler.call(p.call(this,a),a):m.call(this,a)},m=function(){B(this.target,d,1),z("Request failed.")},n=function(){this.loading.hide(),this.userCallback(this),a.fn.sheetrock.working--},o=function(b,c){x(b,c)&&a.each(b[c],function(a,b){x(b,"detailed_message")?z(b.detailed_message):x(b,"message")&&z(b.message)})},p=function(b){var c=this;return c.parsed={},c.parsed.last=c.chunkSize?Math.min(b.table.rows.length,c.chunkSize):b.table.rows.length,c.parsed.loaded=!c.chunkSize||c.parsed.last<c.chunkSize?1:0,c.parsed.header=a.map(b.table.cols,F).length?1:0,c.parsed.labels=c.labels&&c.labels.length===b.table.cols.length?c.labels:a.map(b.table.cols,G),B(c.target,e,c.parsed.loaded),c},q=function(b){var c=this,d=c.target;a.extend(c,{thead:c.rowGroups?a("<thead/>").appendTo(d):d,tbody:c.rowGroups?a("<tbody/>").appendTo(d):d}),c.offset||c.headersOff||(c.parsed.header||!c.headers)&&c.thead.append(c.rowHandler({num:0,cells:J(c.parsed.labels)})),a.each(b.table.rows,function(b,d){if(x(d,"c")&&b<c.parsed.last){var e=w(c.offset+b+1+c.parsed.header-c.headers),f={num:e,cells:{}};(e||!c.headersOff)&&(a.each(d.c,function(a,b){var d=c.formatting?K(b):!1,e=b&&x(b,"v")?c.cellHandler(b.v):"";f.cells[c.parsed.labels[a]]=d?M(e,"span",d):e}),f.num?c.tbody.append(c.rowHandler(f)):c.thead.append(c.rowHandler(f)))}})},r=function(c){var d={};a.each(c.table.cols,function(a,b){d[b.id]=G(b)}),b[this.key+this.gid]=d},s=function(c){return a.isEmptyObject(c.columns)?b[c.key+c.gid]||!1:c.columns},t=function(b){if(b=a.extend({},a.fn.sheetrock.options,b),b.key=C(b.url),b.gid=D(b.url),b.chunkSize=b.target?w(b.chunkSize):0,b.headers=w(b.headers),b.offset=b.chunkSize?A(b.target,f):0,b.loading=I(b.loading),!b.target&&b.dataHandler===q)return z("No element targeted or data handler provided.");if(A(b.target,e))return z("No more rows to load!");if(A(b.target,d))return z("A previous request for this resource failed.");if(b.url){if(!b.key)return z("Could not find a key in the provided URL.");if(!b.gid)return z("Could not find a gid in the provided URL.")}else;return z(b,b.debug),b},u=function(a){var b={key:a.key,gid:a.gid,tqx:"responseHandler:"+a.callback};return a.sql&&(b.tq=H(a.sql,s(a))),b},v=function(a){return a.toString().replace(/^ +/,"").replace(/ +$/,"")},w=function(a){return Math.max(0,parseInt(a,10)||0)},x=function(a){for(var b=1;b<arguments.length;b++)if(!y(a[arguments[b]]))return!1;return!0},y=function(a){return"undefined"==typeof a?!1:!0},z=function(a,b){return b=!y(b)||y(b)&&b,b&&window.console&&console.log&&console.log(a),!1},A=function(b,c){return b.length?a.data(b[0],c)||0:0},B=function(b,c,d){return b.length?a.data(b[0],c,d)||0:0},C=function(a){var b=new RegExp("key=([^&#]+)","i");return b.test(a)?a.match(b)[1]:!1},D=function(a){var b=new RegExp("gid=([^&#]+)","i");return b.test(a)?a.match(b)[1]:!1},E=function(a){return x(a,"label")?a.label.replace(/\s/g,""):!1},F=


var data = {"version":"0.6","status":"ok","sig":"623784745","table":{"cols":[{"id":"A","label":"","type":"string","pattern":""},{"id":"B","label":"","type":"string","pattern":""},{"id":"C","label":"","type":"string","pattern":""},{"id":"D","label":"","type":"string","pattern":""},{"id":"E","label":"","type":"string","pattern":""},{"id":"F","label":"","type":"string","pattern":""},{"id":"G","label":"","type":"string","pattern":""},{"id":"H","label":"","type":"string","pattern":""},{"id":"I","label":"","type":"string","pattern":""},{"id":"J","label":"","type":"string","pattern":""},{"id":"K","label":"","type":"string","pattern":""}],"rows":[{"c":[{"v":"Angular Batarang"},{"v":"Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications."},{"v":"AngularJS"},{"v":"This extension features tools to help find and address performance bottlenecks, and visualize and debug applications."},{"v":"https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk"},{"v":"https://github.com/angular/angularjs-batarang"},{"v":"http://i.imgur.com/V47o35o.jpg"},{"v":"http://2.bp.blogspot.com/-YgdghCiF9p0/UaL6XG_vJjI/AAAAAAAADGA/Z-8YrBWaY3A/s1600/batarang.png"},{"v":"https://github.com/angular/angularjs-batarang/raw/master/img/deps.png"},{"v":"https://raw.github.com/angular/angularjs-batarang/master/img/options.png"},{"v":"https://www.youtube.com/watch?feature=player_embedded&v=q-7mhcHXSfM"}]},{"c":[{"v":"DevTools Terminal"},{"v":"Local terminal in your browser."},{"v":"Dmitry Filimonov"},{"v":"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 assets, using git, grunt, wget or even vim - you may find this extension a useful time-saver."},{"v":"https://chrome.google.com/webstore/detail/devtools-terminal/leakmhneaibbdapdoienlkifomjceknl"},{"v":"https://github.com/petethepig/devtools-terminal"},{"v":"http://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/image_0.png"},{"v":""},{"v":""},{"v":""},{"v":""}]},{"c":[{"v":"Ember Inspector"},{"v":"Tool for debugging Ember applications."},{"v":"EmberJS"},{"v":"The Ember Inspector is a plug-in for the Chrome developer tools that makes understanding and debugging your Ember.js application a snap.\n\nAfter installing this extension, you\u0027ll be able to easily:\n\n- View all of the routes defined in your application.\n- Reference Ember\u0027s naming conventions for your URLs, including what to name your controllers, templates, routes and more.\n- Overlay your application with information about what templates, controllers, and models are currently being rendered.\n- Inspect the objects in your application, such as models and controllers, with UI that fully supports Ember features such as bindings and computed properties.\n- Make your application\u0027s objects available in the console as the $E variable.\n- If you\u0027re using Ember Data, see all of the records that have been loaded.\n\nThe Ember Inspector is an open source project maintained by the Ember.js community. The source code is available for download at https://github.com/tildeio/ember-extension."},{"v":"https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi"},{"v":"https://github.com/tildeio/ember-extension"},{"v":"https://lh4.googleusercontent.com/oBZgX7bO-LoH5iqPDuST1HtHB46fdnmz1xDjBFz2Mw-Y4Yw7Vs90bHgqk1A9gWssFRxp2T4UXgo=s640-h400-e365-rw"},{"v":"https://lh6.googleusercontent.com/TGLbr4UoyLqBNvZACqghquEMo5bVWWrlA8f_UkCf4F5etIcqNM0HcBLVRRCQHHLWwBilJbznxrk=s640-h400-e365-rw"},{"v":"https://lh3.googleusercontent.com/xMVHoMRWR9XT_uFJhgGvsYJCWqOeAf0meOEHQBGFQcurLo4SDsLz7zkrU6cvC_a6vNEKodHwqQ=s640-h400-e365-rw"},{"v":"https://lh6.googleusercontent.com/i9LKsSo9Zd875XAQeFMpPL3OBItSq1g2z_UEVewoPE2MHgrzkd15z0WVTovFd4_wa6ugV5p-IA=s640-h400-e365-rw"},{"v":"http://www.youtube.com/watch?v=18OSYuhk0Yo"}]},{"c":[{"v":"Backbone Debugger"},{"v":"Developer Tools extension for debugg

//https://spreadsheets.google.com/tq?key=0AhcraNy3sgspdFlKdGg5SDB2bWJMRWw1bkdFN0QwNkE&gid=0&tq=offset%201&tqx=responseHandler:c
</script>

<script type="text/html" id="tile">
<li class="webstore-tile flex-item">
  <a href="https://<%= cells.E %>">
  <div class="webstore-tile-imageholder">
     <img class="lazy webstore-tile-image" data-original="<%= cells.G %>" width="224px"/>
  </div>
  <div class="webstore-tile-title">
    <%= (cells.A).trim() %>
  </div>
  <div class="webstore-tile-description">
    <%= (cells.D).trunc(220) %>
  </div>
</a>
</li>
</script>

<script>
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
</script>

<script>
$(function(){

    var resultPane = $('#results');
    var webstoreSearch = $('.webstore-search');
    var tileTemplate = $('#tile').html();
    var HRTemplate = _.template(tileTemplate);

    function postLoader(){
        $("img.lazy").lazyload();
    }

    function loadResults(){
      resultPane.sheetrock({
        url:'',
        headersOff: true,
        rowHandler: HRTemplate,
        userCallback: postLoader
      }, data);
    }

    webstoreSearch.keyup(function() {
        filter(this); 
    });

    function filter(element) {
        var value = $(element).val().toLowerCase();
        var $li = $("#results > li");

        $li.hide();
        $li.filter(function() {
            return $(this).text().toLowerCase().indexOf(value) > -1;
        }).show();
        $li.find("img").lazyload();
    }

    loadResults();
});
 
</script>



{{/partials.standard_devtools_article}}