Сниппеты для Chrome DevTools

    Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

    Сниппеты в Google Chrome


    Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

    1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
    2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
    3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

    image

    Сниппеты в Firefox


    Можно включить поддержку сниппетов и в Firefox:

    1. Меню «Tools» — «Web Developer» — «Scratchpad».
    2. Вставить сниппеты и запустить (Cmd-R / Ctrl-R).
    3. Меню «File»-«Save», затем «File»-«Open Recent» для повторного использования.

    JQuerify.js


    Включает поддержку jQuery там, где ее нет.
    Код сниппета
    (function () {
    
      if ( !window.jQuery ) {
        var s = document.createElement('script');
        s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js');
        document.body.appendChild(s);
        console.log('jquery loaded!');
      }
    
    })();
    


    image

    А вот и сами сниппеты:

    Allcolors.js


    Выводит все цвета, использованные в color, background-color, and border-color.
    Код сниппета
    (function () {
      var allColors = {};
      var props = ["background-color", "color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];
      var skipColors = { "rgb(0, 0, 0)": 1, "rgba(0, 0, 0, 0)": 1, "rgb(255, 255, 255)": 1 };
    
      [].forEach.call(document.querySelectorAll("*"), function (node) {
        var nodeColors = {};
        props.forEach(function (prop) {
          var color = window.getComputedStyle(node, null).getPropertyValue(prop);
          if (color && !skipColors[color]) {
            if (!allColors[color]) {
              allColors[color] = {
                count: 0,
                nodes: []
              };
            }
            if (!nodeColors[color]) {
              allColors[color].count++;
              allColors[color].nodes.push(node);
            }
            nodeColors[color] = true;
          }
        });
      });
    
      var allColorsSorted = [];
      for (var i in allColors) {
        allColorsSorted.push({
          key: i,
          value: allColors[i]
        });
      }
      allColorsSorted = allColorsSorted.sort(function (a, b) {
        return b.value.count - a.value.count;
      });
    
      var nameStyle = "font-weight:normal;";
      var countStyle = "font-weight:bold;";
      var colorStyle = function (color) {
        return "background:" + color + ";color:" + color + ";border:1px solid #333;";
      };
    
      console.group("All colors used in elements on the page");
      allColorsSorted.forEach(function (c) {
        console.groupCollapsed("%c    %c " + c.key + " %c(" + c.value.count + " times)",
          colorStyle(c.key), nameStyle, countStyle);
        c.value.nodes.forEach(function (node) {
          console.log(node);
        });
        console.groupEnd();
      });
      console.groupEnd("All colors used in elements on the page");
    })();
    


    image

    Showheaders.js


    Удобно выводит HTTP заголовки, используется console.table.
    Код сниппета
    (function() {
    
      var request=new XMLHttpRequest();
      request.open('HEAD',window.location,false);
      request.send(null);
    
      var headers = request.getAllResponseHeaders();
      var tab = headers.split("\n").map(function(h) {
        return { "Key": h.split(": ")[0], "Value": h.split(": ")[1] }
      }).filter(function(h) { return h.Value !== undefined; });
    
      console.group("Request Headers");
      console.log(headers);
      console.table(tab);
      console.groupEnd("Request Headers");
    
    })();
    


    image

    Dataurl.js


    Конвертирует все изображения на странице в Data URL (Работает только на картинках в том же домене, что и сайт).
    Код сниппета
    (function() {
    
      console.group("Data URLs");
    
      [].forEach.call(document.querySelectorAll("img"), function(i) {
        var c = document.createElement("canvas");
        var ctx = c.getContext("2d");
        c.width = i.width;
        c.height = i.height;
    
        try {
          ctx.drawImage(i, 0, 0);
          console.log(i, c.toDataURL());
        }
        catch(e) {
          console.log(i, "No Permission - try opening this image in a new tab and running the snippet again?", i.src);
        }
      });
    
      [].forEach.call(document.querySelectorAll("canvas"), function(c) {
        try {
          console.log(c, c.toDataURL());
        }
        catch(e) {
          console.log(c, "No Permission");
        }
      });
    
      console.groupEnd("Data URLs");
    
    })();
    


    image

    Performance.js


    Выводит информацию о window.performance object.
    Код сниппета
    (function () {
    
      var t = window.performance.timing;
      var timings = [];
    
      timings.push({
        label: "Time Until Page Loaded",
        time: t.loadEventEnd - t.navigationStart + "ms"
      });
      timings.push({
        label: "Time Until DOMContentLoaded",
        time: t.domContentLoadedEventEnd - t.navigationStart + "ms"
      });
      timings.push({
        label: "Total Response Time",
        time: t.responseEnd - t.requestStart + "ms"
      });
      timings.push({
        label: "Connection",
        time: t.connectEnd - t.connectStart + "ms"
      });
      timings.push({
        label: "Response",
        time: t.responseEnd - t.responseStart + "ms"
      });
      timings.push({
        label: "Domain Lookup",
        time: t.domainLookupEnd - t.domainLookupStart + "ms"
      });
      timings.push({
        label: "Load Event",
        time: t.loadEventEnd - t.loadEventStart + "ms"
      });
      timings.push({
        label: "Unload Event",
        time: t.unloadEventEnd - t.unloadEventStart + "ms"
      });
      timings.push({
        label: "DOMContentLoaded Event",
        time: t.domContentLoadedEventEnd - t.domContentLoadedEventStart + "ms"
      });
    
      var navigation = window.performance.navigation;
      var navigationTypes = { };
      navigationTypes[navigation.TYPE_NAVIGATENEXT || 0] = "Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission.",
      navigationTypes[navigation.TYPE_RELOAD] = "Navigation through the reload operation or the location.reload() method.",
      navigationTypes[navigation.TYPE_BACK_FORWARD] = "Navigation through a history traversal operation.",
      navigationTypes[navigation.TYPE_UNDEFINED] = "Navigation type is undefined.",
    
      console.group("window.performance");
    
      console.log(window.performance);
    
      console.group("Navigation Information");
      console.log(navigationTypes[navigation.type]);
      console.log("Number of redirects that have taken place: ", navigation.redirectCount)
      console.groupEnd("Navigation Information");
    
      console.group("Timing");
      console.log(window.performance.timing);
      console.table(timings);
      console.groupEnd("Timing");
    
      console.groupEnd("window.performance");
    
    })();
    



    image

    Formcontrols.js


    Выводит в удобном табличном виде данные всех форм на странице.
    Код сниппета
    (function() {
    
      var forms = document.querySelectorAll("form");
    
      for (var i = 0, len = forms.length; i < len; i++) {
        var tab = [ ];
    
        console.group("HTMLForm \"" + forms[i].name + "\": " + forms[i].action);
        console.log("Element:", forms[i], "\nName:    "+forms[i].name+"\nMethod:  "+forms[i].method.toUpperCase()+"\nAction:  "+forms[i].action || "null");
    
        ["input", "textarea", "select"].forEach(function (control) {
          [].forEach.call(forms[i].querySelectorAll(control), function (node) {
            tab.push({
              "Element": node,
              "Type": node.type,
              "Name": node.name,
              "Value": node.value,
              "Pretty Value": (isNaN(node.value) || node.value === "" ? node.value : parseFloat(node.value))
            });
          });
        });
    
        console.table(tab);
        console.groupEnd();
      }
    })();
    


    image

    Остальные, не менее полезные сниппеты, смотрите на странице GitHub.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 13

      +1
      Detecting critical CSS еще один из полезных снипетов, проскакивал недавно у Addy Osmany в блоге

      Спасибо за ссылку на сборник
        –11
        Не ради холивара, а просто из интереса спрошу: Зачем это всё, если есть Firebug?
          +2
          В файрбаге не всё есть. Он так же расширяется плагинами.

          Так, например, я к нему недавно подключил "FireStorage Plus!" для работы с localStorage. Ранее подключал другие дополнения для файрбага.

          Так что и файрбаг расширяется своими «сниплетами».
          0
          Включает поддержку jQuery там, где ее нет.

          Может не везде работать из-за content security policy. Будет выдавать ошибку типа Refused to load the script '...' because it violates the following Content Security Policy directive: "script-src https://*.site.com ".
          Например, на фейсбуке.
            +1
            Для этой же цели есть расширение jquery-injector, и на фейсбуке оно работает.
            0
            А название меню и вообще как включить в русском Хроме, можно? Спасибо.
              +3
              Чтобы выводить цвета в hex-нотации, нужно добавить в код Allcolors.js функцию:

              var to_hex = function(color) {
              	var items = [];
              
              	color.replace(/\d+/g, function(value) {
              		items.push(value | 0);
              	});
              
              	// Skip RGBA
              	if (items.length == 3) {
              		return "#" + ((1 << 24) + (items[0] << 16) + (items[1] << 8) + items[2])
              			.toString(16).slice(1);
              	}
              
              	return color;
              };
              


              И заменить c.key на:
              to_hex(c.key)
              
                0
                Почему-то в статье ни слова об одном маленьком нюансе — в данный момент сниппеты можно включить только в Canary.
                  +1
                  У меня они в стабильной версии работают.
                    0
                    Про Canary написано по второй ссылке в тексте статьи (на официальную документацию).

                    Возможно, в версии под Mac недоступно. Или я слеп. Флаг #enable-devtools-experiments отметил, вкладка Experiments в настройках DevTools появилась, но ни слова при сниппеты я в этом разделе не вижу.

                      0
                      Про Canary написано по второй ссылке в тексте статьи

                      Хм, да, точно.
                      Вообще в DevTools у меня соответствующей настройки тоже нет, но сниппеты при этом есть. Странно. Может, конечно, я попал в какой-то из списков гугла для проведения эксперимента, они ведь любят иногда включить какую-нибудь функцию для случайных пользователей.
                        0
                        Всё, спасибо, нашел. Искал галочку в настройках, а наличие самой вкладки проверить не догадался :)
                  0
                  Для Linux версии Chrome Canary не существует, но снипеты есть!

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое