不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
FeHelper增加Ajax接口调试功能 进入全屏
line

一、背景

这两天在倒腾某个工具平台,页面上的内容基本都是异步获取,需要一直在DevTools-Network面板下不断操作,总觉得还是有点麻烦,于是,干脆在FeHelper中对Ajax接口进行抓包,直接在Console控制台输出。

二、功能预览

ajax-debugger.gif

三、功能说明

  • 默认情况下,各个Tab的FeHelper-Ajax调试功能都是处于关闭状态的,如果需要使用到该功能,从popup-menu中手动打开即可
  • 也许DevTools-Network面板已经完全能满足你的需求,你忽略这个功能即可

四、关于实现

  • BackgroundPage中管理Chrome各个Tab的AjaxDebugger开关
  • PopupMenu中手动打开关闭Ajax调试开关,实际数据发送至BackgroundPage
  • DevTools.Network.onFinished监听页面请求的加载,分析Request对象
  • DevToolsPage中请求BackgroundPage,获取当前Tab的调试开关状态
  • 开关若开启,发送数据至BackgroundPage进行中转处理
  • BackgroundPage收到数据,通过chrome.tab.executeScript将数据输出到该Tab的控制台
趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • 1 2017-12-12 15:51:42 回复
    1
  • Alien 2016-12-15 14:19:57 回复
    回复 Kevin : Got it!
    Kevin said:
    首先值得肯定的是:插件很棒!!!真的很棒!!!
    给点建议吧:1.增加开关功能(比如json自动格式化会和其他插件冲突),2.增加快捷键
    ////
    楼下的亮神居然也在~
  • Kevin 2016-12-13 17:53:05 回复
    首先值得肯定的是:插件很棒!!!真的很棒!!!
    给点建议吧:1.增加开关功能(比如json自动格式化会和其他插件冲突),2.增加快捷键
    ////
    楼下的亮神居然也在~
    前端小武 said:
    赞. 支持~
  • 前端小武 2016-12-13 10:49:45 回复
    赞. 支持~
  • shinhwa 2016-12-09 08:46:30 回复
    很赞的功能,支持~