Import/export Chrome Developer Tools’ Snippets

微信扫一扫,分享到朋友圈

Import/export Chrome Developer Tools’ Snippets

Chrome offered a excellent feature: Snippets Chrome DevTools Snippets

People made lots for userful snippets:

But Chrome doesn’t provide a sync/export/import function to backup and sync those snippets, fortunately, people hacked it up:

  1. devtools-snippets/import-export/chrome at master · bgrins/devtools-snippets
  2. Export/Import chrome devtools snippets

I prefer the 2nd option as it’s simple and error-prone, let me show you how to play with it.

Step 1. Open a Dev Tools of the Dv Tools

  1. Press Ctrl
    + Shift
    + i
    to open a Dev Tools pane.
  2. Open the menu on the upper-right of the pane, then click Dock side:
    undock into separate window
  3. On the opened Dev Tools pane, press Ctrl
    + Shift
    + i
    again, now will open a Dev Tools of the Dev Tools.

Step 2. Export (backup existing snippets)

Paste and run this code in Console

let exportSnippets
InspectorFrontendHost.getPreferences(_ => { exportSnippets = JSON.parse(_.scriptSnippets) })

Now you can run this code in Console, it will copy ALL the snippets into OS’ clip board in JSON format.

copy(exportSnippets)

Step 3. Import (from a JSON format code)

let importSnippets = [ /* paste snippets here */ ];
InspectorFrontendHost.setPreference("scriptSnippets", JSON.stringify(importSnippets));

Here is mine, pls feel free take it if you need.

Now you have a bunch of powerfull snippets. Happy coding!

