JavaScript全棧開發-工具篇
2017-04-13 22:17
轉載：javascript全棧開發
作者：龍付成–騰訊高階前端工程師
@IMWeb前端社群
目錄
Java早期主要作為指令碼語言執行在瀏覽器，而現在Java的使用範圍已經超越瀏覽器，向通用系統語言發展。特別是HTML5的出現，瀏覽器的平臺化，Node.js開源專案的發展，NoSQL技術的發展，Java逐漸成為跨移動平臺應用程式及跨平臺桌面應用程式的開發語言。
Java標準有兩類，一種是作為瀏覽器上通用行業標準的ECMA標準，另一種是作為瀏覽器外的桌面、伺服器的標準CommonJS標準。Java可以只用一種語言，開發出適應不同平臺（瀏覽器，桌面端，伺服器，移動端）的程式。而本文主要以Java作為全棧開發語言討論軟體產品前後端開發、測試相關的工具和方法。
前後端執行環境
1. Node.js
首頁：
下載：https://nodejs.org/download
Node.js是以Chrome的V8引擎為執行時，基於事件驅動的無阻塞I/O模型，輕量高效能，可快速構建可伸縮應用程式的平臺，適合執行資料密集型實時應用程式。
下載Windows Installer(.msi)程式進行安裝，預設安裝npm(node package manager)，及註冊node的安裝目錄到作業系統的環境變數，這樣在命令列介面任何路徑下都可以訪問node和npm程式。接下來要說明的開發測試工具，很多都基於node和npm。
npm的預設倉庫源訪問比較慢，可通過修改npm配置註冊源地址或npm安裝模組時帶–registry選項指定源倉庫地址。
- 其它瀏覽器
FireFox瀏覽器的外掛FireBug也是一款比較優秀的工具。如果是做PC端的前端開發，考慮瀏覽器的相容性，Internet Explorer也是必備的瀏覽器。（瀏覽器使用的市場份額原因，雖然份額在下滑）
開發工具
因個人偏好和使用習慣的不同，開發工具不同人有不同的選擇。以下是幾種常見的前端開發工具：
- WebStorm
- Sublime
- HBuilder
1.1 功能特性
WebStorm是由JetBrains開發的一個比較強大的輕量級開發工具，能夠完美地支援前端開發及基於NodeJS的服務端開發。
– 支援Java, Node.js, ECMA 6, Type, Coffee, HTML, CSS, Less, Sass 和 Stylus。語法高亮，文件查詢，重構
– 快速定位及錯誤高亮
– 專案導航及高階重構功能
– 支援AngularJS、React、Meteor、Express、其它框架
– 內建前端及服務端NodeJS斷點偵錯程式
– 與構建工具（Grunt、Gulp）、程式碼質量工具（JSHint，JSLint，ESLint，JSCS），測試工具（Karma，Mocha），版本控制工具（Git，GitHub，Mercurial，SVN）整合。
– 版本控制整合（Subversion，Perforce，Git，CVS）
1.2 小技巧
– 更改IDE主題：File -> Setting -> Appearance & Behavior -> Appearance
– 更改編輯器程式碼風格：File -> Setting -> Editor -> CodeStyle
– 設定IDE和專案的預設編碼：File -> Setting -> Editor -> File Encoding
– 外掛安裝：File -> Setting -> Plugins
– 編輯器配置匯入匯出：File -> Import Settings… / Export Settings…
– 快捷鍵設定：File -> Setting -> Keymap
– 自動儲存，檔案關閉後仍能進行撤銷和重做操作
– 顯示行號，自動換行功能開關：程式碼左側區域右鍵選單勾選。如下圖左側
– 滑鼠移至html檔案頂部區域出現不同瀏覽器快速開啟按鈕。如下圖右側
1.3 實用快捷鍵
2.1 功能特性
Sublime Text是一個跨平臺的文字編輯器，支援基於Python的外掛，可通過Package擴充套件。
– 內建支援很多程式語言，並支援語法高亮。使用者也可以通過外掛支援更多程式語言
– Go to anything功能，快速跳到檔案，符號或行數
– Command palette功能：彈性快捷鍵功能
– 多行選擇功能：同時修改多行內容
– 基於 Python 語言的外掛 API
– 針對個別專案使用不同的編輯器設定
– 通過 JSON 檔案自定義設定值
– 跨平臺（Windows、Linux 和 Mac OS X）
– 相容 TextMate 的語言標記語法
2.2 小技巧
– 檔案未儲存退出編輯器，下次啟動會自動恢復
– 雙擊選中一個識別符號，然後連按ctrl+D可以連續選中多個識別符號，進行重新命名等操作
– 以某種編碼格式開啟，以某種編碼格式儲存見File -> Reopen with Encoding / Save with Encoding
– 矩形選取，按住滑鼠中鍵（滾輪）不放，向下拉取選擇然後鬆開即可垂直方向選擇矩形內的內容。配合ctrl多處選擇，可以進行多處編輯
– html中輸入一個標籤名如div，按Tab會自動生成
– 按住ctrl+alt，然後按上或下方向鍵可進行垂直方向游標定位，按左或右方向鍵可進行水平選取
2.3 實用快捷鍵
3.1 功能特性
HBuilder是DCloud推出的一款免費的支援HTML5的Web開發IDE。通過完整的語法提示和程式碼輸入法、程式碼塊及很多配套，HBuilder能大幅提升HTML、Java、CSS的開發效率。
– 程式碼助手
– 內建web伺服器，可用各種主流瀏覽器進行測試
– 各種眼睛保護配色
– 內建最全語法庫支援和瀏覽器相容資料
– 可進行手機App開發
– 跳轉助手、選擇助手、轉義助手、快捷鍵助手
– 語法校驗、轉到定義、重構 、大綱、任務TODO 、版本歷史、內建webserver、預編譯less、sass等
3.2 小技巧
– 程式碼提示時，按下候選列表前的數字，自動把該候選項輸入到編輯區
– 內建Emmet外掛，輸入div按Tab，自動生成
– 內嵌jQuery、Zepto、微信JS SDK、MUI框架外掛，可提示相應框架API的語法。在工程點右鍵 -> 引用框架語法 來新增對其它（angular、ext、dojo..）框架庫語法提示的支援。
– Ctrl+P邊寫程式碼邊預覽
– 拖動tab程式碼選項卡，可以進行左右或上下分屏顯示
3.3 實用快捷鍵
3.4 外掛支援
HBuilder基於Eclipse 3.7（2011年6月釋出）開發，因此相容Eclipse3.x版本外掛。也可進到 工具 -> 外掛安裝 -> 瀏覽Eclipse外掛市場 來安裝外掛。
NodeJS外掛：Nodeclipse 安裝方法見：http://ask.dcloud.net.cn/article/230
4. 開發工具小結
作為一款開發工具，能讓開發者將寫程式碼當成一種享受，愉快地編碼，最核心的功能應該滿足以下幾點：
1. 功能完善，該有的常用功能都有
2. 編碼快速，智慧提示，自動完成
3. 啟動速度，測試速度快
4. 開發工具介面的主題和配色也是比較重要，耐看、程式碼區分一目瞭然，不刺眼，不引起視覺疲勞。
5. 可配置，可外掛，有擴充套件的能力，滿足自定義開發的需求
上述的幾種開發工具各自有其優勢：
1) WebStorm ：功能完善強大
2) SublimeText：輕量快捷，介面優美
3) HBuilder：Html5開發，快速編碼
開發者可根據自己的需要和個人偏好選擇其中一個或多個工具使用，以滿足快速開發的需求。
構建工具
在前端開發過程中，經常需合併檔案、壓縮程式碼、單元測試、檢查語法錯誤等，需要用手工或不同的工具來完成不同的任務，重複勞動且耗時繁瑣，而自動化構建工具可以幫我們自動管理和執行各種任務。可以減少程式碼構建手工出錯的機會，大大增強了開發效率，節省資源。
以下是常見的自動構建工具，可根據需要，選擇其中之一進行安裝。
* Grunt
* Gulp
1. Grunt
首頁：http://gruntjs.com
中文：http://www.gruntjs.net
專案：https://github.com/gruntjs（包括Grunt及其各種模組）
原始碼：https://github.com/gruntjs/grunt
外掛：http://gruntjs.com/plugins
1.1 Grunt安裝
Grunt和Grunt外掛是通過npm（node package manager）安裝管理的。
常見的Grunt模組說明
在專案目錄安裝Grunt及常見的Grunt外掛：
grunt-cli為grunt的命令列介面，主要向Grunt傳遞Gruntfile配置資訊，然後執行Grunt來完成配置檔案中指定的任務。
-g：–global，表示全域性安裝，全域性安裝後可在任何目錄執行grunt命令
–save-dev：表示安裝grunt模組時，模組會被自動加到專案的package.json檔案的依賴列表中
1.2 Grunt配置檔案
模組安裝完成後，在專案根目錄建立名為Gruntfile.js的配置檔案。該配置檔案是一個node.js的模組，Grunt執行需要該配置檔案。
Grunt常用API
– grunt物件：Grunt通過將grunt物件賦值給module.exports函式，將grunt物件的屬性和方法傳遞給Gruntfile、Grunt模組和task檔案中
– grunt.initConfig(configObject)：grunt.config.init方法的別名，初始化各模組的配置
– grunt.loadNpmTasks(pluginName)：載入通過npm安裝的Grunt模組
– grunt.registerTask(taskName, taskList)：註冊定義任務
以下為壓縮css的任務的配置檔案
配置項屬性可在Grunt外掛列表http://gruntjs.com/plugins 找到對應的模組頁面獲取詳細的資訊。上述安裝的其它模組的使用方法可參考外掛模組頁面的介紹。Grunt內部方法呼叫的基本流程是 ：
grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()
1.3 Grunt任務的執行
1) 執行方式1：Grunt命令列方式執行
命令列進到專案根目錄，執行grunt命令，命令格式：grunt 模組名:目標名，未指定模組名，目標名將依次執行相應模組及相應目標。
2) 執行方式2：開發工具IDE方式執行
1> WebStorm
開啟專案程式碼，右鍵點選 Gruntfile.js 檔案 -> 點選Show Grunt Tasks選單項 -> 出現Grunt任務列表 -> 右鍵選中其中一個任務項 Run -> 完成執行。（若Grunt列表出現警告，未列出任務，則需要點選警告設定Grunt的NodeJS和Grunt-cli安裝路徑）。
2> SublimeText
SublimeText預設沒有安裝Grunt，參看SublimeText中外掛支援的安裝方法在Package Control中安裝外掛”Grunt”。
安裝完成後 -> 快捷鍵ctrl+shift+p（或Tools -> Command Palette）執行命令列 -> 選中Grunt命令 -> 完成執行。
2. Gulp
首頁：http://gulpjs.com
中文：http://www.gulpjs.com.cn
專案：https://github.com/gulpjs
原始碼：https://github.com/gulpjs/gulp
外掛：http://gulpjs.com/plugins
2.1 Gulp安裝
Gulp和Gulp外掛是通過npm（node package manager）安裝管理的。
常見的Gulp模組說明
在專案目錄安裝Gulp及常見的Gulp外掛：
2.2 Gulp配置
模組安裝完成後，在專案根目錄下建立 gulpfile.js 程式碼檔案。
Gulp常用API
– gulp.src(globs [,options])：產生資料流。匹配glob或glob陣列的檔案，返回Vinyl-fs型別的stream，可通過管道(pipe)傳遞給外掛
– gulp.dest(path [,options])：作為管道的輸出寫入檔案，同時輸出將繼續輸出。多次呼叫dest將多次輸出到多個目錄，目錄不存在則建立
– gulp.task(name [,deps], fn)：指定任務名及任務函式來定義任務。default為Gulp預設執行的任務。
– gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb])：監視檔案變化執行某些操作，返回可分發change事件的EventEmitter物件。
以下為壓縮css的任務的配置檔案
Gulp API的使用方法詳見：http://www.gulpjs.com.cn/docs/api。方法呼叫的基本流程是 gulp.src() -> gulp.dest() -> task()。
2.3 Gulp執行
1) 執行方式1：Gulp命令列方式執行
專案根目錄，執行gulp命令，命令格式：gulp ，未指定任務名，執行所有任務。
2) 執行方式2：開發工具IDE方式執行
1> WebStorm
開啟專案程式碼，右鍵點選 Gulpfile.js 檔案 -> 點選Show Gulp Tasks選單項 -> 出現Gulp任務列表 -> 右鍵選中其中一個任務項 Run -> 完成執行。（若Gulp列表出現警告，未列出任務，則需要點選警告設定Gulp的NodeJS和Gulp安裝路徑）
2> SublimeText
SublimeText預設沒有安裝Gulp，參看SublimeText中外掛支援的安裝方法在Package Control中安裝外掛”Gulp”。
安裝完成後 -> 快捷鍵ctrl+shift+p（或Tools -> Command Palette）執行命令列 -> 選中Gulp命令 -> 選中任務 -> 完成執行。
3. 構建工具小結
作為一個工具，核心的需求應該是讓開發者花最少的時間學習使用，併為開發者節省更多的時間，解放重複的手工勞動。這就要求一個理想的自動化構建工具應滿足 簡單，易用，易擴充套件，易維護，高效能，多平臺執行，可靠，可測試等要求。其架構設計應滿足的功能需求與非功能性需求如下圖所示。
Grunt與Gulp都比較完善的構建工具，但是各自有自己的特點：
Grunt
– 外掛較豐富
– 易用，常見任務都有外掛
– Grunt及外掛的選項較多，使用複雜
Gulp
– 配置較少，使用簡單
– 利用Node.js流，不需要往磁碟寫中間檔案，速度更快
– 易於學習，API較少
測試工具
1. 單元測試
單元測試（unit testing），是指對軟體中的最小可測試單元進行檢查和驗證。常見的單元測試工具有：
* QUnit
* NodeUnit
1.1 前端單元測試QUnit
首頁：http://qunitjs.com
原始碼：https://github.com/jquery/qunit
QUnit是jQuery團隊開發的Java單元測試工具，功能強大且使用簡單。目前所有的JQuery程式碼都使用QUnit進行測試，原生的Java也可以使用QUnit。
1) 測試結果頁面 qunit.html
2) 單元測試指令碼檔案 qunitcase.js
3) 測試結果
1.2 後端單元測試NodeUnit
首頁：https://github.com/caolan/nodeunit
可通過命令npm install nodeunit -g進行npm全域性安裝。前面構建工具Grunt也有NodeUnit的外掛。
1) 單元測試指令碼示例 nodeunitcase.js
2) 命令列介面執行測試
在專案根目錄下執行命令：
3) 測試結果
1.3 NodeJS自帶測試模組Assert
API首頁：https://nodejs.org/api/assert.html
如需用NodeJS自帶測試模組來斷言測試，需用 require(‘assert’) 新增模組引用。
assert.equal(actual, expected, message) 方法執行 actual 與 expected 的淺拷貝比較（類似於==），相等時不作任何輸出，不等的時候輸出message，並丟擲AssertError異常。
1) 測試程式碼 assertcase.js
2) 命令列執行測試
在專案根目錄下執行命令 或 開發工具右鍵assertcase.js執行測試
3) 測試結果
1.4 Mocha
首頁：http://mochajs.org
原始碼：https://github.com/mochajs/mocha
Mocha是一個功能豐富能執行在瀏覽器端及Node.js程式中的測試框架，支援非同步測試，測試覆蓋度報告，JS API測試，能和任何Assert整合等功能。詳見首頁的功能特性。可通過 npm install mocha -g 進行全域性安裝。mocha預設為執行專案資料夾test目錄下的測試指令碼檔案。
Mocha在瀏覽器端的測試詳見官文文件。
1) 測試程式碼 mochacase.js
2) 命令列執行程式碼
在專案根目錄下執行命令：
3) 測試結果
1.5 單元測試工具小結
不同的測試工具適合不同的應用場景，開發者可根據自己需求選擇合適的開發工具。
– NodeJS系統自帶的Assert模組能滿足NodeJS簡單測試斷言的需求。
– QUnit適合前端Java程式碼的測試
– NodeUnit適合後端Java程式碼的測試
– Mocha適合前後端（瀏覽器端，NodeJS端）Java程式碼的測試，功能相對更豐富
1.6 測試工具擴充套件閱讀
測試驅動開發(TDD，Test-Driven Development)：
行為驅動開發(BDD，Behavior-Driven Development)：Cucumber.js，Vow
2. 效能測試
常見的Web效能測試工具有
* PageSpeed Insights
* Apache Bench
2.1 PageSpeed Insights
首頁：
https://developers.google.com/speed/pagespeed
PageSpeed是Google開源的優化Web，加速Web載入的工具。
1) 測試示例
在PageSpeed Insights頁面輸入待測試的地址。
2) 測試結果
可根據移動裝置及桌面裝置給出問題及修復建議。
2.2 Apache Bench
首頁：http://httpd.apache.org
Apache伺服器自帶Apache Bench (ab)壓力測試工具（ab程式在Apache安裝目錄的bin資料夾下），可用來測試web效能。其用法是在命令列執行：ab [options] [http://]hostname[:port]/path。options引數詳見幫助ab -h。
ab常用引數：
-n：總共的請求執行數，預設1
-c：併發數，預設1
-t：測試所進行的總時間，秒為單位，預設50000s
-p：POST時的資料檔案
-w：以HTML表的格式輸出結果
1) 測試示例
2) 測試結果
2.3 效能測試工具小結
可用來進行效能測試的工具很多，後端的效能壓力測試工具還有WebBench，LoadRunner等。而頁面效能測試工具Show Slow，YSlow也是非常優秀的工具。
3. 測試工具擴充套件閱讀
– Bower：https://github.com/bower
– Source Map：https://github.com/floridoo/gulp-sourcemaps
除錯工具
1. 瀏覽器工具
1.1 Chrome 開發者工具
Chrome瀏覽器的開發者工具能進行DOM樹節點的各種操作，CSS樣式各種操作，網路請求的跟蹤，Java原始碼斷點除錯，效能分析，資源（CPU，記憶體）分析，頁面資源分類瀏覽，控制檯等功能。
1.2 FireBug外掛
首頁：http://getfirebug.com
FireBug是Firefox瀏覽器下的開發者外掛，可對Web頁面的html，css，Java進行實時編輯，除錯和監控。同時有支援IE6+，Opera，Safari，Chrome等瀏覽器的版本Firebug Lite（http://getfirebug.com/firebuglite）。
1.3 Chrome Inspect開發者工具
Chrome的Inspect工具具備在PC上的Chrome除錯手機Chrome頁面的能力。
1) 手機USB線連線PC，啟用手機允許除錯功能
2) 在PC上開啟Chrome，並在位址列輸入 chrome://inspect，出現手機連線成功的介面。如圖一。
3) 在手機上開啟Chrome，並開啟任意一個Web頁面。PC上Chrome的Inspect介面出現手機Chrome上已開啟的頁面。如圖二。
4) 在其中一個開啟的頁面下點選inspect就可以進到chrome的開發者工具除錯頁面了。如圖三。
- Http代理工具
2.1 Fiddler
首頁：http://www.telerik.com/fiddler
Fiddler是一款http協議除錯代理工具(基於.net開發)，支援Web除錯，效能測試，Web會話維護，安全測試，Http/Https通訊記錄，自定義外掛擴充套件等功能特性，是Web開發，Web移動開發最常用工具之一。同時其包含強大的基於事件指令碼的子系統，支援.net擴充套件，滿足自定義需求。
步驟：
1) 在PC上配置Fiddler代理(Tools->Fiddler Option->Connections->勾選Allow Remote computer to connect，Fiddler listens on port為8888埠)，開啟無線網絡卡，並連線Wifi
2) 手機開啟並連線Wifi，長按已連線Wifi->修改網路配置->代理設定選手動->代理主機名輸入PC的無線網絡卡IP地址->代理伺服器埠號輸入Fiddler的8888埠->儲存
3) 在手機瀏覽器中開啟網頁，在Fiddler中可看到手機的http請求
注意事項：
1) 手機和PC都連線同一個wifi網路確保PC和手機在同一個網段，可互訪。
2) 有時在配置代理及手機Wifi代理都正確的情況下，有可能需要清一下Fiddler的快取（Tools->Clear WinINet Cache和Cookie）才可以正常連線。
2.2 Fiddler外掛-Rosin
首頁：https://github.com/AlloyTeam/Rosin
Rosin是Fiddler的外掛，可以指定頁面過濾規則，接收該頁面的console輸出的日誌，支援物件屬性輸出及JSON物件樹檢視。這對於檢視移動端web頁面的日誌輸出，除錯移動端web很有幫助。具體使用方法見Rosin首頁介紹。
2.3 Fiddler外掛-Willow
首頁：http://km.oa.com/group/willow @@@ 作者為yunishi，dollyden。
Willow作為Fiddler的外掛，可以擴充套件Fiddler的功能，如統計資料包、修改Host、請求重定向、編碼轉換、低網速模擬、斷點除錯以及過濾HTTP請求。
該外掛可用於將手機Web頁面重定向到PC端本地頁面檔案的能力，可方便地進行手機端頁面除錯。
2.4 Fiddler外掛-SSI Proxy
首頁：
http://tid.tenpay.com/labs/ssiproxy/index.html @@@
SSI Proxy是財付通設計中心（TID）基於Fiddler開發的外掛工具，是業界內首個用於解析include指令的代理工具， 主要亮點是HTML頁面模組化開發（使HTML頁面支援include指令）， 本地開發、除錯SHTML頁面無需搭建伺服器。
2.5 微信、手機QQ WebView及騰訊手機QQ瀏覽器開發者工具-Inspect @@@
微信、手機QQ及騰訊手機QQ瀏覽器都內建X5核心，手機Web的除錯可以利用MIG事業群自研的Inspect工具進行開發除錯。原創除錯方法參見 瀏覽器產品部BrianZheng(鄭清江)文章《手機QQ瀏覽器除錯大揭祕》，地址：http://km.oa.com/group/22486/articles/show/221881
簡略步驟：
1) 手機端
– QQ瀏覽器除錯版下載安裝並啟動：下載地址：http://x5.cs0309.imtt.qq.com/inspector/page/list.html（QQ瀏覽器選擇左側qb選單，右邊選擇最新版本）
– TBS Inspector下載安裝並啟動：下載地址：http://x5.cs0309.imtt.qq.com/inspector/page/list.html（QQ瀏覽器選擇左側tbs選單，右邊選擇最新版本）
– 開啟待除錯頁面：通過掃二維碼、複製連結等方式
– 資料線連線PC與手機
2) PC端
– 安裝python並在安裝時勾選新增到系統環境目錄。Python下載：https://www.python.org/downloads/
– 下載python寫的x5除錯客戶端，下載完成後解壓縮。下載地址：http://res.imtt.qq.com/tbs_inspect/sq_webview_debug.zip
– 進到x5除錯客戶端解壓後的目錄，執行 inspector.py 檔案在9223埠上偵聽PC上面chrome的除錯監視請求
– 開啟chrome，進到http://localhost:9222頁面，可以看到手機QQ瀏覽器開啟的頁面列表，點選其中待除錯的頁面標籤即可進到chrome開發工具進行除錯。
3. 除錯工具小結
除錯工具一般為瀏覽器的開發者工具或自身提供的inspect來滿足開發者開發、除錯的需要。也有藉助Fiddler這個工具及衍生的各類外掛完善補充Fiddler的功能，來實現對PC Web端及手機Web端快速開發的方式。開發者根據自己實際業務的需求進行選擇。
總結
工欲善其事，必先利其器，對於全棧工程師來說，有強大的工具在手才可以提高開發和除錯的效率。但是工具的選擇和使用因人，因場景不同而不同，以上所述只是以Java語言全棧開發的角度進行闡述，涉及的工具不一定是最好的，也不一定最適合所有的開發者，況且不同的開發語言所用到的開發除錯工具差別很大。而且隨著時間的發展，軟體行業的進步，開源社群的貢獻，會湧現越來越多的優化軟體。
由於本文主題的關係，所介紹的工具只是簡單引入，點到即止，詳細的介紹需要參看工具官網或者研究原始碼才可以作深度的瞭解。
有任何問題，歡迎交流！
隨時關注更多前端乾貨文章！