前端常用的实用工具与网站

1. Snipaste–截图工具

Snipaste截图软件应该算是前端必备的截图软件了,之前也用过其他很多截图软件,这个算最为方便的了。而且最重要的时,它可以回滚截图历史,并且在回滚中还能截图。下面是官网地址的网站链接,当然我更推荐直接在电脑自带的Microsoft Store中搜索下载。网站链接:Snipaste
在这里插入图片描述
在这里插入图片描述

2. ScreenToGif–gif图片录制

ScreenToGif主要是对于一些简单步骤及操作的Gif录制,整体由于是Gif图所以一般都很小,适合于一些问题和解决方法的录制。网站链接:ScreenToGif
在这里插入图片描述
在这里插入图片描述

3. Typora–Markdown编辑器

个人感觉最好用的Markdown编辑器。网站链接:Typora
在这里插入图片描述

4. notepad+±-文本代码编辑器

notepad++可以类比记事本,一些代码文件不想每次打开都用Vscode,只想简单浏览或修改可以直接使用这个软件打开,页面更贴近于日常开发的界面样式,比较好改动。网站地址:notepad++
在这里插入图片描述

5. uTools–多功能工具

uTools算是一个聚合工具,有大部分日常开发需要的小工具,例如:取色,截图上的文本识别,翻译等。鼠标中键可以点开。网站链接:uTools
在这里插入图片描述
在这里插入图片描述

6. EV录屏–录屏软件

目前也使用过其他录屏软件,一些软件要不就是收费,要不就是各种广告,总体来说目前觉得EV录屏算是比较好用。当然OBS也可以用,但是个人不是很常用,这里也贴上链接。网站链接:EV录屏、OBS studio
在这里插入图片描述

网站链接:OBS studio
在这里插入图片描述

7. Xmind–思维导图

主要是项目中或者自己思考的一个导图的制作,目前软件有收费模式,但是免费模式也可以使用,直接安装就可以使用。网站链接:Xmind
在这里插入图片描述

8. Apifox – 接口调试

Apifox一个集合Postman+Swagger+Jmeter+Mock工具集。开发人员在Apifox里定接口、前端直接根据Apifox去Mock数据、后端开发直接在Apifox进行调试、测试人员直接在Apifox的接口文档里面写用例,前端使用Apifox进行前后端联调。网站链接:Apifox
在这里插入图片描述

9. TortoiseGit – Git工具

TortoiseGit提供了直观的图形化界面,使得代码版本管理变得更加简单。无需记忆繁琐的Git命令,只需通过简单的鼠标操作,就能完成代码版本管理的各种操作。网站链接:TortoiseGit

在这里插入图片描述

10. 图片在线压缩

这里推荐三个网站备选 tinypng、squoosh和doc small
如果是普通的日常大部分压缩图片的需求,可以使用tinypng这个网站。网站链接: tinypng
在这里插入图片描述

如果是需要对于较大图片的压缩,同时对图片压缩质量等有一些其他需求,可以使用squoosh这个网站。网站链接:squoosh
在这里插入图片描述
在这里插入图片描述

最后说一下doc small,这个网站比上面两个不同的时可以进行gif和pdf的一些压缩,但是实测一般,日常使用倒是可以满足。网站链接:doc small

在这里插入图片描述

11. iconfont–矢量图标

阿里推出的字体图标素材库,日常前端开发中可以找到大部分的图标,并且可以结合项目去自定义自己项目的字体图标库。这应该算是前端最常用的图标库了。网站链接: iconfont
在这里插入图片描述

12. JSON在线格式化

对于后端返回的json字符串进行一些格式化,平常使用的时候更加简练明确一点,方便查看数据的结构。网站链接:JSON在线格式化
在这里插入图片描述

13. EMOJIALL–表情符号

EMOJIALL主要提供了大量的基础通用的表情符号,使用时可以直接复制粘贴,在写一些文章中可以使用。网站链接:EMOJIALL
在这里插入图片描述

14. removebg–去除图片背景

removebg网站主要就是做一下去除背景的操作,如果电脑上没下PS同时对图片要求不是太高,可以简单使用这个网站进行图片背景的消除。当然图片质量有要求,用PS更好点。网站链接:removebg
在这里插入图片描述

15. FREE API–免费API接口

FREE API网站提供了大量的免费的 API接口供使用,每个接口都提供了完整的文档,开箱即用。网站链接:FREE API
在这里插入图片描述

16. Lorem picsum --随机图片

Lorem picsum这个网站可以解决有时候需要很多测试图片时需要到处翻找的问题,只需要改动网站后面的部分参数就可以生成一些随机的图片方便测试使用。网站链接:Lorem picsum
在这里插入图片描述

17.UU在线工具 – 聚合工具

