{"id":192902,"date":"2013-09-07T16:32:02","date_gmt":"2013-09-07T12:32:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=192902"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=192902","title":{"rendered":"\u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0434\u043b\u044f Chrome DevTools<\/span>"},"content":{"rendered":"
\t\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 Chrome Developer Tools \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432. \u042d\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u043d\u0430 GitHub’\u0435<\/a>.<\/p>\n

\u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0432 Google Chrome<\/h4>\n

\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Chrome<\/a>. \u0410 \u0432\u043e\u0442 \u043a\u0440\u0430\u0442\u043a\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f:<\/p>\n

    \n
  1. \u0417\u0430\u0439\u0442\u0438 \u0432 \u00abchrome:\/\/flags\u00bb \u2014 \u041e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u00abEnable Developer Tools experiments\u00bb.<\/li>\n
  2. \u041e\u0442\u043a\u0440\u044b\u0442\u044c DevTools: \u00abSettings\u00bb \u2014 \u00abDeveloper Tools Experiments\u00bb \u2014 \u041e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u00abSnippets support\u00bb.<\/li>\n
  3. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 DevTools \u00abSources\u00bb \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u00abSnippets\u00bb, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430\u043c\u0438:<\/li>\n<\/ol>\n

    \"image\"\/<\/a><\/p>\n

    \u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0432 Firefox<\/h4>\n

    \u041c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0438 \u0432 Firefox:<\/p>\n

      \n
    1. \u041c\u0435\u043d\u044e \u00abTools\u00bb \u2014 \u00abWeb Developer\u00bb \u2014 \u00abScratchpad\u00bb.<\/li>\n
    2. \u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c (Cmd-R \/ Ctrl-R).<\/li>\n
    3. \u041c\u0435\u043d\u044e \u00abFile\u00bb-\u00abSave\u00bb, \u0437\u0430\u0442\u0435\u043c \u00abFile\u00bb-\u00abOpen Recent\u00bb \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/li>\n<\/ol>\n

      <\/p>\n

      JQuerify.js<\/a><\/h4>\n

      \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 jQuery \u0442\u0430\u043c, \u0433\u0434\u0435 \u0435\u0435 \u043d\u0435\u0442. <\/p>\n

      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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!');   }  })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
        \u0410 \u0432\u043e\u0442 \u0438 \u0441\u0430\u043c\u0438 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b:<\/p>\n
      Allcolors.js<\/a><\/h4>\n
        \u0412\u044b\u0432\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 color, background-color, and border-color.  <\/p>\n
      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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"); })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
      Showheaders.js<\/a><\/h4>\n
        \u0423\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442 HTTP \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f console.table.  <\/p>\n
      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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");  })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
      Dataurl.js<\/a><\/h4>\n
        \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 Data URL (\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u0445 \u0432 \u0442\u043e\u043c \u0436\u0435 \u0434\u043e\u043c\u0435\u043d\u0435, \u0447\u0442\u043e \u0438 \u0441\u0430\u0439\u0442).  <\/p>\n
      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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");  })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
      Performance.js<\/a><\/h4>\n
        \u0412\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e window.performance object<\/a>.  <\/p>\n
      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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");  })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
      Formcontrols.js<\/a><\/h4>\n
        \u0412\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0435\u0445 \u0444\u043e\u0440\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.  <\/p>\n
      \u041a\u043e\u0434 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430<\/b><\/p>\n
      \n
      (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();   } })(); <\/code><\/pre>\n
        <\/div>\n<\/div>\n
        \"image\"\/<\/p>\n
        \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435, \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 GitHub<\/a>.    \t<\/p>\n
      <\/div>\n<\/p><\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/192902\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
         \t\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 Chrome Developer Tools \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432. \u042d\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u043d\u0430 GitHub’\u0435<\/a>.<\/p>\n
      \u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0432 Google Chrome<\/h4>\n
        \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Chrome<\/a>. \u0410 \u0432\u043e\u0442 \u043a\u0440\u0430\u0442\u043a\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f:<\/p>\n
        \n
      1. \u0417\u0430\u0439\u0442\u0438 \u0432 \u00abchrome:\/\/flags\u00bb \u2014 \u041e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u00abEnable Developer Tools experiments\u00bb.<\/li>\n
      2. \u041e\u0442\u043a\u0440\u044b\u0442\u044c DevTools: \u00abSettings\u00bb \u2014 \u00abDeveloper Tools Experiments\u00bb \u2014 \u041e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u00abSnippets support\u00bb.<\/li>\n
      3. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 DevTools \u00abSources\u00bb \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u00abSnippets\u00bb, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430\u043c\u0438:<\/li>\n<\/ol>\n
          \"image\"\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-192902","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/192902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=192902"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/192902\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=192902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=192902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=192902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}