# web-dev-tools

**Repository Path**: qiuny/web-dev-tools

## Basic Information

- **Project Name**: web-dev-tools
- **Description**: 这里是前端工具集合仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 3
- **Created**: 2018-12-28
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 电脑工具, 开发工具, 浏览器插件, ui工具, git录制工具

## README

# 前端常用工具合集

#### 介绍
这里是前端常用工具合集。详细介绍了每个工具的获取方式，主要功能描述。工欲善其事必先利其器，想要做好前端，工具必不可少的。

| 名称                     | 获取地址                                                     | 描述                                                         |
| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| VS code                  | [官方网址](https://code.visualstudio.com/),[官方文档](https://code.visualstudio.com/docs) | 微软开发且跨平台的免费源代码编辑器，功能强大，前端编码工具首选，[使用方法](https://www.runoob.com/w3cnote/vscode-tutorial.html) |
| vscode常用插件           | [前往获取](https://gitee.com/qiuaiyun/web-dev-tools/blob/master/vscode%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6/plugin.md) | 前端实际开发中vscode常用各类插件                             |
| Node                     | [安装包下载](https://nodejs.org/en/download/releases/)       | 安装node后，可以使用node的npm命令下载各类开发依赖包，比如node项目，vue，react等。 |
| JSONView                 | [jsonview下载](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/JSON%E6%A0%BC%E5%BC%8F%E9%A2%84%E8%A7%88chrome%E6%8F%92%E4%BB%B6) | 谷歌浏览器预览json数据结构插件                               |
| vue-devtool              | [最新版本](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/vue-devtools) | vue开发浏览器必备工具，查看vue的vuex，data数据结构，临时修改，删除，保存 |
| Typora主题包             | [常用主题包](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/typora%E4%B8%BB%E9%A2%98/%E5%B8%B8%E7%94%A8%E4%B8%BB%E9%A2%98%E5%8C%85) | 获取主题包后，直接复制到本地typora的主题目录，覆盖原始主题，重启typora即可生效 |
| MDN Web Docs             | [develop官方文档](https://developer.mozilla.org/zh-CN/)      | 包括HTML，CSS，JavaScript，HTTP常用api和知识点解析，非常全面。可以作为前端字典使用 |
| HbuilderX                | [安装包下载](https://www.dcloud.io/hbuilderx.html),[官方文档](https://www.dcloud.io/hbuilderx.html) | 用于编辑网页前端代码，APP开发，小程序开发。APP开发时可以本地预览和真机预览 |
| 微信开发者工具           | [官方下载列表](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) | 用于开发微信小程序                                           |
| Git                      | [安装包下载](https://git-scm.com/download/win)               | 远程仓库代码迭代工具，合并，提交。可以使用命令提交代码到远程仓库 |
| TortoiseGit              | [安装包下载](https://download.tortoisegit.org/tgit/)         | tortoiseGit是一个开放的git版本控制系统的源客户端，支持Winxp/vista/win7.该软件功能和git一样，界面化操作git |
| mycolor                  | [前往配色](https://mycolor.space/?hex=%23845EC2&sub=1)       | 配色网址，前端颜色配置必备                                   |
| 取色工具                 | [Pipette](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/%E5%8F%96%E8%89%B2%E5%B7%A5%E5%85%B7) | 电脑端取色工具，安装后，按住鼠标左键任意取色，前端开发必备   |
| 原型插件                 | [获取地址](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/%E5%8E%9F%E5%9E%8B%E6%8F%92%E4%BB%B6) | 阅读原型所用，方便查看原型模型明细                           |
| acblock-plus广告拦截插件 | [获取地址](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/acblock-plus%E5%B9%BF%E5%91%8A%E6%8B%A6%E6%88%AA%E6%8F%92%E4%BB%B6) | 免费拦截浏览器广告，减少无用广告的烦恼                       |
| 设计标注工具             | [获取地址](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/%E8%AE%BE%E8%AE%A1%E6%A0%87%E6%B3%A8%E5%B7%A5%E5%85%B7) | 方便查看UI设计的psd文件，精确到每个像素，让前端网页设计和ui匹配一致，效果一致 |
| sqlyog_x64位安装包       | [获取地址](https://gitee.com/qiuaiyun/web-dev-tools/tree/master/sqlyog_x64%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E5%B7%A5%E5%85%B7) | 增加sqlyog_x64位安装包，内涵激活注册码，过期激活方法         |