Chrome рдбреЗрд╡рд▓рдкрд░ рдЯреВрд▓ рдХреА рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╕реНрдирд┐рдкреЗрдЯреНрд╕ рдХреЗ рд╕рд╛рде рдХреНрд╖рдорддрд╛рдУрдВ рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдпрд╣ рд╡рд┐рдХрд╛рд╕ рдХреЛ рдЧрддрд┐ рджреЗрддрд╛ рд╣реИ рдФрд░ рд╡рд░реНрдХрдлрд╝реНрд▓реЛ рдХреЛ рд╕рд░рд▓ рдмрдирд╛рддрд╛ рд╣реИред
GitHub рдкрд░ рд╕реНрдирд┐рдкреЗрдЯреНрд╕ рдХрд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╕рдВрдЧреНрд░рд╣ рдЙрдкрд▓рдмреНрдз
рд╣реИ ред
Google Chrome рдореЗрдВ рд╕реНрдирд┐рдкреЗрдЯ
рдЖрдк
рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рдХреНрд░реЛрдо рдкреНрд░рд▓реЗрдЦрди рдореЗрдВ рд╕реНрдирд┐рдкреЗрдЯ рдХрд╛рд░реНрдпреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЕрдзрд┐рдХ рдкрдврд╝ рд╕рдХрддреЗ рд╣реИрдВред рдФрд░ рдпрд╣рд╛рдБ рдПрдХ рд╕рдВрдХреНрд╖рд┐рдкреНрдд рдирд┐рд░реНрджреЗрд╢ рд╣реИ:
- "рдХреНрд░реЛрдо: // рдЭрдВрдбреЗ" рдкрд░ рдЬрд╛рдПрдВ - "рдбреЗрд╡рд▓рдкрд░ рдЯреВрд▓ рдкреНрд░рдпреЛрдЧ рд╕рдХреНрд╖рдо рдХрд░реЗрдВ" рдЬрд╛рдВрдЪреЗрдВред
- рдУрдкрди DevTools: "рд╕реЗрдЯрд┐рдВрдЧреНрд╕" - "рдбреЗрд╡рд▓рдкрд░ рдЙрдкрдХрд░рдг рдкреНрд░рдпреЛрдЧ" - "рд╕реНрдирд┐рдкреЗрдЯреНрд╕ рд╕рдорд░реНрдерди" рдХреА рдЬрд╛рдБрдЪ рдХрд░реЗрдВред
- рд░рд┐рдмреВрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, DevTools "рд╕реНрд░реЛрдд" рдЯреИрдм рдореЗрдВ, "рд╕реНрдирд┐рдкреЗрдЯреНрд╕" рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛, рдЬрд╣рд╛рдВ рдЖрдк рд╕реНрдирд┐рдк рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:

рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рд╕реНрдирд┐рдкреЗрдЯреНрд╕
рдЖрдк рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рднреА рд╕реНрдирд┐рдкреЗрдЯ рд╕рдорд░реНрдерди рдХреЛ рд╕рдХреНрд╖рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
- рдореЗрдиреВ "рдЯреВрд▓" - "рд╡реЗрдм рдбреЗрд╡рд▓рдкрд░" - "рд╕реНрдХреНрд░реИрдЪрдкреИрдб"ред
- рд╕реНрдирд┐рдкреЗрдЯ рдЪрд┐рдкрдХрд╛рдПрдБ рдФрд░ рдЪрд▓рд╛рдПрдБ (Cmd-R / Ctrl-R)ред
- рдореЗрдиреВ "рдлрд╝рд╛рдЗрд▓" - "рд╕рд╣реЗрдЬреЗрдВ", рдлрд┐рд░ "рдлрд╝рд╛рдЗрд▓" - рдкреБрди: рдЙрдкрдпреЛрдЧ рдХреЗ рд▓рд┐рдП "рд╣рд╛рд▓ рд╣реА рдореЗрдВ рдЦреЛрд▓реЗрдВ"ред
рдЬрд╣рд╛рдБ рдпрд╣ рдирд╣реАрдВ рд╣реИ рд╡рд╣рд╛рдБ 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!'); } })();

рдФрд░ рдпрд╣рд╛рдБ рд╕реНрд╡рдпрдВ рд╕реНрдирд┐рдкреЗрдЯ рд╣реИрдВ:
рд░рдВрдЧ, рдкреГрд╖реНрдарднреВрдорд┐-рд░рдВрдЧ рдФрд░ рд╕реАрдорд╛-рд░рдВрдЧ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рд╕рднреА рд░рдВрдЧреЛрдВ рдХреЛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИред
рд╕реНрдирд┐рдкреЗрдЯ рдХреЛрдб (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"); })();

рдХрдВрд╕реЛрд▓рдЯреЗрдмрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ HTTP рд╣реЗрдбрд░ рдХреЛ рдЖрд╕рд╛рдиреА рд╕реЗ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИред
рд╕реНрдирд┐рдкреЗрдЯ рдХреЛрдб (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"); })();

рдкреГрд╖реНрда рдкрд░ рд╕рднреА рдЫрд╡рд┐рдпреЛрдВ рдХреЛ рдбреЗрдЯрд╛ 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"); })();
Window.performance рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЬрд╛рдирдХрд╛рд░реА рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИред
рд╕реНрдирд┐рдкреЗрдЯ рдХреЛрдб (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"); })();

рдПрдХ рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рд╕рд╛рд░рдгреАрдмрджреНрдз рд░реВрдк рдореЗрдВ рдкреГрд╖реНрда рдкрд░ рд╕рднреА рд░реВрдкреЛрдВ рдХрд╛ рдбреЗрдЯрд╛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИред
рд╕реНрдирд┐рдкреЗрдЯ рдХреЛрдб (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(); } })();

рдмрд╛рдХреА рдХреЗ рд▓рд┐рдП, рдХреЛрдИ рдХрдо рдЙрдкрдпреЛрдЧреА рд╕реНрдирд┐рдкреЗрдЯ рдирд╣реАрдВ,
GitHub рдкреГрд╖реНрда рджреЗрдЦреЗрдВред