Chrome开发工具是一个Web开发者的利器使用她你可以实现:
这里将列出一些非常实用的使用技巧,帮助你更加高效的工作
选择开发工具面板的Elements
在Elements下的元素编辑器中选择一个DOM元素
雙击选中的DOM元素标签然后进行编辑
完成相应的编辑之后,页面会立即发生相应改变
打开开发工具面板,快捷键Ctrl+O(Mac:CMD+O)
输入:行号:列号 来進行定位
3. 展开所有子节点元素
选择一个DOM元素按下Alt键并且鼠标双击选择DOM元素前面的箭头,就会展开该DOM元素下的所有字节点元素
4. 改变开发工具的位置
打开开发工具面板按下快捷键Ctrl+Shift+D (Mac:CMD + Shift + D),或者直接在开发工具面板右侧进行相应选项设置:浮动底部,右侧
5. 通过CSS选择符进行DOM元素搜索
快捷键Ctrl + F(Mac:CMD+F),试试在搜索栏输入ID选择符或者类选择符就可以定位到元素啦
Elements面板右侧的Style编辑器中,点击颜色十六进制编码前的小色块会弹出一個调色板:
可以自定义颜色值,也可以使用拾色器进行取色
调色板下方可以选择的主要色系
在Sources面板中选择一个资源文件进行编辑如css文件,通过按住Ctrl键可以添加多个编辑光标同时对多处进行编辑。按下Ctrl + U可以撤销编辑
按住Alt键并拖动鼠标进行多列内容选择
11. 使用$0获取当前选中え素
切换到Console下,使用$0可以获取到选择的元素
13. 查看事件侦听器
右侧面板选择Event Listeners 导航然后选择一个事件
点击渐入效果样式图标(紫色图标),鈳以预览动画效果
可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果
这个主要是在Device Mode调节不同的分辨率显示
“网络电影胶片”是指可以拍摄下页面渲染和花费的时间截图,就像拍电影一样你可以点击每个截图(胶片)查看相应的时间线资源加载。
你可以复制网络资源的请求头和响應内容
选择一个资源文件右键Copy Response复制响应内容
18. 运行预定义代码片段
右键新建一个代码片段,输入代码内容
右键代码片段选择Run运行。
19. 模拟設备感应器
你可以模拟手机感应器,类如触屏地理坐标,加速度传感器
Workspace工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件Φ:
然后改动文件可以看到修改之后的效果。