debugger.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /**
  2. * Ajax接口调试功能
  3. *
  4. * 原理:
  5. *
  6. * devtools → background-page → content-page → console.*
  7. *
  8. * @author [email protected]
  9. */
  10. var AjaxDebugger = (function () {
  11. /**
  12. * 自定义Console
  13. */
  14. var FeHelperConsole = (function () {
  15. var Types = 'log,debug,info,warn,error,group,groupCollapsed,groupEnd'.split(',');
  16. var sendMessage = function (type, format, args) {
  17. chrome.extension.sendMessage({
  18. type: MSG_TYPE.AJAX_DEBUGGER_CONSOLE,
  19. content: escape(JSON.stringify(Array.prototype.slice.call(arguments, 0)))
  20. });
  21. };
  22. var that = new Function();
  23. Types.forEach(function (tp) {
  24. that[tp] = sendMessage.bind(that, tp);
  25. });
  26. return that;
  27. })();
  28. /**
  29. * 分析Request
  30. * @param request
  31. */
  32. var analyticRequest = function (request) {
  33. var url = request.request.url || "",
  34. urlSeparator = (url.indexOf("?") > -1) ? "&" : "?",
  35. requestParams = (request.request.postData && request.request.postData.params) || [],
  36. responseStatus = request.response.status + " " + request.response.statusText,
  37. responseSize = request.response.bodySize + request.response.headersSize;
  38. var queryString = '';
  39. requestParams.forEach(function (param, index) {
  40. queryString += (index == 0 ? urlSeparator : '&') + param.name + '=' + param.value;
  41. });
  42. var requestPath = '/' + (url.split('?') || [''])[0].replace('://', '').split('/').splice(1).join('/');
  43. var responseTime = request.time > 1000 ? Math.ceil(request.time / 1000) + 's' : Math.ceil(request.time) + 'ms';
  44. responseSize = responseSize > 1024 ? Math.ceil(responseSize / 1024) + 'KB' : Math.ceil(responseSize) + 'B';
  45. // 获取Response的数据
  46. request.getContent(function (content, encoding) {
  47. if (content) {
  48. try {
  49. request.response.responseData = JSON.parse(content);
  50. }
  51. catch (e) {
  52. request.response.responseData = content;
  53. }
  54. }
  55. var header = "Ajax请求加载完毕 (" + [requestPath, responseStatus, responseTime, responseSize].join(" - ") + ") " + ' -- By FeHelper';
  56. FeHelperConsole.group(header);
  57. FeHelperConsole.log('AjaxURL :', {url: url + queryString});
  58. FeHelperConsole.log("Request :", {request: request.request});
  59. FeHelperConsole.log("Response :", {response: request.response});
  60. FeHelperConsole.log("OtherInfo:", {
  61. timeConsuming: responseTime,
  62. timings: request.timings,
  63. time: request.startedDateTime,
  64. server: request.serverIPAddress
  65. });
  66. FeHelperConsole.groupEnd();
  67. });
  68. };
  69. /**
  70. * 监控Network中的请求
  71. */
  72. chrome.devtools.network.onRequestFinished.addListener(function (request) {
  73. var reqUrl = request.request.url.split('?')[0] ;
  74. if (/\.js$/.test(reqUrl)) {
  75. return false;
  76. }
  77. var isXHR = /\.json$/.test(reqUrl) || (request.request.headers.concat(request.response.headers)).some(function (header) {
  78. return (
  79. (header.name == "X-Requested-With" && header.value == "XMLHttpRequest") ||
  80. (header.name == "Content-Type" && (
  81. header.value == "application/x-www-form-urlencoded" ||
  82. /application\/json/.test(header.value) ||
  83. /application\/javascript/.test(header.value) ||
  84. /text\/javascript/.test(header.value)
  85. ))
  86. );
  87. });
  88. if (isXHR) {
  89. chrome.extension.sendMessage({
  90. type: MSG_TYPE.AJAX_DEBUGGER_SWITCH
  91. }, function (debuggerSwitchOn) {
  92. // 开关
  93. if (debuggerSwitchOn) {
  94. analyticRequest(request);
  95. }
  96. });
  97. }
  98. });
  99. })();