《吐血整理》系列 大廠前端必備工具集合（抓包、調試、Mock數據等等）

時間  2020-04-05
標籤 吐血整理 系列 大廠 前端 必備 工具 集合 抓包 調試 mock 數據 等等 欄目 快樂工作 简体版
原文   原文鏈接

前言

Coding 應當是一輩子的事業，而不只僅是 30 歲的青春飯
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新html

最近很多人私信怪怪，問我工做中都用到哪些工具，今天就分享給你們~~前端

做爲一名 nice 的大前端開發，用好一些不錯的工具，能給工做帶來事半功倍的效果哦~node

這期純乾貨，都是精心挑選的工具~git

通用小工具系列

Homebrew

HomeBrew是Mac下面的一個包管理器，方便咱們安裝一些Mac OS沒有的UNIX工具、軟件github

一鍵安裝應用十分方便，好比命令行直接安裝QQ：web

iterm2

Iterm2 用來代替系統自帶的Terminal，提升工做效率~chrome

uTools

提升工做效率的又一大神器，跨平臺，插件很是多，像查個JavaScript，免費圖牀啊，都有，強推！！數據庫

這個工具基本上能解決掉，你平常工做可以用到的全部的零碎小功能~npm

本文最強推薦的一個工具就是這個，沒裝的小夥伴必定要去試試，真的超讚！！！json

Snip

騰訊的一個輕量級的截屏軟件，瀏覽器滾屏截圖也支持哦~，用起來還行~

CleanMyMac X

清理 Mac，協做軟件的不二之選，十分強大！！

1 Password

這個密碼管理的工具是被作安全朋友強推滴，很好用，強推！

強推， 不再用擔憂密碼想不起來了，不再用擔憂密碼泄露了~

關於安全問題，你們能夠放心，已經諮詢過專業的安全朋友，沒毛病~~

xclient

裏面匯聚了不少mac軟件，而且都提供破解的方式，小夥伴們能夠自取所需~

筆記系列

Notion

做爲一名前端，這種顏值高的筆記本是必定要擁有滴啦~~

將筆記、知識庫和任務管理無縫整合的協做平臺，顏值超高超好用。

固然，印象筆記也不錯哦，不過 Notion 功能更加豐富與強大~

Typora

Typora是一款寫Markdown的工具，好用到不行，配合下面的ipic圖牀，直接爽翻天~

怪怪全部的文章都是在這個上面寫滴~

Ipic

上面的 Typora 美中不足的就是圖片是本地的地址，發到網上就會失效。

使用 Ipic 的免費圖牀，就能夠解決啦~

Ipic 的免費圖牀是新浪滴，若是失效的話，能夠自行配置X裏雲 OSS，很便宜~

Markdown 格式美化

一個npm包，經過命令將 Markdown文件中，中英文進行隔開，基於 AST 開發，且方便集成 ci

就頗有規範，頗有格局，很好看了~

有興趣的小夥伴還能夠去研究一下源碼~

抓包系列

Charles

抓包必備神器，實際上就是個代理服務器

跟後端聯調，有問題，先抓包看看準沒錯~

Mock 接口數據也能夠用這個工具，map local 到本地本身寫的 json 文件便可

wireshark

官網地址：www.wireshark.org/

也是用來抓包滴，不過抓的是網絡層的~

偶爾作一些網絡層優化的時候，這個工具就能夠派上用場啦哈~

UI 系列

ProcessOn

怪怪全部文章裏面畫圖，都是用這個神器，各類原型圖，思惟導圖，網絡拓撲圖都支持！！

平常開發，先畫個圖理一下思路，仍是頗有必要滴~

下面是怪怪以前寫 Node.js 秒殺系統畫的圖~

Sketch

通常企業產品級的東西都是用 sketch 設計啦~~

這個工具，作出來的ppt，那也是一絕，不再用爲ppt煩惱了~~

Zeplin

一些平常的H5活動，用這個工具，或者下面要說的 Adobe Photoshop CC 2019

