1. 使用开发者工具查看dom节点的监听函数

    1. 使用console查看
1
2
3
4
5
6
7
1. let btn = $('.btn')[0];//获取类名为btn的dom节点

2. let listeners = getEventListeners(btn);//获取btn的事件监听函数

3. debug（listeners.click[0].listen);//设置打断

4. btn.click();//触发点击事件


![查看节点监听函数](/images/chrome/get-debug-event-listeners.gif)

2. 使用eventListeners

  1. 快速改变css的数字值

    1. up/ctrl+鼠标滚轮:整数1;

    2. alt+up/alt+鼠标滚轮:小数1;

    3. shift+up/shift+鼠标滚轮：整数10;

      css样式数字值快速变化

  2. 设置条件断点

    设置条件断点

  3. 在source panel中快速选择多个同样的词

    ctrl+d

    快速选择多个同样的词

  4. 添加移动设备

    添加移动设备

  5. 使用console.trace()

    查看代码的执行流程。可以点击跳转到相应的代码处。

    console.trace()

  6. 过滤资源

    1. large-than

    2. status-code

    3. mime-type

    4. method

    5. -larger-than

      过滤资源

  7. 搜索特定项

    1. item

    2. item file:main.js

      搜索特定项

  8. 粘贴复制dom节点

    粘贴复制dom节点

  9. 使用console修改节点

    使用console修改节点

  10. 禁用css和js查看页面

    禁用css和js查看页面

  11. 调整动画效果

    示例网站

    调整动画效果

  12. 查看jQuery监听函数定义

    查看jQuery监听函数定义

  13. 查看请求优先级

    shift+hover

    1. 红色表示这些request是由当前request发出的请求;

    2. 绿色表示当前request是由绿色request发出的请求;

    3. 右键调出 priority 一栏，显示请求的优先级。

    查看请求优先级

  14. 使用style中的工具添加背景颜色和字体颜色——感觉没什么卵用

    使用style中的工具添加背景颜色和字体颜色

  15. 在console中隐藏不用的 error , warning

    在console中隐藏不用的error,warning

  16. 在style中长hover定位元素

    在style中长hover定位元素

  17. 使用console.table显示对象或数组

    console.table

  18. 使用console.time显示经历时长

    console.time

  19. 启闭元素的类

    启闭元素的类

  20. 使用google搜索矿搜索github

    git+tab

  21. 查看资源是如何加载的

    查看资源加载

  22. ctrl+shift+p调出命令菜单

  23. 将动画输出到console

    支持的操作：

    1. temp1.play() - Starts playing an animation.

    2. temp1.pause() - Pause the playing animation.

    3. temp1.reverse() - Play an animation backwards.

    4. temp1.playbackRate - Get or set the playback rate of the animation.

    动画输出到console