一个好用的打印当前 Web 应用 HTTP 请求响应头部字段的脚本

直接在页面的 Chrome 开发者工具 console 面板，执行下列 JavaScript 代码：

// showheaders.js
// https://github.com/bgrins/devtools-snippets
// Print out response headers for current URL.

(function() {

  var request=new XMLHttpRequest();
  request.open('HEAD',window.location,true);
  
  request.onload = request.onerror = function () {
    var headers = request.getAllResponseHeaders();
    var tab = headers.split("\n").map(function(h) {
      return { "Key": h.split(": ")[0], "Value": h.split(": ")[1] }
    }).filter(function(h) { return h.Value !== undefined; });

    console.group("Request Headers");
    console.log(headers);
    console.table(tab);
    console.groupEnd("Request Headers");
  };
  
  request.send(null);

})();

结果：

下面是代码的逐行讲解：

(function() {

这是一个立即执行函数表达式（Immediately Invoked Function Expression，IIFE），用于创建一个独立的作用域，避免变量污染全局作用域。

var request=new XMLHttpRequest();

创建了一个新的XMLHttpRequest对象，用于向服务器发送请求和接收服务器的响应。

request.open('HEAD',window.location,true);

通过调用open方法，配置了请求的类型（HEAD），请求的URL（使用window.location获取当前页面的URL），以及是否异步执行（true表示异步执行）。

request.onload = request.onerror = function () {

设置了请求的加载和错误事件的处理函数。

var headers = request.getAllResponseHeaders();

调用getAllResponseHeaders方法获取服务器返回的所有响应头信息。

var tab = headers.split("\n").map(function(h) {

将响应头信息根据换行符拆分成数组，并使用map方法对数组中的每个元素进行处理。

return { Key: h.split(": ")[0], Value: h.split(": ")[1] }

将每个响应头信息拆分成键值对的形式，存储在一个对象中，并返回该对象。

}).filter(function(h) { return h.Value !== undefined; });

使用filter方法过滤掉值为undefined的响应头信息对象，确保只保留有效的键值对。

console.group("Request Headers");

使用console.group方法创建一个折叠组，用于将相关信息组织在一起显示。

console.log(headers);

使用console.log方法输出服务器返回的所有响应头信息。

console.table(tab);

使用console.table方法以表格形式输出经处理后的响应头信息。

console.groupEnd("Request Headers");

使用console.groupEnd方法结束折叠组。

};

结束了请求加载和错误事件的处理函数。

request.send(null);

调用send方法发送请求到服务器。

})();

立即执行函数表达式的结束标志。