自己开发前端调试工具:Gungnir
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im
搞前端的,特别是负责广告脚本开发的,经常接到需求:”xxx页面广告出不来/xx页面有脚本错误,赶紧帮忙看下”.这时候就得把页面内容下载到本地,打开fiddler,然后配置好代理,再用编辑器打开调试.
天天遇到这种事情的话,就会觉得fiddler的这些操作还不够简单.而且fiddler也不能把代理设置按项目分类,都是堆在一起,不能有效的分类存储代理设置以备下次使用.
而且作为码农,日常工作中觉得麻烦的重复性操作,能简化得一定要想尽办法简化.
诸如此类的问题,加上刚好在学习angularjs和node-webkit,于是就花时间做了一个类似fiddler的小工具,不求功能比fiddler强,只求更方便自己使用,并且在有需要时要做成跨平台也比较容易.
关于这个工具的名字:刚开始做的那段时间刚好在看北欧神话,于是就拿奥丁的永恒之枪当名字,寓意找bug百发百中.
界面介绍
顶部是不同的功能面板开关,目前只有NETWORK面板,HOST和SETTING还没做好,暂时屏蔽.
右上是检查更新.
左边是项目资源管理以及工具条,工具条按钮功能分别为:打开项目
,运行服务器
,新增代理
,打开控制台
,刷新项目
,保存(ctrl+s)
.右键点击选中的条目会出现快捷菜单.底部蓝色横条会显示一些操作提示信息.
右侧大面板是文本编辑器
项目资源管理界面
项目按文件夹来划分,同一时间只能打开一个项目.可以通过将文件夹拖动到软件窗口,或者通过工具条的打开项目按钮来选择要打开的项目目录.
项目的根目录会默认生成一个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里的参数
函数签名如下:
1 |
//query为url参数,例如: |
拿http://www.17173.com
的+1接口来举例.为了防止刷票,这个接口同一个ip每天只能点击一次
接口地址
再次点击,就会返回已投过票
现在要移除这个限制,我们自己写代码来返回需要的mock数据.
先代理到本地,勾选返回代码执行结果
然后编辑index.js
,模拟实现+1
的功能.
1 |
//存放点击数 |
每次刷新接口: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 下载解压即可
自己开发前端调试工具:Gungnir的更多相关文章
- 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)
前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 【F12】谷歌浏览器F12前端调试工具 Console
谷歌浏览器F12前端调试工具 Console 前言 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的C ...
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- web开发前端面试知识点目录整理
web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...
- Grails项目开发——前端请求跨域问题
Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- 前端调试工具(DevTools)
前端调试工具(DevTools) 开启:F12 布局 切换PC和移动端 页面元素的快速测试技巧 保持元素的hover等状态:选中当前行点击右键 元素状态改变的监控技巧 触发断点后元素状态不会再改变,可 ...
随机推荐
- csu1216( Trie )
csu1216 题意 给定一些数,求这些数中两个数的异或值最大的那个值. 分析 转化成二进制数存入字典树,比如说要查询 \(0011\) ,显然和 \(1100\) 结合最优,所以我们直接在字典树上寻 ...
- C++ 对象的内存布局【转】
单一继承: 虚函数表在最前面的位置. 成员变量根据其继承和声明顺序依次放在后面. 在单一的继承中,被overwrite的虚函数在虚函数表中得到了更新. 多重继承 每个父类都有自己的虚表. 子类的成员函 ...
- 如何加快exp/imp的速度 - direct=y
http://blog.itpub.net/35489/viewspace-613625 Oracle9i 或 10g . 1. 内存中关系到exp的速度的是 large_pool_siz ...
- [BZOJ 1794] Linear Garden
Link: BZOJ 1794 传送门 Solution: IOI2008官方题解:传送门 要求序号,其实就是算字典序比其小的序列个数 从而使用数位$dp$的思想来解题,关键在于维护序列要$balan ...
- 【二分答案】【最大流】bzoj3130 [Sdoi2013]费用流
二分最大的边的cap,记作Lim. 把所有的边的cap设为min(Lim,cap[i]). Bob一定会把单位费用加到最大边上. #include<cstdio> #include< ...
- js常用功能总结
1,手机号的校验 //手机号的判断 function checktel() { //手机号不为空,格式校验 var tel = $(".uidbtp").val(); if(tel ...
- B/S架构 Web打印程序(Argox)
B/S架构 Web打印程序 对于B/S架构下的管理软件系统,在客户端浏览器页面中如何透过本地打印机或网络打印机打印条码标签,Argox提供最常用的2种类型打印机集成方案. ● PPLA 打印机IE游 ...
- Debian、Ubuntu 源列表说明
转载:http://forum.ubuntu.org.cn/viewtopic.php?t=366506 概貌: 源列表主文件为 /etc/apt/sources.list,另兼取 /etc/apt/ ...
- svn的安装(整合apache、ldap)包括错误解决post commit FS processing had error
2013年12月5日 admin 发表评论 阅读评论 以下是centos环境下,以yum安装apache及其相关软件.svn使用源码包编译,使用官网最新的1.8.5版本. 一.安装apache ope ...
- win10下安装mysql5.6 zip形式步骤
1. 解压之后可以将该文件夹改名,放到合适的位置,个人建议把文件夹改名为MySQL Server 5.6,放到C:\Program Files\MySQL路径中. 2. 添加环境变量.path中添加C ...