前言

用好軟體，讓工作變得更美好。

正文

一、除錯工具（斷點除錯）

vscode、google瀏覽器

說出來不怕大家笑，做前端3年了，平時使用的除錯方式都是console.log，和debugger。其中使用console.log的頻率很高，其實這樣的習慣不好，console.log只能看到結果，看不到程式碼執行過程。

這兩種方式的壞處是效率不高，因為看不到迴圈的過程，浪費多些時間，而且很容易程式碼遺留跟著到測試和生成環境，造成一些不良影響。

最好的是方式是在谷歌瀏覽器--開發者工具--source的斷點除錯或者使用vscode自帶的除錯工具，節省時間。

1、在瀏覽器--開發者工具--source的斷點除錯。按下ctrl + p（開啟指定名字的檔案），這個方式對於經過webpack打包過的和沒有經過wepack打包的專案都是適用的。

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個小時的程式碼清單量，我半小時就可以完成。

最後

用好軟體，節省時間，讓工作變的更美好哈。

關注我，和豆腐做朋友。