你真的会使用Chrome开发者工具吗（二）

继续上篇：你真的会使用Chrome开发者工具吗（一）

13. 查看事件侦听器

• 选择Elements面板

• 右侧面板选择Event Listeners 导航，而后选择一个事件

• 对事件鼠标右键选择Show Function Definition，可定位到事件的函数定义

14. CSS3(Easing)渐入动画效果预览

• 点击渐入效果样式图标（紫色图标），能够预览动画效果

• 可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果

15. 媒体查询

这个主要是在Device Mode调节不一样的分辨率显示。

16. 网络电影胶片

“网络电影胶片”是指能够拍摄下页面渲染和花费的时间截图，就像拍电影同样，^_^
你能够点击每一个截图（胶片）查看相应的时间线资源加载

操做方式：

• 选择Network面板

• 点击打开摄像机图标

• 从新加载页面

17. 复制响应(Response)内容

你能够复制网络资源的请求头和响应内容

• 选择Network面板

• 选择一个资源文件，右键Copy Response复制响应内容

18. 运行预约义代码片断

• 打开选择Sources面板，左侧选择导航菜单Snippets

• 右键新建一个代码片断，输入代码内容

• 右键代码片断，选择Run运行。

19. 模拟设备感应器

你能够模拟手机感应器,类如触屏，地理坐标，加速度传感器

• 选择Elements

• 按 Esc键 ，选择Emulation > Sensors进行操做

20. 工做空间

Workspace 工具就能帮助咱们把调试工具中修改的内容自动保存到相应的文件中：

• 选择Sources面板

• 在Sources面板中右键Add Folder to Workspace，添加相应的本地保存路径

• 选择你须要修改的文件，右键选择Map to Network Resources

• 而后改动文件，能够看到修改以后的效果。