经常需要在不清楚代码具体情况下，需要在某个时间节点debug住，查找调用栈，查找响应函数调用关系，比如DOM某个属性的更改，alert弹窗的调用，某个cookie字段的写入。

1 devtool提供了debug时机

image.png

2 借助油猴插件

2.1 找到alert调用

重写alert方法，并插入debug

  1. // ==UserScript==
  2. // @name         debugger-alert
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  try to take over the world!
  6. // @author       You
  7. // @match        https://www.baidu.com/home-header2.html
  8. // @grant        none
  9. // ==/UserScript==
  11. (function() {
  12.     'use strict';
  13.     // Your code here...
  16.     var originAlert = window.alert; // 首先记录原生的alert
  17.     window.alert = function (text) { // 用我们带断点的alert覆盖window.alert
  18.         debugger;
  19.         return originAlert.call(window, text);
  20.     };
  22. })();

设置已进入就加载油猴脚本
image.png
在对应网页就可以使用
image.png

跳过alert

window.alert=function(){}

2.2 找到更改cookie

参考：怎么找出js里面改变cookies的代码？
同样是重写document.cookie来截获

  1. var _cookie = document.__lookupSetter__('cookie');
  2. document.__defineSetter__("cookie", function(c) {
  3.   debugger; //console.log(c); //或dispatch事件
  4.   _cookie=c;
  5. } );
  6. document.__defineGetter__("cookie", function() {return _cookie;} );

2.3 监听url变化（pushstate or replacestate）

  1. // Add this:
  2. var _wr = function(type) {
  3.     var orig = history[type];
  4.     return function() {
  5.         var rv = orig.apply(this, arguments);
  6.         var e = new Event(type);
  7.         e.arguments = arguments;
  8.         window.dispatchEvent(e);
  9.         return rv;
  10.     };
  11. };
  12. history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');
  14. // Use it like this:
  15. window.addEventListener('replaceState', function(e) {
  16.     console.warn('THEY DID IT AGAIN!');
  17. });