大廠前端開發(fā)，必備工具集合
本文公眾號(hào)來源：接水怪 作者：接水怪 本文已收錄至我的GitHub
作為一名 nice 的大前端開發(fā)，用好一些不錯(cuò)的工具，能給工作帶來事半功倍的效果哦~
通用小工具系列
Homebrew
官網(wǎng)地址：https://brew.sh/
HomeBrew 是 Mac 下面的一個(gè)包管理器，方便我們安裝一些 Mac OS 沒有的 UNIX 工具、軟件
一鍵安裝應(yīng)用十分方便，比如命令行直接安裝 QQ：
iterm2
官網(wǎng)地址：https://www.iterm2.com/
Iterm2 用來代替系統(tǒng)自帶的 Terminal，提高工作效率~
?uTools
官網(wǎng)地址：https://u.tools/
提高工作效率的又一大神器，跨平臺(tái)，插件非常多，像查個(gè) JavaScript，免費(fèi)圖床啊，都有，強(qiáng)推！！
這個(gè)工具基本上能解決掉，你日常工作能夠用到的所有的零碎小功能~
本文最強(qiáng)推薦的一個(gè)工具就是這個(gè)，沒裝的小伙伴一定要去試試，真的超贊！！！
Snip
官網(wǎng)地址：https://snip.qq.com/
騰訊的一個(gè)輕量級(jí)的截屏軟件，瀏覽器滾屏截圖也支持哦~，用起來還行~
CleanMyMac X
官網(wǎng)地址：https://macpaw.com/cleanmymac
清理 Mac，協(xié)作軟件的不二之選，十分強(qiáng)大！！
1 Password
官網(wǎng)地址：https://1password.com/zh-cn/
這個(gè)密碼管理的工具是被做安全朋友強(qiáng)推滴，很好用，強(qiáng)推！
強(qiáng)推， 再也不用擔(dān)心密碼想不起來了，再也不用擔(dān)心密碼泄露了~
關(guān)于安全問題，大家可以放心，已經(jīng)咨詢過專業(yè)的安全朋友，沒毛病~~
xclient
官方地址：https://xclient.info/
里面匯聚了很多 mac 軟件，并且都提供破解的方式，小伙伴們可以自取所需~
筆記系列
Notion
官網(wǎng)地址：https://www.notion.so/desktop
作為一名前端，這種顏值高的筆記本是一定要擁有滴啦~~
將筆記、知識(shí)庫(kù)和任務(wù)管理無縫整合的協(xié)作平臺(tái)，顏值超高超好用。
當(dāng)然，印象筆記也不錯(cuò)哦，不過 Notion 功能更加豐富與強(qiáng)大~
Typora
官網(wǎng)地址：https://www.typora.io
Typora 是一款寫 Markdown 的工具，好用到不行，配合下面的 ipic 圖床，直接爽翻天~
怪怪所有的文章都是在這個(gè)上面寫滴~
Ipic
官網(wǎng)地址 ：https://ipic.ca
上面的 Typora 美中不足的就是圖片是本地的地址，發(fā)到網(wǎng)上就會(huì)失效。
使用 Ipic 的免費(fèi)圖床，就可以解決啦~
Ipic 的免費(fèi)圖床是新浪滴，如果失效的話，可以自行配置 X 里云 OSS，很便宜~
Markdown 格式美化
官網(wǎng)地址：https://www.npmjs.com/package/lint-md-cli
一個(gè) npm 包，通過命令將 Markdown 文件中，中英文進(jìn)行隔開，基于 AST 開發(fā)，且方便集成 ci
就很有規(guī)范，很有格局，很好看了~
有興趣的小伙伴還可以去研究一下源碼~
抓包系列
Charles
官網(wǎng)地址：https://www.charlesproxy.com/
抓包必備神器，實(shí)際上就是個(gè)代理服務(wù)器
跟后端聯(lián)調(diào)，有問題，先抓包看看準(zhǔn)沒錯(cuò)~
Mock 接口數(shù)據(jù)也可以用這個(gè)工具，map local 到本地自己寫的 json 文件即可
wireshark
官網(wǎng)地址：https://www.wireshark.org/
也是用來抓包滴，不過抓的是網(wǎng)絡(luò)層的~
偶爾做一些網(wǎng)絡(luò)層優(yōu)化的時(shí)候，這個(gè)工具就可以派上用場(chǎng)啦哈?~
UI 系列
ProcessOn
官網(wǎng)地址：https://www.processon.com/
怪怪所有文章里面畫圖，都是用這個(gè)神器，各種原型圖，思維導(dǎo)圖，網(wǎng)絡(luò)拓?fù)鋱D都支持！！
日常開發(fā)，先畫個(gè)圖理一下思路，還是很有必要滴~
下面是怪怪之前寫 Node.js 秒殺系統(tǒng)畫的圖~
Sketch
官網(wǎng)地址：https://www.sketch.com/get/
一般企業(yè)產(chǎn)品級(jí)的東西都是用 sketch 設(shè)計(jì)啦~~
這個(gè)工具，做出來的 ppt，那也是一絕，再也不用為 ppt 煩惱了~~
Zeplin
官網(wǎng)地址：https://zeplin.io/
一些日常的 H5 活動(dòng)，用這個(gè)工具，或者下面要說的 Adobe Photoshop CC 2019
Adobe Photoshop CC 2019
官網(wǎng)地址 ：https://www.adobe.com/cn/products/photoshop
Ps 嘛大家都知道的，沒事幫妹子 P 下圖，搞不好能找個(gè)女朋友啥滴~~
開發(fā)系列
Devdocs
官網(wǎng)地址：https://devdocs.io
開發(fā)技術(shù)文檔，直接在線快速搜索哦，十分方便~
各種技術(shù)文檔都很齊全
CodeLF
官網(wǎng)地址 ：https://unbug.github.io/codelf
GItHub 的一個(gè)爬蟲工具，估計(jì)不少小伙伴開發(fā)時(shí)都會(huì)苦惱給方法取名字，這個(gè)網(wǎng)站直接給你一步到位，多種選擇。
再也不怕寫代碼的時(shí)候取方法名啦~
SwitchHosts
官方地址：https://github.com/oldj/SwitchHosts
前端開發(fā)中，總是要不斷切換各種環(huán)境（線下，預(yù)發(fā)，線上），那這個(gè)小工具就是為你量身定做滴~~
SwitchHosts 其實(shí)也不是很完美，真正企業(yè)里面，我覺得應(yīng)該有一套統(tǒng)一的 host 切換工具，什么線下環(huán)境啊，預(yù)發(fā)環(huán)境啊，都統(tǒng)一在遠(yuǎn)端進(jìn)行配置。（怪怪正在開發(fā)中，后面會(huì)開源出來）
極簡(jiǎn)二維碼
地址：chrome 擴(kuò)展商店中搜索【極簡(jiǎn)二維碼】，添加到 chrome 插件
開發(fā) H5 頁面的時(shí)候，總是需要在移動(dòng)端訪問在 pc 端開發(fā)的頁面，這個(gè)小工具直接生成當(dāng)前網(wǎng)頁的二維碼，掃一掃就很快樂~~
比如，下面的蘑菇街主頁。
Visual Studio Code
官網(wǎng)地址：https://code.visualstudio.com
Visual Studio Code 是一個(gè)輕量且強(qiáng)大的跨平臺(tái)開源代碼編輯器（IDE），支持 Windows，OS X 和 Linux。內(nèi)置 JavaScript、TypeScript 和 Node.js 支持，而且擁有豐富的插件生態(tài)系統(tǒng)，可通過安裝插件來支持 C++、C#、Python、PHP 等其他語言。
占據(jù)了前端大部分的市場(chǎng)~ ?寫代碼的不二之選~~
WebStorm
官網(wǎng)地址：https://www.jetbrains.com/webstorm/
雖然 Visual Studio Code 很強(qiáng)大，但怪怪還是喜歡用 WebStorm，Ws 會(huì)有點(diǎn)耗內(nèi)存，如果是 windows 用戶，就直接選擇 Vs 了。
下面的項(xiàng)目是最近會(huì)發(fā)的文章源碼哦~~
n
官網(wǎng)地址：https://www.npmjs.com/package/n
切換 node 版本的一個(gè) npm 包，輕量好用，你要想用 nvm 也行，這個(gè)沒啥大影響哈~
聽朋友說，螞蟻金服內(nèi)部有自己的一套切換的工具，不用 nvm，也不用 n
Lighthouse
官網(wǎng)地址：https://developers.google.com/web/tools/lighthouse?hl=zh-cn
自動(dòng)化頁面性能分析工具，會(huì)給你分析出當(dāng)前頁面哪些是需要優(yōu)化的地方，并且提供優(yōu)化方案~ 很實(shí)用
我們來給 apple 官網(wǎng)跑個(gè)分，好像好不錯(cuò)！~
移動(dòng)端調(diào)試
官網(wǎng)地址：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
網(wǎng)上也有很多各種移動(dòng)端調(diào)試的工具，不過怪怪還是想推薦一下這種方式哦，方便，及時(shí)響應(yīng)~
FeHelper
官方地址：https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx
一款 chrome 插件，集合了一些日常會(huì)用的功能集合，很棒~
什么正則啊，時(shí)間戳轉(zhuǎn)換啊，這一系列開發(fā)時(shí)會(huì)用到的，幾乎都有~~
Intellij IDEA
官網(wǎng)地址 ：http://www.jetbrains.com/idea
前端偶爾遇到需要自己寫寫 Java 的情況，那就用這個(gè)工具準(zhǔn)沒錯(cuò)，巨強(qiáng)大~
Navicat Premium
官網(wǎng)地址 ：https://www.navicat.com.cn
在用 Node.js 做一些小項(xiàng)目需要用到數(shù)據(jù)庫(kù)的時(shí)候，這個(gè)數(shù)據(jù)庫(kù)的可視化工具，用起來就是真滴很香~~
Postman
官網(wǎng)地址 ：https://www.getpostman.com
接口調(diào)試神器，后端大佬們接口還沒寫好的時(shí)候，這個(gè)工具用來給前端小伙伴 mock 一下 api，還是蠻不錯(cuò)的哦~
不過很多公司都有自研的數(shù)據(jù) mock 平臺(tái)啦~
總結(jié)
熬夜整理，分享給大家，希望能給大家?guī)硪恍┕ぷ餍噬系奶嵘齸~
如果幫助到你，麻煩加關(guān)注，點(diǎn)再看哦，感恩??
各類知識(shí)點(diǎn)總結(jié)
下面的文章都有對(duì)應(yīng)的原創(chuàng)精美PDF，在持續(xù)更新中，可以來找我催更~
掃碼或者微信搜Java3y?免費(fèi)領(lǐng)取原創(chuàng)思維導(dǎo)圖、精美PDF。在公眾號(hào)回復(fù)「888」領(lǐng)取，PDF內(nèi)容純手打有任何不懂歡迎來問我。
原創(chuàng)電子書
原創(chuàng)思維導(dǎo)圖
 |
|
