你真的会使用Chrome开发者工具吗(二)

hhhaze

继续上篇:你真的会使用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

  • 然后改动文件,可以看到修改之后的效果。

阅读 5.5k

A collection of useful article
A collection of useful article

take(action);

586 声望
5 粉丝
0 条评论
你知道吗?

take(action);

586 声望
5 粉丝
宣传栏