“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Take a look at all the good web tools and bookmarking tips you can use, so you don’t have to install a bunch of software just for one little feature!!

Touch the fish

  • Feel the fish hot list
  • Chrome dinosaur
  • Cool graffiti

Documents related to

  • Can I use Various syntax compatibility queries
  • Imprinting Chinese various Chinese documents

The sandbox

  • CodeSandbox
  • Codepen

The code to compile

  • Ast generator
  • rollup

JS

  • Babel
  • TypeScript

Vue

  • Vue Template Explorer
  • Vue 3 Template Explorer
  • Vue SFC Playground

CSS

  • CSS Grid Generator gridlayout
  • FANCY-BORDER-RADIUS border-radiusRounded corners
  • CSS Shadows Generator box-shadowshadow
  • Cubic-Bezier curves
  • Much the Gradients on the gradient
  • Clippy — CSS clip-path maker clip-path
  • Neumorphism/Soft UI generator border-radius / background / box-shadow

CSS preprocessor

  • Scss
  • Less
  • Stylus

SVG

  • Get Waves SVGWave generator

regular

  • Regular visualization tool
    • regulex
    • regexper
  • Regex101 is an online regular test tool
  • Regexgen generates regular expressions that match a set of strings
  • Any-rule Specifies regular information

The image processing

  • Remove.bg removes the image background

Image compression

  • TinyPNG
  • docsmall

Images generated

  • Carbon nice code image generation

icon

  • Iconfont – Alibaba vector icon library
  • ByteDance IconPark

Tools of

  • Online tool code running, encryption, decryption, formatting; Picture, word processing; Two-dimensional code generation, etc.
  • Webcode. tools Web code generation tool (CSS, HTML, meta information, JSON, etc.)

Online collaboration

  • ProcessOn – Free online mapping, mind mapping, flow chart, real-time collaboration
  • Tencent document

Bookmarking Tips

The JavaScript code we write can be saved as a bookmark, and when we click on the bookmark, we can run the saved code on the current page

Show the password

  • In a practical scenario, the browser saved the password, but forgot the QAQ!
javascript: void (function () {
  document.querySelectorAll('input[type=password]').forEach(function (dom) {
    dom.setAttribute('type'.'text')})}) ()Copy the code

Back to the top

  • Only window scrolling is supported. Inline scrolling is not supported
javascript: void (function () {
  document.scrollingElement.scrollIntoView({ behavior: 'smooth' })
})()
Copy the code

Display page layout

  • Open a web page and want to see layout 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
  })
})()
Copy the code