Adobe Photoshop CC 2019

Ps嘛你們都知道的，沒事幫妹子P下圖，搞很差能找個女友啥滴~~

開發系列

Devdocs

開發技術文檔，直接在線快速搜索哦，十分方便~

各類技術文檔都很齊全

CodeLF

GItHub的一個爬蟲工具，估計很多小夥伴開發時都會苦惱給方法取名字，這個網站直接給你一步到位，多種選擇。

不再怕寫代碼的時候取方法名啦~

SwitchHosts

官方地址：github.com/oldj/Switch…

前端開發中，老是要不斷切換各類環境（線下，預發，線上），那這個小工具就是爲你量身定作滴~~

SwitchHosts 其實也不是很完美，真正企業裏面，我以爲應該有一套統一的host切換工具，什麼線下環境啊，預發環境啊，都統一在遠端進行配置。（怪怪正在開發中，後面會開源出來）

極簡二維碼

  • 地址：chrome 擴展商店中搜索【極簡二維碼】，添加到 chrome 插件

開發H5頁面的時候，老是須要在移動端訪問在pc端開發的頁面，這個小工具直接生成當前網頁的二維碼，掃一掃就很快樂~~

好比，下面的蘑菇街主頁。

Visual Studio Code

Visual Studio Code是一個輕量且強大的跨平臺開源代碼編輯器（IDE），支持Windows，OS X和Linux。內置JavaScript、TypeScript和Node.js支持，並且擁有豐富的插件生態系統，可經過安裝插件來支持C++、C#、Python、PHP等其餘語言。

佔據了前端大部分的市場~ 寫代碼的不二之選~~

WebStorm

雖然 Visual Studio Code 很強大，但怪怪仍是喜歡用 WebStorm，Ws 會有點耗內存，若是是windows用戶，就直接選擇 Vs 了。

下面的項目是最近會發的文章源碼哦~~

n

切換 node 版本的一個 npm 包，輕量好用，你要想用nvm也行，這個沒啥大影響哈~

聽朋友說，螞蟻金服內部有本身的一套切換的工具，不用nvm，也不用n

Lighthouse

自動化頁面性能分析工具，會給你分析出當前頁面哪些是須要優化的地方，而且提供優化方案~ 很實用

咱們來給 apple 官網跑個分，好像好不錯！~

移動端調試

官網地址：developers.google.com/web/tools/c…

網上也有不少各類移動端調試的工具，不過怪怪仍是想推薦一下這種方式哦，方便，及時響應~

FeHelper

官方地址：github.com/zxlie/FeHel…

一款 chrome 插件，集合了一些平常會用的功能集合，很棒~

什麼正則啊，時間戳轉換啊，這一系列開發時會用到的，幾乎都有~~

Intellij IDEA

前端偶爾遇到須要本身寫寫 Java 的狀況，那就用這個工具準沒錯，巨強大~

Navicat Premium

在用 Node.js 作一些小項目須要用到數據庫的時候，這個數據庫的可視化工具，用起來就是真滴很香~~

Postman

接口調試神器，後端大佬們接口還沒寫好的時候，這個工具用來給前端小夥伴mock一下api，仍是蠻不錯的哦~

不過不少公司都有自研的數據mock平臺啦~

總結

本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新💧

上面分享的這些工具，都是怪怪工做中常常用而且以爲還不錯的工具。

分享給你們，但願能給你們帶來一些工做效率上的提高~~

近期在寫 Node.js 的系列，傳送門：

有平常開發中有漏掉的必備工具，求留言，讓更多的小夥伴知道~~

熬夜整理不易，若是幫助到你啦，麻煩點個贊，加個關注哦，感恩💕😊

聯繫我 / 公衆號

微信搜索【接水怪】或掃描下面二維碼回覆」加羣「，我會拉你進技術交流羣。講真的，在這個羣，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙做者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。

接水怪也會按期原創，按期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一塊兒跑個步🏃 ↓↓↓

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程