谷歌浏览器开发者工具的快捷键详解

原文: http://www.cnblogs.com/wangzhenhai/p/6531756.html

本页介绍 Chrome DevTools 中所有键盘快捷键的参考信息。一些快捷键全局可用,而其他快捷键会特定于单一面板。

您也可以在提示中找到快捷键。将鼠标悬停在 DevTools 的 UI 元素上可以显示元素的提示。 如果元素有快捷键,提示将包含快捷键。

访问 DevTools
在这里插入图片描述

全局键盘快捷键

下列键盘快捷键可以在所有 DevTools 面板中使用:
在这里插入图片描述

按面板分类的键盘快捷键

Elements
在这里插入图片描述
Styles 边栏
Styles 边栏中可用的快捷键:


Sources
在这里插入图片描述
在代码编辑器内

Timeline
在这里插入图片描述
Profiles
在这里插入图片描述
控制台
在这里插入图片描述
Device Mode
在这里插入图片描述
抓屏时

检查元素工具|Ctrl + Shift + C|Cmd + Shift + C
本文参考:https://developers.google.com/web/tools/chrome-devtools/shortcuts?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

表示感谢!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
谷歌浏览器开发工具是Google Chrome浏览器中内置的一组网页制作和调试工具,它为网页开发人员提供了访问浏览器及其网页应用程序内部的深入访问。开发工具可以帮助开发人员有效地跟踪布局问题,设置JavaScript断点,并获得代码优化的见解。你可以通过在Chrome菜单中选择更多工具>开发工具,或者使用快捷键Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)来打开开发工具开发工具包含多个面板,其中一个主要是记录网站加载的所有资源信息,包括存储数据、缓存数据、字体、图片、脚本、样式表等。\[1\]\[2\]此外,开发工具还提供了其他功能,如抓包、弱网设置和录制自动化脚本等。\[3\] #### 引用[.reference_title] - *1* *2* [Chrome开发工具](https://blog.csdn.net/qinyuhua93/article/details/88016123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Chrome浏览器开发工具使用](https://blog.csdn.net/weixin_49026134/article/details/125347640)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值