前端开发常用工具

https://www.cnblogs.com/zhengshize/p/6836885.html#mylink2

 

目录：

查看目录

1. Sublime text3编辑器
2. Beyond Compare 比较代码工具
3. Photoshop CC 
4. EditPlus 编辑器
5. PxCook 像素大厨
6. 分区助手
7. png图片转ico图标软件：AveIcon
8. 强力删除Adobe软件：AdobeCreativeCloudCleanerTool
9. 识别文字工具
10. 录制gif动图 GifCam
11. 屏幕取色器 ColorPix
    
12. 本地服务器 phpStudy
    
13. vsCode编辑器
14. 火狐开发者版浏览器
15. 喵影工厂免费录屏软件
16. 网易有道词典
17. 2345看图王

1、sublime text3 编辑器

　　快捷键 + zen coding 能让你如鱼得水。当然，下面这张截图我是用了 Material Theme + Monokai 的主题，还有很多效果没展示出来，等你们自己去探索。

　　sublime text3 下载地址：http://www.downza.cn/soft/28235.html

　　软件截图：

2、Beyond Compare 比较代码工具

　　beyond也是个好软件，各种比较功能，屡试不爽。最下面的软件截图我就只展示最简单的文本比较，新加入的显示为蓝色，更改的为红色，一目了然。

　　下载地址：http://www.scootersoftware.com/download.php

　　(1) 文件夹比较 + 文件夹合并 + 文件夹同步 + 文本比较 + 文本合并

　   

　　(2) 表格比较 + 16进制比较 + MP3比较 + 图片比较 + 注册表比较 + 版本比较

　　

　　软件截图：

3、Photoshop CC 

　　作为切图、P图的首选工具，目前你还有比它更好的选择吗？就算有，用习惯的东西可不是一朝一夕就能改变滴！

　　Photoshop CC 网上下载地址：http://www.xdowns.com/soft/31/93/2013/Soft_107049.html

　　

4、EditPlus 编辑器

　　把EditPlus当记事本用，当然还可以用其它的，例如nodepad++,VIM等，用的习惯才是最好的

　　EditPlus 百度云盘下载地址：链接：http://pan.baidu.com/s/1jHGZZhW 密码：pnb7

　　

5、PxCook 像素大厨

　　当你不知道白色背景图要设置宽高为多少好时，PxCook是个不错的选择，在你切图前徘徊于图片量尺寸的时候，PxCook可以很好的帮助你。

　　PxCook 下载地址：http://www.fancynode.com.cn/pxcook

　　

6、分区助手

 　　什么？你的C盘又满了？？来吧！试试分区助手，不用998，也不用198，更不用98，今天我们就差倒贴钱给你介绍 分区助 手了。

　　小小的软件，大大的作用。把其它盘的内存转为C盘的内存，从此以后下载各种小电影直接放桌面。

　　分区助手 下载地址：http://www.downza.cn/soft/10803.html

　　

7、png图片转ico图标软件：AveIcon

　　有没有发现，想把png图片转成ico，用PS是转不了的，嗯...好像要装什么插件才可以，一看就懵懂，如果有一个软件，不用安装、不占太多内存、使用方便、还要是中文的那就好了。我还真找到了：

　　软件链接：https://pan.baidu.com/s/1iyhKpzDTQt5HdB_2k-y3_g 密码：lwtp

　　效果是这样的：

　　

　　把png拖入右边的框框，右下角就会显示转换中...

　　

　　转换完成后，直接把左边的ico图标拖出，想放哪里就拖到哪里

　　嗯嗯，这样就完成了，拖进拖出就OK了，虽然很少用，不过存起来等需要用到的时候拖一下就好了。

2018-03-30-更新：

8、强力删除Adobe软件工具：AdobeCreativeCloudCleanerTool

　　下载地址：https://pan.baidu.com/s/1brw5RwpPqB9j9nl9ccgrRg 密码：f0ry

       今晚在清理电脑软件的时候，Adobe InDesign CS6软件一直卸载不了，因为试用期过了，而且也没用了，所以想卸载掉，最后用了这个终于能卸载了，记录下。

　　

　　按照它的步骤来，不用安装，先选语言，当然是e了，可惜木有中文，不过不用全看懂，看懂关键词就好(提示：看不懂的选带all的选项，哈哈哈)。

2018-05-08-更新：

9. 识别文字工具

    链接：https://pan.baidu.com/s/1f-_wvjZJvo1pIlNLKkLMaA   提取码：gev6 

    有时候页面重构的时候，设计师发来一个psd图，然后好几百M，单打开PS都有点卡了，再加各种其它软件电脑哪里受得了。就算电脑受得了，自己也受不了等待，那就用jpg图来重构，图标什么的叫设计师切好。然鹅，问题出现了，设计稿上的文字我木有啊，难道每个字都自己打出来？好久没单身了，手速不行了。难道叫设计师整理过来？他不拿着冒蓝光的黄金加特林过来就不错了，还想整理，用不用工资也帮你拿了，哈哈，显然效率太低了，怎么办呢？

    用这个文字识别工具：

