直接在页面的 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方法发送请求到服务器。
})();
立即执行函数表达式的结束标志。