如何检查通过 Chrome devtools 中的 window.history.pushState() 存储的状态对象？答案

【问题标题】：How to inspect the state object stored via window.history.pushState() in Chrome devtools?如何检查通过 Chrome devtools 中的 window.history.pushState() 存储的状态对象？
【发布时间】：2020-02-25 16:17:06
【问题描述】：

状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史条目。

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

是否可以使用 Chrome 开发工具检查此状态对象的内容？

【问题讨论】：

标签： google-chrome-devtools

【解决方案1】：

state 对象是history 对象的属性。您可以通过以下方式在控制台中访问它：

window.history.state

示例

每次弹出历史堆栈时记录

方法一：

var back = window.history.back;

window.history.back = function() {
    console.log("location: " + document.location + ", state: " + 
        JSON.stringify(window.history.state));

    return back.apply(this, arguments);
}

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.pushState({page: 3}, "title 3", "?page=3");
history.pushState({page: 4}, "title 4", "?page=4");

方法二：

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + 
      JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.pushState({page: 3}, "title 3", "?page=3");
history.pushState({page: 4}, "title 4", "?page=4");

第二个不记录当前状态，所以你必须先这样做。

出于安全原因，无法查看历史堆栈。

【讨论】：

我可以轻松查看其他历史步骤的所有其他状态吗？
@daniel.sedlacek 出于安全原因，您无法查看堆栈中的所有先前状态。您可以编写一些代码来在每次弹出时将状态对象记录到控制台。请参阅我的更新答案。
这就是为什么我希望堆栈可以在开发工具中访问，而不是通过控制台中的 JS。不过谢谢你的回答。