10. 录制gif动图 GifCam

    链接：https://pan.baidu.com/s/1TEXkyOH5UxuIIldJdcelGw 密码：cd3o

    不用安装，直接打开

    

    打开的时候界面是这样的：

    

    然后一般会把鼠标也录入进来：录制(右边箭头)-录制鼠标(打钩)

    

    最后点击 录制 就可以录gif图了，录好了就点 保存 就好了，如下图效果，你要跟别人讲这里有2个人，就可以用鼠标指出来。

    

 2018-09-21-更新：

 11. 屏幕取色器 ColorPix

      下载地址： https://colorpix.en.softonic.com/

       这个也是免安装绿色版，直接打开就可以到处吸

       有时候在自己电脑上看到一些logo的颜色还不错，但是不好取到它的色值，虽然也可以取到，就是比较麻烦：

　　（1）把屏幕印下来存成图片，再在PS上用吸管工具吸颜色。

　　（2）如果是在网页上的颜色，可以用审查元素，然后在样式那里找到对应的色值

       （3）审查元素找到styles, 在element.style里面写color:#000;就会有个黑色的色块，点击它，再点像吸管工具的图标，就可以在网页上取任何色值

　　但是现在用这个就可以直接吸了，方便了许多。注意的是，想固定颜色要按一下空格键，色值就固定了。

 　　

12. 本地服务器 phpStudy

　　下载地址：http://phpstudy.php.cn/

　　phpStudy是个好软件，在你的项目build好后，可以在本地自己先测一下看看有没有什么问题。例如用vue开发的项目，build后直接把dist文件夹里面的文件拷到phpStudy的WWW文件夹下，打开本地地址就可以测试了。

　　

 　　想要把代码放到自己喜欢的地方也可以，在“其他选项菜单”->“站点域名管理”里面新增一个站点。

　　我在C盘的web文件夹这里，新增了一个站点，端口号设为88，所以以后可以把vue编译后的dist文件放到这里，打开本地的88端口就可以测试了：

　　http://localhost:88/#/

　　

 

 2018-12-10-更新：

 13. Visual Studio Code

    下载地址： https://code.visualstudio.com/download

    Visual Studio Code是一个轻量级但功能强大的源代码编辑器，可以在桌面上运行，适用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node的支持。它拥有丰富的生态系统，可以扩展到其他语言(如c++、c#、Java、Python、PHP、Go)和运行时(如. net和Unity)。

    

    点击左侧的“搜索”按钮，即可全局搜索，可实现快速查找某些代码的所有位置

    

    点击左边的“拓展”按钮可以安装相应的插件，提高开发效率

    

    "ctrl+shift+Y"打开控制台，切换到终端，即可运行npm命令

    

 14. 火狐开发者版浏览器

    下载地址：https://www.mozilla.org/zh-CN/firefox/developer/

     

    点击右上角菜单图标，找到里面的“Add-ons”选项，来打开拓展，下载浏览器插件

    

    例如我安装的插件如下：

    1). AdBlock 是去网页广告插件

    2). Country Flags & IP Whois 是显示IP地址和所在国家的国旗

    3). Url to QrCode 是显示网页的二维码

    4). Vue.js devtools 是可以看vue组件的状态和属组等

    5). Bing网页翻译 当然就是翻译网页啦

    

    然后就是一些用了就知道的强大功能：

    

 2019-11-08-更新：

 15. 喵影工厂免费录屏软件

     下载地址：https://www.shencut.com/

    有没有遇到过对限时查看的教学视频而无能为力？有没遇到过不能下载的大片而无可奈何 ？现在，我们不一样了。

    喵影工厂集“基础剪辑”、“音频剪辑”、“高阶剪辑”等等等强大功能于一身，但我都不用，哈哈哈。主要用一下它的录屏功能（喵影：说出来你可能不信，我的副业就能干倒一片友商）。

    Logo长这样子：

    界面长这样子：

 

 有三种模式，常用就“屏幕录制”。

 

 点击“屏幕录制”之后，会出现一个小窗口，大红点下面是可以切换屏幕，因为我用双屏。最左边可以自定义录制屏幕的范围，默认是全屏。

 

这里最重要的是： 点击右下角设置按钮，选质量最好的，看起来就跟原来的视频很接近了。

录完的视频可以剪辑，然后自己看着来，so easy。

 

 16. 网易有道词典

     下载地址：http://cidian.youdao.com/

    界面是这样子：

    翻译软件其实有很多个，但选择网易有道词典是因为有2个功能挺好用的，那就是：屏幕取词和划词翻译

    

 

屏幕取词：是你鼠标停留在某个单词，或者某个句子上面，就会有个红色按钮，鼠标放上去就可以看到翻译内容。

 

 

 划词翻译：是鼠标选中的英文，或者双击选中某个单词，就会有个红色按钮，鼠标放上去就可以看到翻译内容。

 17. 2345看图王

 下载地址：http://pic.2345.cc/

 为了避嫌，不让别人以为名字是随意起的1234，那就叫2345吧，哈哈哈。

    界面是这样子：（好像不能再简洁了吧！）

 功能的强大用过就知道了，这里主要用它3个功能。

 （1）图片预览功能。图片再也不用打开才知道是哪张了。

    

 

 （2）修改尺寸功能。方便快捷，用PS还更麻烦。

    

 

 可以锁定比例，另存为其它格式。

    

 

（3）裁剪功能。

    

 

 哪里需要裁哪里