如何通过控制台识别 PushState URL 更新？

【问题标题】：How to identify a PushState URL update via Console?如何通过控制台识别 PushState URL 更新？
【发布时间】：2014-08-27 15:58:50
【问题描述】：

如果有一种方法可以使用 console/inspect-element/dev-tools 来确定 URL 是否已通过 PushState 更新，请您告诉我？

例如，如果我转到 http://html5.gingerhost.com/ 并在“西雅图”、“伦敦”和“纽约”之间单击，那么我知道它正在通过 PushState 进行更新，但是我如何通过控制台“知道”？

一个正在开发的网站正在使用 PushState 和 ReplaceState 的组合，我很想能够在开发工具控制台中看到它们。

【问题讨论】：

标签： javascript pushstate history.js

【解决方案1】：

这仅用于调试目的，但您可以使用自己的 API 覆盖默认 API。

调试历史事件的快速而简单的方法：

(function(window, listenTo) {
    var history = window.history;
    // replaces default APIs with function that also logs the arguments
    listenTo.forEach(function(key) {
        var original = history[key];
        history[key] = function() {
            console.log('history.' + key, arguments);
            original.apply(history, arguments);
        };
    });
    // add a listener to the popstate event for debugging purposes
    window.addEventListener('popstate', function() {
        console.log('onpopstate', arguments);
    });
})(window, ['pushState', 'replaceState']);

【讨论】：