有用的帮助

刀刀

1/7/2025

0 字

0 分钟

前端开发利器，有了它们能够让我们事半功倍！

Vue

• 源码架构翻译：Vue Template Explorer (vuejs.org)

TypeScript

• 在线 JSON 转 TS：JSON to TypeScript (transform.tools)

正则

• 在线正则校验：正则表达式在线测试
• 正则转图形：正则转图形

其他

• ast语法：ast语法
• gif录制：ScreenToGif
• 文字生成拼音：pinyin
• clip-path在线生成工具：clip-path
• svg滤镜：svg-filter
• Css与HTML语法查询：Can I use

调试

H5调试

• vConsole

  这个插件有点像微信小程序的调试插件，不过功能更丰富，可以查看控制台打印、网络请求、本地存储等。

  使用方法如下：

  let consoleScript = document.createElement("script");
  consoleScript.src = "https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js";
  consoleScript.onload = function () {
    new VConsole()
  }
  document.head.appendChild(consoleScript);

  通过 CDN 引入在线模块即可。

  效果如下所示：

  pCTqQCd.jpg

• eruda

  在项目的index.html文件里加入下面这段代码

  <script src="http://eruda.liriliri.io/eruda.min.js"></script>
  <script>
      eruda.init();
  </script>

  项目启动后，在手机右下角就会出现灰色的控制台。效果如下所示：

  pC7kF8x.png