How to inspect the state object stored via window.history.pushState() in Chrome devtools?

Question

The state object is a JavaScript object which is associated with the new history entry created by pushState().

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

Is it possible to inspect the content of this state object with Chrome devtools?

Answer 1

The state object is a property of the history object. You can access it in the Console with:

window.history.state

Example

Log each time you pop off the history stack

Method 1:

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");

Method 2:

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");

This second one doesn't log the current state so you have to do that first.

It's not possible to peek through the history stack for security reasons.