前端開發常用工具

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）裁剪功能。

    

 

 哪里需要裁哪里