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