Snippets是可以在ChromeDevTools的Sources窗格中创建和执行的小脚本。您可以从任何页面访问和运行它们。当您运行代码片段时，它会从当前打开的页面的上下文中执行。显示所有元素的边框，很方便看页面布局[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24)).toString(16)});allcolors.js打印页面元素中使用的计算样式中的所有颜色。使用样式化的console.log调用来可视化每种颜色。//allcolors.js//https://github.com/bgrins/devtools-snippets//打印出页面元素中使用的CSS颜色。(function(){//应该包括来自具有边框颜色的元素的颜色但宽度为零？varincludeBorderColorsWithZeroWidth=false;varallColors={};varprops=["background-color","color","border-top-color","border-right-color","border-底部颜色","左边框颜色"];varskipColors={"rgb(0,0,0)":1,"rgba(0,0,0,0)":1,"rgb(255,255,255)":1};[].forEach.call(document.querySelectorAll("*"),function(node){varnodeColors={};props.forEach(function(prop){varcolor=window.getComputedStyle(node,null).getPropertyValue(prop),thisIsABorderProperty=(prop.indexOf("border")!=-1),notBorderZero=thisIsABorderProperty?window.getComputedStyle(node,null).getPropertyValue(prop.replace("颜色","宽度"))!=="0px":true,colorConditionsMet;if(includeBorderColorsWithZeroWidth){colorConditionsMet=颜色&&!skipColors[颜色];}else{colorConditionsMet=color&&!skipColors[color]&¬BorderZero;}if(colorConditionsMet){if(!allColors[color]){allColors[color]={count:0,nodes:[]};}if(!nodeColors[color]){allColors[color].count++;allColors[颜色].nodes.push(节点);}nodeColors[颜色]=true;}});});函数rgbTextToRgbArray(rgbText){returnrgbText.replace(/\s/g,"").match(/\d+,\d+,\d+/)[0].split(",").map(function(num){返回parseInt(num,10);});}functioncomponentToHex(c){varhex=c.toString(16);返回hex.length==1？"0"+十六进制：十六进制；}functionrgbToHex(rgbArray){varr=rgbArray[0],g=rgbArray[1],b=rgbArray[2];返回"#"+componentToHex(r)+componentToHex(g)+componentToHex(b);}varallColorsSorted=[];for(variinallColors){varrgbArray=rgbTextToRgbArray(i);varhexValue=rgbToHex(rgbArray);allColorsSorted.push({key:i,value:allColors[i],hexValue:hexValue});}allColorsSorted=allColorsSorted.sort(function(a,b){returnb.value.count-a.value.count;});varnameStyle="font-weight:normal;";varcountStyle="font-weight:bold;";functioncolorStyle(color){return"background:"+color+";color:"+color+";border:1pxsolid#333;";};console.group("页面元素使用的颜色总数："+window.location.href+"are"+allColorsSorted.length);allColorsSorted.forEach(function(c){console.groupCollapsed("%c%c"+c.key+""+c.hexValue+"%c("+c.value.count+"次)",colorStyle(c.key),nameStyle,countStyle);c.value.nodes.forEach(function(node){console.log(node);});console.groupEnd();});console.groupEnd("页面元素中使用的所有颜色");})();cachebuster.js通过在href和src属性链接和（可选）脚本标签的末尾添加Date.now()来覆盖所有默认情况下，不执行任何处理脚本，应将变量process_scripts更改为true以运行这些脚本。//CacheBuster(function(){varrep=/.*\?.*/,links=document.getElementsByTagName('link'),scripts=document.getElementsByTagName('script'),process_scripts=false;for(vari=0;i
