Chrome Devtools 技巧

Console 中的一些函数

1. monitor: 使用monitor函数来监控函数，如：
2. unmonitor: 停止监控指定函数
3. copy: copy 函数可以把变量的值复制到剪贴板上
4. inspect: inspect函数可以让你控制台跳到需要查看的DOM对象上
5. debug: 调用指定函数时，将触发调试程序，并在Sources面板上使函数内部中断。debug(jQuery.Animation)
6. undebug: 停止函数中断
7. getEventListeners(object): 用来查看对象上注册的事件监听器，返回一个对象， 包含每个注册的事件类型数组
8. monitorEvents(object[,events]): 监控相关事件。 当指定对象上发生一个指定事件时，将Event对象输出到控制台
9. unmonitorEvents(object[,events])： 可停止对指定对象的指定事件监控。
10. queryObjects: 查询存在内存中的类型实例

下面是我日常使用的调试函数

1. observeFocus(): 观测焦点变动，用于定位改变焦点的源代码

   (() => {
   window.focusStack = [];
   window.observeFocus = () => {
       if(window.unobserveFocus) {
           window.unobserveFocus();
       }
       const onfocusOptions = {
           capture: true
       };
       document.addEventListener('focus', onfocus, onfocusOptions);
   
       function onfocus() {
           // debugger;
           console.trace(document.activeElement);
           const last = window.focusStack[focusStack.length - 1];
           if(last !== document.activeElement) {
               window.focusStack.push(document.activeElement);
           }
       }
       window.unobserveFocus = () => {
           document.removeEventListener('focus', onfocus, onfocusOptions)
       };
   };
   })()
   

2. observePropertiesChange(object, properties, breakpoint = false): 对象属性值变更时输出堆栈信息或打断点

   window.observePropertiesChange = (object, properties, bp = false) => {
     c  onst originalDescriptors = properties.map(it => {
           return [it, Object.getOwnPropertyDescriptor(object, it)];
       });
       Object.defineProperties(object, properties.reduce((desc, key) => {
           let value = object[key];
           desc[key] = {
               get: () => {
                   return value;
               },
               set: newValue => {
                   if(bp) {
                       debugger;
                   } else {
                       console.trace('value changed', {
                           object, key, value, newValue
                       });
                   }
                   value = newValue;
               }
           };
           return desc;
       },{}));
       return ()=> {
           originalDescriptors.forEach(([key, desc]) => {
               Object.defineProperty(key, desc);
           });
       };
   }
   

3. 阻止事件冒泡或阻止默认行为时输出堆栈信息或打断点

   window.detectPreventDefault = function(type, bp = false){
       const method = 'preventDefault';
       switch(type) {
           case 'key':
               return debugOn(KeyboardEvent.prototype, method, bp);
           case 'mouse':
               return debugOn(MouseEvent.prototype, method, bp);
           case 'touch':
               return debugOn(TouchEvent.prototype, method, bp);
           case 'pointer':
               return debugOn(PointerEvent.prototype, method, bp);
       }
   }
   window.detectStopPropagation = function(type, bp = false){
       const method = 'stopPropagation';
       switch(type) {
           case 'key':
               return debugOn(KeyboardEvent.prototype, method, bp);
           case 'mouse':
               return debugOn(MouseEvent.prototype, method, bp);
           case 'touch':
               return debugOn(TouchEvent.prototype, method, bp);
           case 'pointer':
               return debugOn(PointerEvent.prototype, method, bp);
       }
   }
   
   window.debugOn = function(target, name, bp) {
       const originDescriptor = Object.getOwnPropertyDescriptor(target, name);
       const origin = target[name];
       Object.defineProperty(target, name, {
           value: function(...args){
               if(bp) {
                   debugger;
               } else {
                   console.trace(target, name);
               }
               return origin.apply(this, args);
           },
           enumerable: true,
           writable: false,
           configurable: true
       });
       return () => {
           Object.defineProperty(target, name, originDescriptor)
       };
   }