如何通過控制檯識別PushState URL更新？

Question

如果有一種方法使用console/inspect-element/dev-tools來確定URL是否已通過PushState進行更新，請您能提供建議嗎？

例如，如果我去http://html5.gingerhost.com/並點擊「Seatle」，「London」&「紐約」，那麼我知道它是通過PushState更新的，但是我怎麼能通過控制檯'知道'？

正在開發的網站使用的是PushState &的替換狀態，我希望能夠在開發工具控制檯中看到它們。

Answer 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']);