这个网站就是那种许多小工具的聚合网站,不算是很好的,但是也许会遇到部分需要的功能。网站链接:UU在线工具

在这里插入图片描述

18. css3动画

我们在日常开发中,会遇到一些css动画的需求,可是有时候为了一两个动画引入一些库感觉得不偿失,css3-animation 包含了一些常见的动画效果,并且包含片段代码,直接cv就可以了
在这里插入图片描述

19. 动效交互组件-uiverse

里面有各种酷炫的组件,免费提供按钮、选择框、输入框、加载等交互动效组件样式和代码,可以直接复制到项目里使用。 组件种类全面、效果也很棒+
在这里插入图片描述

20. 封面模板-canva

我们在写文章或者有时候要自己制作一些封面图片,canva上面有很多免费的素材和模板,用起来很方便
在这里插入图片描述

21. 高清图片-UnSplash

国外的一个高清图片下载网站,里面有很多的4k高清图片免费下载,再也不用到处找高清图片了
在这里插入图片描述

22. 在线画图

日常工作中我们要画一些流程图或者思维导图等等,boardmix 个人用起来感觉还不错,也有人喜欢用ProcessOn等,看个人喜好
在这里插入图片描述

23. 快速部署建站

前端有时候需要自己部署一个网站,我们可以自己去买服务器,也有免费的部署网站,如 surge
在这里插入图片描述

24. 在线性能评测

pagespeed 根据各项指标可以得出我们网站的一个综合评分,让我们知道我们的网站在那些方面还可以进行优化
在这里插入图片描述

25. 多平台测试

我们的网站经常要在各种设备下看下效果,可是用手机和浏览器去一个个访问截图又比较麻烦,responsively 这个软件支持主流手机、PAD、电脑设备访问您的网站,并可以导出
在这里插入图片描述

26. Chrome扩展组件

有些同学不能翻墙登录google账号去Google商店下载扩展程序,极简插件 可以不翻墙直接下载Google扩展程序,而且网站是中文的,感觉很不错
在这里插入图片描述

27. 在线简历

简历这个东西找工作大家都是要用到的,网上也有很多免费的简历模板网站,个人推荐这个500丁网站,上面有很多好看的简历模板,很方便
**在这里插入图片描述

28. tool.lu

在这里插入图片描述

众多工具集合,包括时间戳转换,进制转换等

附送250套精选项目源码

源码截图
​​在这里插入图片描述

源码获取:

关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/823956.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Unity坦克大战开发全流程——开始场景——设置界面

开始场景——设置界面 step1:设置面板的背景图 照着这个来设置就行了 step2:写代码 关联的按钮控件 监听事件函数 注意:要在start函数中再写一行HideMe函数,以便该面板能在一开始就能隐藏自己。 再在BeginPanel脚本中调用该函数即…

【AIGC-图片生成视频系列-2】八仙过海,各显神通:AI生成视频相关汇总剖析

最近「图片生成视频系列」层出不穷,我拜读并结合实践(对,就是手撕代码,有开源就撕),并对以下几篇文章的相似点以及关键点稍微做个总结: 一. 生成视频中图像的一致性 在图像生成视频的这个过程…

2023年全国网络安全行业职业技能大赛数据安全管理员操作技能赛题(样题)

2023年全国网络安全行业职业技能大赛数据安全管理员操作技能赛题(样题) 2023年全国网络安全行业职业技能大赛数据安全管理员操作技能赛题(样题) 第一部分:数据安全防护(30%) 第二部分:数据安全管理(30%) 第三部分:数据安全处置(40%) 项目介绍…

10.定时器各功能分析及编码

知识汇总: STM32的定时器有三种,高级定时器,通用定时器,基本定时器 就是功能多与少的差别,下面来逐个解释功能:在此之前,需要对几个概念有认知 几个概念: 1.定时器时钟频率&…

linux安装python

文章目录 前言一、下载安装包二、安装1.安装依赖2.解压3.安装4.软链接5.验证 总结 前言 本篇文章介绍linux环境下安装python。 一、下载安装包 下载地址:官方网站 我们以最新的标准版为例 二、安装 1.安装依赖 yum -y install openssl-devel ncurses-devel li…

mfc140u.dll丢失的解决方法,怎样修复mfc140u.dll

最近看到很多朋友在问找不到mfc140u.dll丢失怎么办?有什么解决方法,今天就给小伙伴们解答一下,mfc140u.dll丢失的解决办法,怎么修复mfc140u.dll。 一.丢失的原因 1.损坏的程序安装:在安装某个程序时,可能会出现意外中…

第六课:冷战和消费主义、个人计算机革命、图形用户界面(GUI)及3D图形

第六课:冷战和消费主义、个人计算机革命、图形用户界面(GUI)及3D图形 第二十四章:冷战和消费主义本课概括:政府和消费者推动了计算机的发展 第二十五章:个人计算机革命本集概括:继续讲计算机发展…

