FeHelper/chrome/static/js/ajaxdebugger/debugger.js

/**
 * Ajax接口调试功能
 *
 * 原理：
 *
 *  devtools → background-page → content-page → console.*
 *
 * @author [email protected]
 */
var AjaxDebugger = (function () {

    /**
     * 自定义Console
     */
    var FeHelperConsole = (function () {
        var Types = 'log,debug,info,warn,error,group,groupCollapsed,groupEnd'.split(',');

        var sendMessage = function (type, format, args) {
            chrome.extension.sendMessage({
                type: MSG_TYPE.AJAX_DEBUGGER_CONSOLE,
                content: escape(JSON.stringify(Array.prototype.slice.call(arguments, 0)))
            });
        };

        var that = new Function();
        Types.forEach(function (tp) {
            that[tp] = sendMessage.bind(that, tp);
        });

        return that;
    })();

    /**
     * 分析Request
     * @param request
     */
    var analyticRequest = function (request) {
        var url = request.request.url || "",
            urlSeparator = (url.indexOf("?") > -1) ? "&" : "?",
            requestParams = (request.request.postData && request.request.postData.params) || [],
            responseStatus = request.response.status + " " + request.response.statusText,
            responseSize = request.response.bodySize + request.response.headersSize;

        var queryString = '';
        requestParams.forEach(function (param, index) {
            queryString += (index == 0 ? urlSeparator : '&') + param.name + '=' + param.value;
        });

        var requestPath = '/' + (url.split('?') || [''])[0].replace('://', '').split('/').splice(1).join('/');
        var responseTime = request.time > 1000 ? Math.ceil(request.time / 1000) + 's' : Math.ceil(request.time) + 'ms';
        responseSize = responseSize > 1024 ? Math.ceil(responseSize / 1024) + 'KB' : Math.ceil(responseSize) + 'B';

        // 获取Response的数据
        request.getContent(function (content, encoding) {

            if (content) {
                try {
                    request.response.responseData = JSON.parse(content);
                }
                catch (e) {
                    request.response.responseData = content;
                }
            }

            var header = "Ajax请求加载完毕 (" + [requestPath, responseStatus, responseTime, responseSize].join(" - ") + ") " + ' -- By FeHelper';

            FeHelperConsole.group(header);
            FeHelperConsole.log('AjaxURL  :', {url: url + queryString});
            FeHelperConsole.log("Request  :", {request: request.request});
            FeHelperConsole.log("Response :", {response: request.response});
            FeHelperConsole.log("OtherInfo:", {
                timeConsuming: responseTime,
                timings: request.timings,
                time: request.startedDateTime,
                server: request.serverIPAddress
            });
            FeHelperConsole.groupEnd();
        });
    };


    /**
     * 监控Network中的请求
     */
    chrome.devtools.network.onRequestFinished.addListener(function (request) {

        var reqUrl = request.request.url.split('?')[0] ;
        if (/\.js$/.test(reqUrl)) {
            return false;
        }
        var isXHR = /\.json$/.test(reqUrl) || (request.request.headers.concat(request.response.headers)).some(function (header) {
                return (
                (header.name == "X-Requested-With" && header.value == "XMLHttpRequest") ||
                (header.name == "Content-Type" && (
                        header.value == "application/x-www-form-urlencoded" ||
                        /application\/json/.test(header.value) ||
                        /application\/javascript/.test(header.value) ||
                        /text\/javascript/.test(header.value)
                ))
                );
            });

        if (isXHR) {
            chrome.extension.sendMessage({
                type: MSG_TYPE.AJAX_DEBUGGER_SWITCH
            }, function (debuggerSwitchOn) {
                // 开关
                if (debuggerSwitchOn) {
                    analyticRequest(request);
                }
            });
        }

    });

})();