FeHelper/v2.0/apps/ajax-debugger/index.js

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

    let MSG_TYPE = Tarp.require('../static/js/core/msg_type');

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

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

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

        return that;
    })();

    /**
     * 分析Request
     * @param request
     */
    let analyticRequest = function (request) {
        let 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;

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

        let requestPath = '/' + (url.split('?') || [''])[0].replace('://', '').split('/').splice(1).join('/');
        let 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;
                }
            }

            let 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) {

        let reqUrl = request.request.url.split('?')[0];
        if (/\.js$/.test(reqUrl)) {
            return false;
        }
        let 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) {
                debuggerSwitchOn && analyticRequest(request);
            });
        }

    });

})();