MySQL 数值函数,字符串函数与多表查询

MySQL像其他语言一样,也提供了很多库函数,分为单行函数和分组函数(聚合函数),我们这里先简易介绍一些函数,熟悉就行,知道怎么使用即可. 数值函数 三角函数 指数与对数函数 进制间的转换函数 字符串函数 注:LPAD函数是右对齐,RPAD函数是左对齐 多表查询 注:如果为表起了别名,就…

JavaScript使用教程(二):类型、值和变量

计算机程序通过操作值(如数值3.14)或文本(如“Hello World”)来工作。编程语言中这些可以表示和操作的值被称为类型,而一门语言支持的类型集也是这门语言最基本的特征。程序在需要把某个值保存下来以便将来使用时&…

用CSS中的动画效果做一个转动的表

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…

Post-hoc Concept Bottleneck Models (PCBM)

ICLR 2023 spotlight 文章链接&#xff1a;https://arxiv.org/abs/2205.15480 代码链接&#xff1a;https://github.com/mertyg/post-hoc-cbm 一、概述 Post-hoc CBM&#xff08;PCBM&#xff09;也是CBM大家族中的一员&#xff0c;因此它的基本逻辑与CBM一致&#xff0c;就是…

uniapp微信小程序接入友盟

一、登录友盟官网&#xff0c;按照引导注册友盟账号 二、在友盟平台新建小程序应用&#xff08;建好之后会得到appkey&#xff09; 进入小程序统计后台创建Appkey&#xff0c;按要求填写小程序名称及类型&#xff1a; 三、在微信小程序中接入SDK ---- 以下是npm 配置 1. 安装…

【docker实战】01 Linux上docker的安装

Docker CE是免费的Docker产品的新名称&#xff0c;Docker CE包含了完整的Docker平台&#xff0c;非常适合开发人员和运维团队构建容器APP。 Ubuntu 14.04/16.04&#xff08;使用 apt-get 进行安装&#xff09; # step 1: 安装必要的一些系统工具 sudo apt-get update sudo ap…

Vue中的默认插槽详解

Vue中的默认插槽详解 在 Vue 中&#xff0c;插槽&#xff08;Slot&#xff09;是一种非常强大且灵活的机制&#xff0c;用于在组件中插入内容。Vue 提供了两种类型的插槽&#xff1a;默认插槽&#xff08;Default Slot&#xff09;和具名插槽&#xff08;Named Slot&#xff09…

解决Windows11安装Docker 一直starting 的办法

Starting the Docker Engine... Docker Engine is the underlying technology that runs containers 关闭docker 管理员身份执行wsl --update后在启动。 另外&#xff0c;docker desktop-unexpected wsl error问题跟标题问题好像是同一个问题&#xff0c;我的是一直让其star…

阿里开源大模型 Qwen-72B 私有化部署

近期大家都知道阿里推出了自己的开源的大模型千问72B&#xff0c;据说对于中文非常友好&#xff0c;在开源模型里面&#xff0c;可谓是名列前茅。 千问拥有有强大的基础语言模型&#xff0c;已经针对多达 3 万亿个 token 的多语言数据进行了稳定的预训练&#xff0c;覆盖领域、…

网络运行状况监控工具

网络运行状况是网络在其操作和环境约束范围内按预期运行的能力&#xff0c;但是&#xff0c;随着云和人工智能等技术的出现&#xff0c;网络变得越来越复杂&#xff0c;维护其 IT 基础设施是一项越来越繁琐的任务。为了确保网络可靠性&#xff0c;组织需要了解每个端点的运行状…

乒乓球廉价底板及套胶评测4

球拍找到适应自己的不容易&#xff0c;因为初学者或者说业余爱好者无法确定是按打法特点选拍还是按拍子练打法特点&#xff0c;所以有时候就要孤注一掷&#xff0c;想想练球的初衷&#xff0c;不用被打的好的对手所左右。我和朋友打球的时候发现大家借力的能力越来越强&#xf…

神经网络 —— 模拟人脑的计算方式

神经网络能够反映人类大脑的行为&#xff0c;允许计算机程序识别模式&#xff0c;以及解决人工智能、机器学习和深度学习领域的常见问题。 人类发明的灵感来源有很多都是来自大自然&#xff0c;神经网络同样如此。人工神经网络是一种类似于人类神经网络的信息处理技术。但事实上…

Grafana监控数据可视化

Grafana 是一个可视化面板&#xff0c;有着非常漂亮的图表和布局展示&#xff0c;功能齐全的度量仪表盘和图形编辑器&#xff0c;支持 Graphite、zabbix、InfluxDB、Prometheus、OpenTSDB、Elasticsearch 等作为数据源&#xff0c;比 Prometheus 自带的图表展示功能强大太多&am…