敲好用的网页工具和书签小技巧总结一下平时自己用到的那些敲好用的网页工具和书签小技巧（摸鱼、提效），再也不用因为一个小功能

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2 万元奖池等你挑战！」

总结一下平时自己用到的那些敲好用的网页工具和书签小技巧（摸鱼、提效），再也不用因为一个小功能去装一堆软件啦！！！

摸鱼

文档相关

Can I use 各种语法兼容性查询
印记中文各种中文文档

沙箱

代码编译

JS

Vue

CSS

CSS Grid Generator grid 布局
FANCY-BORDER-RADIUS border-radius 圆角
CSS Shadows Generator box-shadow 阴影
Cubic-Bezier 贝塞尔曲线
Easing Gradients 渐变
Clippy — CSS clip-path maker clip-path
Neumorphism/Soft UI generator border-radius / background / box-shadow

CSS 预处理器

SVG

Get Waves SVG 波浪生成器

正则

正则可视化工具
- regulex
- regexper
regex101 在线正则测试工具
regexgen 生成与一组字符串匹配的正则表达式
any-rule 正则大全

图片处理

remove.bg 去除图像背景

图片压缩

图片生成

carbon 好看代码图片生成

图标

工具大全

在线工具代码运行、加密、解密、格式化；图片、文字处理；二维码生成等
webcode.tools Web 代码生成工具(CSS、HTML、meta 信息、JSON 等)

在线协作

书签小技巧

我们编写的 JavaScript 代码可以保存为书签，当我们点击书签时，可以在当前页面运行所保存的代码

显示密码

实用场景，浏览器保存了密码，但自己忘了 QAQ!

javascript: void (function () {
  document.querySelectorAll('input[type=password]').forEach(function (dom) {
    dom.setAttribute('type', 'text')
  })
})()

回到顶部

只支持窗口滚动，不支持内联滚动

javascript: void (function () {
  document.scrollingElement.scrollIntoView({ behavior: 'smooth' })
})()

显示页面布局

打开一个网页想看看布局 0.0

javascript: (function () {
  function getColor() {
    return Math.floor(Math.random() * 256)
  }
  document.querySelectorAll('body *').forEach(function (dom) {
    var color = 'rgba(' + [getColor(), getColor(), getColor(), 0.6] + ')'
    dom.style.outline = '1px solid ' + color
  })
})()