来源:w3cplus - 南北(@ping4god)
网址:http://www.w3cplus.com/tools/dev-tips.html
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用console
和debugger
在线编辑CSS。在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程。
通过 console
面板修改页面元素及元素内容:
- 获取元素节点
- 右键选择
Edit as HTML
或者Edit Text
- 修改后的内容会实时反映在页面和
Elements
面板上
inspect()
/ copy()
/ values()
和 Ctrl + L
- 在
console
面板使用inspect(elem)
跳转到elements
面板的指定元素节点 - 在
console
面板使用copy(values)
将数据复制到剪贴板 - 在
console
面板使用values(object)
获取对象的所有属性值,返回数组 - 使用
Ctrl + L
清空当前的console
面板
JS 文件打开和文件内的快速跳转
- 在
Sources
面板使用CMD + O
快捷键打开搜索框 - 搜索框下会提示当前页面的涉及的 JS 文件,输入文件名即可打开
- 如果输入
:5:9
,则表示跳转到文件的第五行第九个字符
在 Sources
面板使用使用 Alt + -
和 Alt + =
可以在上一个鼠标位置和下一个鼠标位置之间跳转
在 Elements
面板使用 CMD + F
打开搜索框,除了常规字符串还可以使用选择器来选择 HTML 元素
在预览图片上右键选择 copy image as Data URI
,可以将图片转换为 base64 编码
使用 CMD + Click
可以在文件中创建多个编辑点,使用 CMD + U
可以取消最后一处编辑点
按住 Alt
键然后选择文件内容,可以创建一个矩形选区
在 Network
面板的 filter 输入框输入 Is:running
指令可以查看正在进行中的网络请求
在 Elements
面板右侧的 Event Listeners
选项卡中,在绑定的事件上右键可以跳转到相应的 JS 代码上
有时候我们需要在以匿名模式打开链接,现在 Chrome 可以在你匿名打开的时候仍然保持同样的开发者工具状态,比如相同的工具栏位置、大小、面板布局、设置信息等等
在 Console
面板中使用 getEventListeners(node)
函数可以获取当前节点绑定的事件,返回一个数组
在 Elements
面板中,右键点击内联的 JS 或者 CSS 路径,选择 open
可以在 Sources
面板中打开相应的文件
数值调整快捷键
-
Up / Down
,增加或减少 1 单位 -
Shift + Up / Down
,增加或减少 10 单位 -
Alt + Up / Down
,增加或减少 0.1 单位 - 鼠标滚轮
使用 CMD + [ or ]
可以循环切换开发者工具的各个面板
为 JS 代码设置条件断点,该断点只在条件满足时触发
在 JS 文件中选中一段代码,通过 Ctrl + Shift + E
可以在 Console
面板中运行这段代码
将开发者工具从浏览器独立出来之后,使用 CMD + Alt + i
将创建另一个开发者工具,该工具可以用于修改第一个开发者工具的样式
使用 console.trace()
可以追踪代码执行过程中的栈信息
在 Timeline
面板中会有一些帧使用红色突出显示,这是因为这些帧值得引起开发者注意,它们的渲染时间通常超过了 18ms。点击这些红色的帧,即可查看相应的警告信息。通常认为每秒渲染 60 帧的页面是流畅的,这就要求每一帧的渲染不能超过 16ms。
在 Canary 版的开发者工具中,提供了一个隐藏的布局编辑器
在 Sources
面板中使用 CMD + Opt + F / Ctrl + Shift + F
可以搜索所有文件的信息
使用 Tab
键可以在 CSS 样式规则中进行遍历选定,选定的目标包括:选择器、属性和属性值。如果想跳回上一个目标,使用Shift + Tab
使用 Up / Down
快捷键可以修改 DOM 元素属性中的数值。
调节 DOM 元素样式
在 Console
面板中提供了一系列的筛选器,用于过滤特定信息,比如 Handled
过滤器可以用来捕获 Promises 的 reject 状态
使用 console.time('sign string')
和 console.timeEnd('sign string')
获取中间的间隔时间
使用 console.table(arr)
输出数组数据
在 Canary 版本中,如果鼠标长时间悬停在某个选择器上,左侧的 Elements 面板会高亮显示匹配的 DOM 元素区域
手动阻塞 URL 的加载,用于测试资源获取失败的页面效果
在 Canary 版本中的 Timeline 面板新增了一个 Constly Functions 模块,用于记录四个方面的性能表现:Painting / Rendering / Scripting / Network activity
通过拖拽重排开发者工具上的面板顺序
Elements
面板跟随鼠标悬停目标显示不同的 DOM 元素
使用 animation 检查器可以检查运行中的 CSS 动画属性
可视化资源依赖关系:绿色资源为初始化资源,红色资源由绿色资源引入
相关推荐
Chrome 开发者工具中文手册
谷歌调试移动端工具chrome-inspect离线开发者工具包@194530_@196351.rar
Chrome开发者工具的功能很强大,要了解其所有功能最好是查看官方文档,但我们访问官方文档并不是很方便,因此这里将官方的英文文档打包成了CHM格式,可以下载到本机方便查阅,为了在CHM阅读器中接近原文显示效果和不...
chrome浏览器-vue开发者工具
彻底禁用Chrome插件停用开发者模式提示插件,下载后将dll文件放在和Chrome.exe同目录然后重启浏览器即可。
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!
这是vue3的开发者工具。使用:解压,然后拖拽到浏览器开发者工具里面即可
Chrome开发者工具指南.介绍Chrome开发。特么利于前端开发
通过Chrome开发者工具调试Django应用
chrome控件F12开启开发者模式,十分方便的调试工具使用教程
Google Chrome 开发者版.zip
apollo-client-devtools, Chrome 客户端开发者工具的扩展 阿波罗客户端 Devtools下载下载 Chrome | 下载 Firefox 。这里存储库包含用于 Chrome & Firefox的Apollo DevTools扩展。如果你运行的是rpg客户端 2.0,那么...
开发者工具Sublime Text、chrome.docx
该工具为windows系统下Chrome浏览器伪装android浏览器和iphone浏览器的dll文件,覆盖相应的dll到chrome相应的dll目录下即可,可以伪装成手机浏览器访问网页,可应用web开发者调试网页。
Vue开发者工具,Chrome插件。源码打包的版本v6.1.4。教程地址https://blog.csdn.net/hskjshs/article/details/124116775
chrome canary 开发者专用专用专用~
使用快捷键 F12 调出开发者工具,你也可以右击鼠标,然后找到检查元素,进入开发者工具 使用快捷组合键 Ctrl+shift+P ,打开一个可以输入命令查找文件的窗口 然后输入: Capture full size screenshot ,意思是...
永久使用浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码
最新微信小程序开发工具。微信web开发者工具是一款...微信web开发者工具采用的是集成Chrome DevTools和基本的移动调试模块,小伙伴们可以借助微信web开发者工具更方便、安全的开发或是针对调试基于微信开发的网页代码。
Stetho 调试Android应用的桥梁,使得可以利用Chrome开发者工具进行调试