志达IT网站web前端助手
FeHelper插件对于web前端需要处理的网页html源码压缩，css或javascript的压缩都能处理的很好。如果前端web开发人员需要和后台代码工程师配合，那么使用json数据传输的时候，使用这款FeHelper插件能够帮助web前端工程师更加快速地对json进行解码。
当web前端程序与后台进行数据交互的时候使用URL编码肯定是必不可少的了，但是我们往往需要预先知道这款字符编码以后的情况，以为与后台开发人员一同提前作出相应处理或对字符发送期间产生的问题进行排查。如果有特殊的情况，FeHelper插件甚至还可以帮助用户把普通的字符直接编码成时下最流行的二维码图片与移动设备交互。
网页前端开发工具
结合自己之前学习小程序开发和Vue3结构的阅历，整理了前端开发中常用的10个东西软件，希望能帮到有需求的朋友！
如果这篇文章对你有协助，别忘了点赞或是关注我哦~
01代码修改器
选用哪个修改器来写代码，与IT界由来已久的一个论题「XX语言是最好的语言」有点像，每个人都有自己的主意。东西本身本身并不是最重要的，能否写出简洁、高雅的代码，主要是取决于自己的个人阅历和查找能力，逻辑思路没梳理清楚，代码修改器雕出花来也没用哇。
WebStorm
WebStorm，最智能的JavaScriptIDE东西，是一个用于JavaScript和相关技能的集成开发环境。与JetBrains推出的其他IDE相同，它使你的开发体验愈加愉快，使日常工作主动化，并协助你轻松处理复杂的使命。
WebStorm是一个收费的软件，供给30天免费试用~
VSCode
VSCode，微软推出的开源代码修改器，支撑Windows、macOS和Linux系统。单凭免费+轻量+大厂布景（光环）这些点，想必就吸引了不少人。
VSCode尽管不像WebStorm定位为IDE东西，但它能够内置的扩展功用、能够装置不同的插件，也让VSCode在确保灵活性的同时，也能变得足够强大——软件本身没有的功用，能够用插件来弥补。
除了这儿介绍的两个东西，其他可选的代码修改器有SublimeText、Atom、Vim、CodePen（在线代码修改东西）等，这儿就不展开介绍了。
02前端结构
Vue
Vue，一个渐进式的JS结构，易学易用，性能超卓，适用场景丰厚的Web前端结构。
这也是我正在学习的前端结构（还没学到写项目的阶段），学到现在脑子记住最多的东西是：组件化开发、响应式、页面数据相别离，对于没学过结构的人来说，要学和要记的东西仍是挺多的，不接连学习、不写项目的话，前面学过的东西就逐步忘记了。。。
关于Vue3的学习，能够检查我之前发布的一篇文章：
彭宏豪：前端结构Vue3学习笔记-coderwhy教师13赞同·10谈论文章
React
React，由Facebook团队开源的前端结构，据说是进大厂必学的前端结构，自己没触摸过，没啥好说的。
03规划东西
在线规划东西Pixso
Pixso，一款一站式的在线规划东西，可用于完结UI、原型、交互、标示、切图和交付等工作，这儿与前端开发联系比较亲近的环节有标示和切图。
Pixso官网-新一代UI规划东西，替代Sketch，Figma，支撑在线实时协作pixso.cn/?source=zhihu_peng
曾经在专门的标示切图东西出来之前，UI规划师做好的图片，在进入开发之前，会阅历手动标示和切图的流程，尤其是标示，UI规划师或者前端工程师在规划稿中标示页面元素的巨细、方位等款式，费时又费力。
而现在有了专业的标示切图东西Pixso，就能够告别原先繁琐的操作流程啦！
在Pixso挑选规划文件中的恣意元素，元素下方会显示当时元素的巨细。
将Pixso右侧的面板切换到「标示」选项卡，或是按住Alt键（苹果用户按住Option键），就会显示当时元素距离画板4个方向的相对方位。通过Pixso的这两个功用，就能够很方便地检查页面元素的标示信息。
而如果有切图的需求，能够点击顶部东西栏的加号+，在弹出的面板，挑选「切片」东西。
在想导出切图的区域上方制作切片，制作后能够随意调整切片的巨细和方位。
调整好切片巨细和方位后，点击选中左侧面板的「切片」图层，再点击右侧「导出」选项的加号+，配置导出参数，默认会导出PNG格局的1倍图，点击下方的「导出已选项」，就能将切图导出并下载到本地。
一站式在线规划东西Pixso许诺对个人用户永久免费，内置的一切功用都能够免费运用，而且能够享受到Pixso会员的许多权益：无限文件数量、无协作者人数约束、无限云存储空间等等，有需求的朋友能够前往Pixso官网获取。
Pixso官网-新一代UI规划东西，替代Sketch，Figma，支撑在线实时协作pixso.cn/?source=zhihu_peng
uigradients
uigradients，一个供给多种突变配色计划的在线东西，在编写CSS时如果需求用到突变就很有协助。
挑选一种自己喜爱的突变计划，点击右上角的<>图标，就能直接拿到突变色对应的CSS代码，复制后粘贴到代码修改器，就能直接看到作用。
04CSS动画
Animate.css
Animate.css，一个跨平台的CSS动画库，供给了多种现成的CSS动画，可用在强调、主页、滑动、注意力引导的场景。
这个动画库运用起来也十分简略，包括3步：
运用npm装置库
导入动画库
运用动画库定义好的类名class
05前端构建东西
提到前端构建东西，不得不提许多前端工程师都逃不过的Webpack，尽管我没有系统学习过Webpack，但因为Vue脚手架仍是根据Webpack来打包代码或各种文件，因而也触摸了一点Webpack的知识。
咱们先来看一下Webpack中文文档对Webpack的介绍：
Webpack，是一个用于现代JavaScript应用程序的静态模块打包东西。当Webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展现你的内容。
如果是第一触摸Webpack的朋友，看完这段介绍应该仍是一脸懵逼，不知道Webpack到底能用来干什么。
跟着前端变得越来越复杂，咱们在运用结构编写项目时，可能会有下面这些行为：
引入各式各样的模块来完成模块化开发
运用一些高档特性来加速开发效率或提高安全性，例如运用Sass、Less等方法来编写CSS款式代码
开发完结后需求对代码进行紧缩、合并等，优化页面的翻开速度
以其间的Sass款式文件为例，浏览器默认情况下只能渲染CSS文件，而不认识这儿的Sass文件，要想将Sass文件转换为浏览器可读取的CSS文件，就需求用到Webpack，完成Sass到CSS的主动转换。
除了Sass文件，Webpack还能够将ES6语法的JS代码转换为ES5，将TypeScript代码转换为JavaScript，也能够对图片、字体等进行打包优化，削减文件占用的空间，能够这么说，有了Webpack，原先咱们要处理的一系列问题，都能够让它主动帮咱们完结。
06浏览器插件
easyautorefresh
easyautorefresh，一个主动改写浏览器页面的插件，比较合适刚触摸前端的新人。
在未运用前端结构或Webpack打包项目的情况下，每逢咱们想预览代码在浏览器中的运转作用，都需求手动改写页面，操作起来比较繁琐。
对于这个问题，能够运用这儿介绍的浏览器插件，提早设置一个改写的频率，就能完成页面的主动改写。
FeHelper(前端助手)
FeHelper，一个能够格局化json数据的浏览器插件。
在浏览器中检查服务器回来的json数据时，因为它们被紧缩过，去除了数据华夏有的换行，会呈现为「乱成一团」的状况，不便于检查咱们想要的数据。
而FeHelper插件，就能够让被紧缩后的json数据还原为紧缩前的状况，即对数据进行格局化，美化紧缩后的数据文件，让咱们能够更方便地检查服务器回来的数据。
