chrome开发者小工具

1关于Console中的技巧

你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件，比如mouseover。click这些。

2选择Elements面板中的一个事件。

在弹出的Elements视图的控制台，右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了，点开后，找到handler，右击鼠标，选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置

3格式化和把修改的内容保存到工作空间：

4监听动画效果：

5在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy = Copy as cURL，然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

6抓个带手机的图在device显示中，先选择一个手机，然后在右上角选 Show Device Frame，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。

7在console面板里面document.designMode="on"，你就可以直接修改网页上的内容了。

8.在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy = Copy as cURL，然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。