关闭

google chrom 开发工具选项快捷操作

标签: 网页开发google chromecsshtml
604人阅读 评论(0) 收藏 举报
分类:

转载:https://segmentfault.com/a/1190000003985909

Chrome开发工具是一个web开发者的利器,使用她你可以实现:

  • 管理界面元素

  • 断点调试JavaScript代码

  • 优化你的代码

这里将列出一些非常实用的使用技巧,帮助你更加高效的工作

1. 快速编辑HTML元素

  • 选择开发工具面板的Elements

  • Elements下的元素编辑器中选择一个DOM元素

  • 双击选中的DOM元素标签,然后进行编辑

完成相应的编辑之后,页面会立即发生相应改变。

2. 快速定位到行

  • 打开开发工具面板,快捷键Ctrl+O (Mac:CMD+O)

  • 输入:行号:列号 来进行定位

3. 展开所有子节点元素

  • 选择Elements面板

  • 选择一个DOM元素,按下Alt键并且鼠标双击选择DOM元素前面的箭头,就会展开该DOM元素下的所有字节点元素

4. 改变开发工具的位置

打开开发工具面板,按下快捷键Ctrl+Shift+D (Mac:CMD + Shift + D),或者直接在开发工具面板右侧进行相应选项设置:浮动,底部,右侧

5. 通过CSS选择符进行DOM元素搜索

快捷键Ctrl + F(Mac:CMD+F),试试在搜索栏输入ID选择符或者类选择符就可以定位到元素啦

6. Material风格和自定义调色板

Elements面板右侧的Style编辑器中,点击颜色十六进制编码前的小色块,会弹出一个调色板:

  • 可以自定义颜色值,也可以使用拾色器进行取色

  • 调色板下方可以选择Material Design的主要色系

7. 多光标

Sources面板中选择一个资源文件进行编辑,如css文件,通过按住Ctrl键可以添加多个编辑光标,同时对多处进行编辑。按下Ctrl + U可以撤销编辑。

8. 获取图片的Data URI

  • 选择Network面板

  • 选择一张图片,在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)

9. 触发伪类

  • Elements面板右键执行DOM元素节点,选择Force Element State

  • 或者,点击右侧Toggle Element State图标

10. 多列内容选择

  • 选择Sources面板

  • 选择一个资源文件

  • 按住Alt键并拖动鼠标进行多列内容选择

11. 使用$0获取当前选中元素

  • Elements面板下选择一个DOM元素

  • 切换到Console下,使用$0可以获取到选择的元素

12. 元素展示

  • Console面板中获取指定内容,比如:document.getElementById('xxx')

  • 选择内容右键,选择Reveal in Elements Panel

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

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


0
0
查看评论

Google浏览器开发者工具 快捷键

google浏览器给我们提供了一些工具,这些工具可以很方便的让我们查看在http请求过程当中的一些协议信。 快捷键:Ctrl + Shift + I 在Network栏可以查看协议信息,效果如下:
  • u014434080
  • u014434080
  • 2016-03-08 20:29
  • 1030

google chrome 开发工具选项(一)

转载自:http://selfboot.cn/2014/09/19/chrome_DevTools_1/ 这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了。其实其他浏览器也有类似工具,比如Fir...
  • u014689510
  • u014689510
  • 2016-05-31 08:52
  • 991

Google主推-Android开发利器——Android Studio,这可能是最全的AS教程!

“工欲善其事必先利其器” 作为一个Android开发人员来说,一款好的开发工具也是相当重要的,在相当长的时间礼,Google都是基于Eclipse以ADT插件的形式来开发Android应用的,Eclipse可谓是经典到不能再经典的开发工具了,他几乎什么都可以干,也应用很广泛,三十由于近几年来Andr...
  • qq_26787115
  • qq_26787115
  • 2015-12-09 22:22
  • 5197

Google Chrome 常用快捷键

Chrome 常用快捷键
  • Tom_Green
  • Tom_Green
  • 2016-12-13 10:38
  • 1374

初识基于 Web 的可视化编程工具Google Blockly

Google开发发布的完全可视化的编程语言Google Blockly
  • langyuzhi
  • langyuzhi
  • 2016-08-31 19:11
  • 6675

centos 7 安装 google chrome浏览器

随便在哪个目录下新建一个脚本文件命名为install_chrome.sh 复制如下代码到install_chrome.sh: #! /bin/bash # Google Chrome Installer/Uninstaller for RHEL/CentOS 6 or 7 # (C) Richar...
  • qq_23377055
  • qq_23377055
  • 2015-04-25 11:14
  • 1578

Ubuntu 安装Google Chrom

下载google chrome deb包 32位:https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb 64位:https://dl.google.com/linux/direct/google-chrome...
  • robby_chan
  • robby_chan
  • 2013-08-28 18:18
  • 948

Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具

Android Studio重构之路,我们重新来了解一下Google官方的Android开发工具 记得我的第一篇博客就是写Android Studio,但是现在看来还是有些粗糙了,所有重构了一下思路,覆写了一篇Google主推-Android开发利器——Android Studio,这可能是最全...
  • qq_26787115
  • qq_26787115
  • 2016-06-28 10:27
  • 4217

google chrom 导入/同步书签

1:google chrome 导入书签          2: 同步书签 到google 账户上去:   (apple+,--》 高级 )
  • greenbird811
  • greenbird811
  • 2012-05-03 15:31
  • 820

download Google Chrome for Linux

download Google Chrome for Linux
  • ztguang
  • ztguang
  • 2016-10-14 09:09
  • 663
    个人资料
    • 访问:45806次
    • 积分:568
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:15篇
    • 译文:0篇
    • 评论:4条
    最新评论