本身开发前端调试工具: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 下载解压便可