前言
用好軟件，讓工作變得更美好。
正文
一、調(diào)試工具（斷點(diǎn)調(diào)試）
vscode、google瀏覽器
說出來不怕大家笑，做前端3年了，平時使用的調(diào)試方式都是console.log，和debugger。其中使用console.log的頻率很高，其實這樣的習(xí)慣不好，console.log只能看到結(jié)果，看不到代碼運(yùn)行過程。
這兩種方式的壞處是效率不高，因為看不到循環(huán)的過程，浪費(fèi)多些時間，而且很容易代碼遺留跟著到測試和生成環(huán)境，造成一些不良影響。
最好的是方式是在谷歌瀏覽器--開發(fā)者工具--source的斷點(diǎn)調(diào)試或者使用vscode自帶的調(diào)試工具，節(jié)省時間。
1、在瀏覽器--開發(fā)者工具--source的斷點(diǎn)調(diào)試。按下ctrl + p（打開指定名字的文件），這個方式對于經(jīng)過webpack打包過的和沒有經(jīng)過wepack打包的項目都是適用的。例如在大型的vue項目，需要調(diào)試xxx.vue文件中的代碼中的77行代碼，這時輸入xxx.vue就能打開該文件，然后ctrl + G ，輸入77快速跳到77行代碼，這時就可以打斷點(diǎn)，刷新頁面就是調(diào)試了，簡單快速。
2、vscode--文件--將文件夾添加到工作區(qū)（可以同時添加多個工作區(qū)，以前我不知道，每搞一個項目就開一個vscode，其實沒有必要，只需開一個就行。）。vscode這個編輯器也是支持ctrl + p 和ctrl + G和瀏覽器一樣的快捷鍵。這也難怪有人說vscode本質(zhì)是一個瀏覽器。
最后點(diǎn)擊開始調(diào)試按鈕就可以了，還算簡單的啦。對了，圖2中的調(diào)試vue項目方式還需安裝一個vscode插件，debugger for chrome。每次只需改變調(diào)試配置屬性的值(vue項目是url)或者(小demo是program)就可以了。
其實思考過為啥以前老是用console.log。因為不知道ctrl+P、ctrl+G可以定位編譯前的文件的某一行，另外，斷點(diǎn)調(diào)試需要點(diǎn)擊很多次，感覺浪費(fèi)時間，其實不然，只需要熟悉斷點(diǎn)調(diào)試按鈕的用途，盡量多用下圖黃框的按鈕，就可以規(guī)避進(jìn)入太多底層的函數(shù)，而造成的過多點(diǎn)擊。
用斷點(diǎn)調(diào)試吧，效率高。我說是就是。
二、代理工具
代理工具有：whistle，postman的mockServer，fiddler；
下面介紹whistle：
安裝，啟動，使用如github的avwo/whistle介紹；
啟動起來在瀏覽器輸入http://127.0.0.1:8899/#rules 會看到該應(yīng)用；
此時，還不能使用，還需安裝瀏覽器代理設(shè)置 SwitchyOmega 插件，讓瀏覽器指向入http://127.0.0.1:8899；（SwitchyOmega和whistle一毛錢關(guān)系都沒有的，換另外一個代理插件也是可以滴。）
whistle的作用是：
1、讓本地的代碼文件上測試環(huán)境，測試，測試環(huán)境等問題。
2、抓包調(diào)試；
3、可以做對應(yīng)接口的mock數(shù)據(jù)；
等等
三、聯(lián)調(diào)工具--postman
postman。
定義變量
定義變量是為了一次定義，多次使用，以后修改只改一個地方，效果等同于多次修改。變量可以指定不同的環(huán)境，也可以不指定環(huán)境。
環(huán)境管理
通常系統(tǒng)都有測試環(huán)境和線上環(huán)境，請求 url 肯定不一樣，一些參數(shù)也可能不一樣，可以通過切換不同的環(huán)境，動態(tài)變化，這樣只需配置一次 url 和參數(shù)即可。
Collections
可以保存我們的請求，不用打開都重新設(shè)置請求地址和參數(shù)了：
工作空間
新版本提供了工作空間的功能，可在不同的項目中切換:
抓取瀏覽器的請求（和上面的whistle的功能是一樣的）
可以自動映射到參數(shù)、cookie 信息，對應(yīng)需要登錄后調(diào)用的接口，可以現(xiàn)在瀏覽器登錄，通過抓取，就可以自動設(shè)置 cookie 信息了；同時可以攔截接口，返回自定義的數(shù)據(jù)，和mock.js類似。
四、截圖工具 snipaste FastStoneEditor
snipaste
好用到炸裂的工具；
第一功能是貼圖，第一功能是貼圖,第一功能是貼圖。重要的事情說三遍。
貼圖
寫代碼的時候，不是需要看文檔和別人的代碼對吧。有些時候需要的東西展示方式是圖片，沒法復(fù)制。解決方式可以使用OCR文字識別工具，但部分公司不允許使用外網(wǎng)，在線的OCR用不了，離線的比如（oneOnte2016）的圖片提取文字功能識別率不高，識別率很高的ABBYY Screenshot Reader需要錢。汗。
貼圖唄，把需要的內(nèi)容貼在編輯器上方（數(shù)量不限一個），編輯速度將提高。
文字標(biāo)注
文字標(biāo)注支持多次編輯。
FastStoneEditor
滾動截圖
snipaste 沒有的功能，F(xiàn)astStoneEditor來補(bǔ)。
使用場景是啥？
初學(xué)前端時，需要截取某個網(wǎng)址的首頁，練習(xí)樣式，這時候可以用到它截圖一個長圖片；
以圖片的形式做完整的筆記看到某個網(wǎng)頁上有需要的內(nèi)容，整張截圖下來放在印象筆記了，日后找起來方便；
很多企業(yè)不是有考試嗎？考試結(jié)束時的答案可以通過這種方式截取下來，當(dāng)然首次推薦的是保存pdf或者word。
四、測量工具 pickpick
標(biāo)尺
正確測量長度，單位有px,cm等；
放大鏡
之前在股票網(wǎng)上的圖片像素很不清時，用到的一個功能。
五、理想文檔 zeal 、網(wǎng)站復(fù)制器 Teleport Ultra
zeal
支持目前主流技術(shù)的文檔下載和查看。
就算斷網(wǎng)了，一樣能寫代碼和學(xué)習(xí)。
記得在上上一家公司的技術(shù)大佬說過，斷你們的網(wǎng)，你們就寫不了網(wǎng)了。我能啊，不是因為我很厲害，而是有zeal。
Teleport Ultra
作用和zeal類似，只不過下載的是整個網(wǎng)站。
六、谷歌瀏覽器插件 FEHelper
就是好用，沒什么好寫的。我寫的《谷歌插件》那個博客里面有介紹。
七、粘貼板增強(qiáng) ditto
該軟件不是前端專屬，凡是和文字（包括代碼），圖片打交道的那些人都可以用。程序員，作家，自媒體，文員等等。要是不使用這個軟件，就真的對不起自己。
這個軟件好用到炸裂，重點(diǎn)推薦。
可以使用在簽名，郵箱，某一段需要重復(fù)輸入的文字和代碼等，具體場景使用多了就自然而然。
怎么用呢？舉個栗子吧。
把每一個粘貼內(nèi)容看成一個老婆,假設(shè)自己有很多個老婆，
ctrl + esc下方那個鍵 把她們喚出來，排成一列；
喜歡哪一個， ctrl + 序號pick她；
老婆太多可以下一頁上一頁的找；
分頁去找不夠快的話，按Tab輸入特色：“杏眼柳葉眉”，找到心儀的她；
最后你就和下面這位一樣高興，呵呵。
按住shift + 分頁，可以選中多條數(shù)據(jù)復(fù)制粘貼；上一家公司，需要做代碼清單，1個小時的代碼清單量，我半小時就可以完成。
最后
用好軟件，節(jié)省時間，讓工作變的更美好哈。
關(guān)注我，和豆腐做朋友。