let importSnippets = [
  {
    "id": "1",
    "name": "consoleSaveJSON",
    "content": "(function(console){nn    console.save = function(data, filename){nn        if(!data) {n            console.error('Console.save: No data')n            return;n        }nn        if(!filename) filename = 'console.json'nn        if(typeof data === "object"){n            data = JSON.stringify(data, undefined, 4)n        }nn        var blob = new Blob([data], {type: 'text/json'}),n            e    = document.createEvent('MouseEvents'),n            a    = document.createElement('a')nn        a.download = filenamen        a.href = window.URL.createObjectURL(blob)n        a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')n        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)n        a.dispatchEvent(e)n    }n})(console)"
  },
  {
    "id": "2",
    "name": "cssPrettifier",
    "content": "// cssprettifier.jsn// https://github.com/bgrins/devtools-snippetsn// Unminify and prettify a CSS file.nn/*n * cssprettifier-bookmarkletn * Copyright (c) 2013 Addy Osmani, Sindre Sorhusn * CSSBeautify (c) Sencha, Ariya Hidayatn * Prism (c) Lea Veroun * Licensed under the MIT license.n */n /*globals document:true*/n(function () {n  'use strict';nn  if (document.body.childNodes.length !== 1) {n       console.log("CSS Prettify: This page doesn't appear to be a stylesheet.  Make sure you run this on a css file");n       return;n  }nn  // cssbeautifyn  (function(){"use strict";function a(a,b){function s(a){return" "===a||"\n"===a||"   "===a||"\r"===a||"\f"===a}function t(a){return"'"===a||'"'===a}function u(a){return h>="a"&&"z">=h||h>="A"&&"Z">=h||h>="0"&&"9">=h||"-_*.:#".indexOf(a)>=0}function v(){var a;for(a=m;a>0;a-=1)g+=c.indent}function w(){g=r(g),p?g+=" {":(g+="\n",v(),g+="{"),"\n"!==i&&(g+="\n"),m+=1}function x(){var a;m-=1,g=r(g),q&&(a=g.charAt(g.length-1),";"!==a&&"{"!==a&&(g+=";")),g+="\n",v(),g+="}",f.push(g),g=""}var c,f,h,i,j,k,l,m,n,o,r,d=0,e=a.length,g="",p=!0,q=!1;for(c=arguments.length>1?b:{},c.indent===void 0&&(c.indent="    "),"string"==typeof c.openbrace&&(p="end-of-line"===c.openbrace),"boolean"==typeof c.autosemicolon&&(q=c.autosemicolon),r=String.prototype.trimRight?function(a){return a.trimRight()}:function(a){return a.replace(/\s+$/,"")},l={Start:0,AtRule:1,Block:2,Selector:3,Ruleset:4,Property:5,Separator:6,Expression:7,URL:8},m=0,k=l.Start,o=!1,f=[],a=a.replace(/\r\n/g,"\n");e>d;)if(h=a.charAt(d),i=a.charAt(d+1),d+=1,t(n))g+=h,h===n&&(n=null),"\\"===h&&i===n&&(g+=i,d+=1);else if(t(h))g+=h,n=h;else if(o)g+=h,"*"===h&&"/"===i&&(o=!1,g+=i,d+=1);else if("/"!==h||"*"!==i){if(k===l.Start){if(0===f.length&&s(h)&&0===g.length)continue;if(" ">=h||h.charCodeAt(0)>=128){k=l.Start,g+=h;continue}if(u(h)||"["===h||"@"===h){if(j=r(g),0===j.length)f.length>0&&(g="\n\n");else if("}"===j.charAt(j.length-1)||";"===j.charAt(j.length-1))g=j+"\n\n";else for(;;){if(i=g.charAt(g.length-1)," "!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}g+=h,k="@"===h?l.AtRule:l.Selector;continue}}if(k!==l.AtRule)if(k!==l.Block)if(k!==l.Selector)if(k!==l.Ruleset)if(k!==l.Property)if(k!==l.Separator)if(k!==l.Expression)k===l.URL&&")"===h&&g.charAt("\\"!==g.length-1)?(g+=h,k=l.Expression):g+=h;else{if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if(";"===h){g=r(g),g+=";\n",k=l.Ruleset;continue}if(g+=h,"("===h&&"l"===g.charAt(g.length-2)&&"r"===g.charAt(g.length-3)&&"u"===g.charAt(g.length-4)){k=l.URL;continue}}else{if(!s(h)){g+=h,k=l.Expression;continue}t(i)&&(k=l.Expression)}else{if(":"===h){g=r(g),g+=": ",k=l.Expression,s(i)&&(k=l.Separator);continue}if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}g+=h}else{if("}"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if("\n"===h){g=r(g),g+="\n";continue}if(!s(h)){g=r(g),g+="\n",v(),g+=h,k=l.Property;continue}g+=h}else{if("{"===h){w(),k=l.Ruleset;continue}if("}"===h){x(),k=l.Start;continue}g+=h}else{if(u(h)){if(j=r(g),0===j.length)f.length>0&&(g="\n\n");else if("}"===j.charAt(j.length-1))g=j+"\n\n";else for(;;){if(i=g.charAt(g.length-1)," "!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}v(),g+=h,k=l.Selector;continue}if("}"===h){x(),k=l.Start;continue}g+=h}else{if(";"===h){g+=h,k=l.Start;continue}if("{"===h){j=r(g),w(),k="@font-face"===j?l.Ruleset:l.Block;continue}g+=h}}else o=!0,g+=h,g+=i,d+=1;return g=f.join("")+g}"undefined"!=typeof exports?module.exports=exports=a:"object"==typeof window&&(window.cssbeautify=a)})();n  // prismn  (function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(//g,">").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data));l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r){return n.stringify(t.tokenize(e,r))},tokenize:function(e,n){var r=t.Token,i=[e],s=n.rest;if(s){for(var o in s)n[o]=s[o];delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o])continue;var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;le.length)break e;if(c instanceof r)continue;u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tokenize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(n.stringify).join("");var r={type:e.type,content:n.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};r.type=="comment"&&(r.attributes.spellcheck="true");t.hooks.run("wrap",r);var i="";for(var s in r.attributes)i+=s+'="'+(r.attributes[s]||"")+'"';return""+r.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;n  Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<||>)[\w\W]*?(<||>)/ig,inside:{tag:{pattern:/(<||>)|(<||>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});nn  var prismStyle = document.createElement('style');n  var beautified = cssbeautify(document.body.textContent, {autosemicolon: true});n  var highlighted = Prism.highlight(beautified, Prism.languages.css);nn  prismStyle.textContent = 'code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,\'Andale Mono\',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#f5f2f0;}:not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}.token.punctuation{color:#999;}.namespace{opacity:.7;}.token.property,.token.tag,.token.boolean,.token.number{color:#905;}.token.selector,.token.attr-name,.token.string{color:#690;}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5);}.token.atrule,.token.attr-value,.token.keyword{color:#07a;}.token.regex,.token.important{color:#e90;}.token.important{font-weight:bold;}.token.entity{cursor:help;}';nn  document.head.innerHTML = '';n  document.head.appendChild(prismStyle);n  document.body.innerHTML = '
' + highlighted + '

';nn})();"
},
{
"id": "3",
"name": "dataURL",
"content": "// dataurl.jsn// https://github.com/bgrins/devtools-snippetsn// Print out data URLs for all images / canvases on the page.nn(function() {nn console.group("Data URLs");nn [].forEach.call(document.querySelectorAll("img"), function(i) {n var c = document.createElement("canvas");n var ctx = c.getContext("2d");n c.width = i.width;n c.height = i.height;nn try {n ctx.drawImage(i, 0, 0);n console.log(i, c.toDataURL());n }n catch(e) {n console.log(i, "No Permission - try opening this image in a new tab and running the snippet again?", i.src);n }n });nn [].forEach.call(document.querySelectorAll("canvas"), function(c) {n try {n console.log(c, c.toDataURL());n }n catch(e) {n console.log(c, "No Permission");n }n });nn console.groupEnd("Data URLs");nn})();"
},
{
"id": "4",
"name": "formControls",
"content": "// formcontrols.jsn// https://github.com/bgrins/devtools-snippetsn// Print out forms and their controlsnn(function() {nn var forms = document.querySelectorAll("form");nn for (var i = 0, len = forms.length; i {n const [ , key, value ] = s.match(/^(.*?)=(.*)$/);n return {n key,n value: decodeURIComponent(value)n };n });n n console.table(cookies);n }n else {n console.warn('document.cookie is empty!');n }n };n})();n nwindow.viewCookies();"
},
{
"id": "13",
"name": "allColors",
"content": "// allcolors.jsn// https://github.com/bgrins/devtools-snippetsn// Print out CSS colors used in elements on the page.n n(function () {n // Should include colors from elements that have a border color but have a zero width?n var includeBorderColorsWithZeroWidth = false;n n var allColors = {};n var props = ["background-color", "color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];n var skipColors = {n "rgb(0, 0, 0)": 1,n "rgba(0, 0, 0, 0)": 1,n "rgb(255, 255, 255)": 1n };n n [].forEach.call(document.querySelectorAll("*"), function (node) {n var nodeColors = {};n props.forEach(function (prop) {n var color = window.getComputedStyle(node, null).getPropertyValue(prop),n thisIsABorderProperty = (prop.indexOf("border") != -1),n notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace("color", "width")) !== "0px" : true,n colorConditionsMet;n n if (includeBorderColorsWithZeroWidth) {n colorConditionsMet = color && !skipColors[color];n } else {n colorConditionsMet = color && !skipColors[color] && notBorderZero;n }n n if (colorConditionsMet) {n if (!allColors[color]) {n allColors[color] = {n count: 0,n nodes: []n };n }n n if (!nodeColors[color]) {n allColors[color].count++;n allColors[color].nodes.push(node);n }n n nodeColors[color] = true;n }n });n });n n function rgbTextToRgbArray(rgbText) {n return rgbText.replace(/\s/g, "").match(/\d+,\d+,\d+/)[0].split(",").map(function(num) {n return parseInt(num, 10);n });n }n n function componentToHex(c) {n var hex = c.toString(16);n return hex.length == 1 ? "0" + hex : hex;n }n n function rgbToHex(rgbArray) {n var r = rgbArray[0],n g = rgbArray[1],n b = rgbArray[2];n return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);n }n n var allColorsSorted = [];n for (var i in allColors) {n var rgbArray = rgbTextToRgbArray(i);n var hexValue = rgbToHex(rgbArray);n n allColorsSorted.push({n key: i,n value: allColors[i],n hexValue: hexValuen });n }n n allColorsSorted = allColorsSorted.sort(function (a, b) {n return b.value.count - a.value.count;n });n n var nameStyle = "font-weight:normal;";n var countStyle = "font-weight:bold;";n function colorStyle(color) {n return "background:" + color + ";color:" + color + ";border:1px solid #333;";n };n n console.group("Total colors used in elements on the page: " + window.location.href + " are " + allColorsSorted.length);n allColorsSorted.forEach(function (c) {n console.groupCollapsed("%c %c " + c.key + " " + c.hexValue + " %c(" + c.value.count + " times)",n colorStyle(c.key), nameStyle, countStyle);n c.value.nodes.forEach(function (node) {n console.log(node);n });n console.groupEnd();n });n console.groupEnd("All colors used in elements on the page");n n})();"
},
{
"id": "14",
"name": "jQuerify",
"content": "// jquerify.jsn// https://github.com/bgrins/devtools-snippetsn// Add jQuery to any page that does not have it already.n n(function () {n n if ( !window.jQuery ) {n var dollarInUse = !!window.$;n var s = document.createElement('script');n s.setAttribute('src', 'https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js');n s.addEventListener('load', function(){n console.log('jQuery loaded!');n n if(dollarInUse) {n jQuery.noConflict();n console.log('`$` already in use; use `jQuery`');n }n });n n document.body.appendChild(s);n }n n})();"
},
{
"id": "15",
"name": "stopBefore",
"content": ""
}
];
InspectorFrontendHost.setPreference("scriptSnippets", JSON.stringify(importSnippets));</|</|</|</|

微信扫一扫,分享到朋友圈

Import/export Chrome Developer Tools’ Snippets

NodeJS动态传参特性:不定个数参数的省略,默认值与解构

上一篇

科技控的狂欢,三星智能门锁DP728

下一篇

你也可能喜欢

Import/export Chrome Developer Tools’ Snippets

长按储存图像,分享给朋友