谷歌浏览器: Snippets小程序哪家强?

Snippets是可以在Chrome DevTools的“源”面板中创建和执行的小脚本。 您可以从任何页面访问和运行它们。 当您运行代码段时,它会从当前打开的页面的上下文执行。 1. 显示所有元素的边框,看页面布局非常方便 [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }); 2. allcolors.js 从页面上的元素中使用的计算样式打印所有颜色。 使用样式化的console.log调用来可视化每种颜色。 // allcolors.js // https://github.com/bgrins/devtools-snippets // Print out CSS colors used in elements on the page. (function () { // Should include colors from elements that have a border color but have a zero width? var includeBorderColorsWithZeroWidth = false; 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 }; []....

2018-02-07 · 5 min · 王端端