本身開發前端調試工具:Gungnir

文章目錄

這裏文章都是從我的的github博客直接複製過來的,排版可能有點亂. 原始地址 http://benq.imphp

搞前端的,特別是負責廣告腳本開發的,常常接到需求:」xxx頁面廣告出不來/xx頁面有腳本錯誤,趕忙幫忙看下」.這時候就得把頁面內容下載到本地,打開fiddler,而後配置好代理,再用編輯器打開調試.css

每天遇到這種事情的話,就會以爲fiddler的這些操做還不夠簡單.並且fiddler也不能把代理設置按項目分類,都是堆在一塊兒,不能有效的分類存儲代理設置以備下次使用.html

並且做爲碼農,平常工做中以爲麻煩的重複性操做,能簡化得必定要想盡辦法簡化.前端

諸如此類的問題,加上恰好在學習angularjs和node-webkit,因而就花時間作了一個相似fiddler的小工具,不求功能比fiddler強,只求更方便本身使用,而且在有須要時要作成跨平臺也比較容易.node

關於這個工具的名字:剛開始作的那段時間恰好在看北歐神話,因而就拿奧丁的永恆之槍當名字,寓意找bug百發百中.git

界面介紹

頂部是不一樣的功能面板開關,目前只有NETWORK面板,HOST和SETTING還沒作好,暫時屏蔽.angularjs

右上是檢查更新.github

左邊是項目資源管理以及工具條,工具條按鈕功能分別爲:打開項目,運行服務器,新增代理,打開控制檯,刷新項目,保存(ctrl+s).右鍵點擊選中的條目會出現快捷菜單.底部藍色橫條會顯示一些操做提示信息.web

右側大面板是文本編輯器ajax

項目資源管理界面

項目按文件夾來劃分,同一時間只能打開一個項目.能夠經過將文件夾拖動到軟件窗口,或者經過工具條的打開項目按鈕來選擇要打開的項目目錄.

項目的根目錄會默認生成一個zproject.json文件,用來保存代理配置等一些項目設置,這樣你每次打開該文件夾都會還原上次的工做狀態.

項目項的右鍵菜單包含了一些經常使用的功能.其中預覽頁面會有兩種狀況,若是該項或該項的父目錄被設置了代理,則會經過代理的地址打開,不然使用本地地址打開文件.

文本編輯器功能

Gunnir集成了前端開發經常使用的語言的文本編輯器功能(使用開源的編輯器codemirror),目前個人開發都已經使用本身作的這個工具做爲IDE了,由於這樣不少功能均可以按本身的須要去改造.
目前支持的語言列表:html,js,css,sass,php,coffeescript,markdown,aspx

其中對js的支持功能會多一些,包括語法提示,jshint等

光標移動到當前標識符並按ctrl+i會顯示註釋

自動列出成員列表

一些經常使用的快捷鍵功能說明:
CTRL+W 關閉當前文件
CTRL+TAB 切換到下個文件
CTRL+K 註釋選中代碼
CTRL+N 取消註釋
CTRL+L 跳轉到指定行
CTRL+F 搜索
CTRL+G 跳轉到下個搜索結果
CTRL+M 格式化代碼
ALT+. 跳轉到定義

代理功能

爲了儘量的簡化操做,代理的建立方式能夠有多種,選擇哪一種取決於你的應用場景.

自動下載線上文件

若是是臨時須要調試線上的某個頁面,這是最經常使用的方法.好比假設如今要調試http://www.17173.com

點擊工具條上的新增代理設置按鈕,填寫要調試的頁面地址,點擊保存.

程序會自動把頁面內容下載到本地,並按按路徑存放

咱們修改index.html的頁面title爲」Gungnir測試」,點擊工具條上的啓動服務器按鈕(開啓軟件時默認是運行的).而後刷新頁面,就能夠看到頁面已經被代理到本地文件了(若是使用chrome瀏覽器而且未代理成功,請檢查chrome的代理設置是否是被插件託管了,若是是,則先切換到使用系統代理設置)

若是要刪除代理,右鍵點擊被代理的文件index.html,而後選擇代理設置->移除代理便可

使用本地已有文件

最常常見的狀況是要將線上的文件代理到本地已有的未壓縮版本.

先在項目裏剛纔自動生成的www.17173.com目錄裏新增一個index.js文件
而後隨便配置一個不存在的域名

右鍵點擊index.js,選擇預覽頁面

代理整個目錄

在www.17173.com目錄下新增兩個文件a.js,b.js
選中文件夾,隨便設置一個代理

右鍵www.17173.com文件夾->預覽頁面

執行文件內容後返回結果

這個功能在先後端配合開發裏會比較有用.後端接口已經定義好,可是還沒有實現,就能夠用這種方法作一些mock.

設置代理的時候,能夠勾選返回代碼執行結果

代理程序會把腳本里的代碼看成一個函數執行後把結果做爲內容返回.該函數包含一個參數query,表示url裏的參數

函數簽名以下:

//query爲url參數,例如:
// www.1.com?a=1&b=2
// 則query = {a:1,b:2}
function(query){
	//文件裏的內容會被看成腳本放在此函數裏運行
}

拿http://www.17173.com的+1接口來舉例.爲了防止刷票,這個接口同一個ip天天只能點擊一次

接口地址

再次點擊,就會返回已投過票

如今要移除這個限制,咱們本身寫代碼來返回須要的mock數據.

先代理到本地,勾選返回代碼執行結果

而後編輯index.js,模擬實現+1的功能.

//存放點擊數
var support = window.sessionStorage.getItem('support') || 1189;
//+1
support++;
window.sessionStorage.setItem('support',support);

var result = {
  flag:1,
  ajaxId:0,
  support:support,
  oppose:0
};
return query.jsonp + '('+JSON.stringify(result)+')';

每次刷新接口:http://hits.17173.com/support/support_opb.php?jsonp=fn&action=1&channel=90103&web_id=1419588860&kind=1 ,點擊數都會+1了.

NETWORK面板

NETWORK面板能夠監控電腦上全部http請求的細節

點擊加號能夠給該請求設置代理

項目地址

https://github.com/benqy/Gungnir

打包好的,綠色版:http://7ktooc.com1.z0.glb.clouddn.com/gungnir.zip 下載解壓便可