FeHelper增加Ajax接口调试功能_Web开发者助手

FeHelper增加Ajax接口调试功能进入全屏

line

一、背景

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

二、功能预览

三、功能说明

默认情况下，各个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的控制台

发表于：2016-12-08 17:34:13 #FeHelper #Ajax-Debugger

阿里巴巴-钉钉-开放平台，能力开放&开发者运营岗位招聘中，期待你的加入！

钉钉开放，让应用开发更简单
充分开放，是钉钉的重要方向！除致力于为开发者打造丰富的开放API，更易接入的场景化能力包，完备的应用开发工具之外，还需要持续构建开放能力的布道、开发者生态运营体系，包括培训、沙龙、大会、社区合作等等。业务在快速发展，我们也还需要更多优秀的小伙伴加入！

评论区域

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 回复
```
很赞的功能，支持~
```