Chrome审查元素快捷键使用
2017-12-23 11:43
495 查看
我们知道,Chrome浏览器中有许多实用的快捷键,而在开发者工具,即我们常说的“审查元素”功能中,也有很多快捷键,能帮大家提高效率。
![](https://imgsa.baidu.com/exp/w=500/sign=08f79012d9b44aed594ebee4831d876a/3c6d55fbb2fb4316e3cde92223a4462308f7d39c.jpg)
Chrome浏览器
1
首先,打开Chrome开发者工具,有个快捷键F12。
反复按下F12可以切换状态(打开或关闭)。
当然,你也可以在原网页,直接右击“审查元素”
![](https://imgsa.baidu.com/exp/w=500/sign=00724a426359252da3171d04049a032c/adaf2edda3cc7cd9549b9c813a01213fb80e9130.jpg)
2
或者按下快捷键组合:
Ctrl+Shift+I(进入开发者工具)
Ctrl+Shift+J (进入开发者工具,并定位到控制台Console)
Ctrl+Shift+J (进入开发者工具,或者切换审查元素的状态)
![](https://imgsa.baidu.com/exp/w=500/sign=39b0a5af9c3df8dca63d8f91fd1072bf/0e2442a7d933c895983c3323d21373f082020023.jpg)
3
同普通网页一样,我们可以通过,按下Ctrl,同时滚动鼠标滚轮,
来对开发者工具页面进行缩放。
也可以全部使用键盘快捷键来操作
Ctrl + 放大
Ctrl - 缩小
Ctrl 0 恢复默认大小
![](https://imgsa.baidu.com/exp/w=500/sign=fd9668d76f81800a6ee5890e813433d6/8694a4c27d1ed21b223abfbdae6eddc450da3ff2.jpg)
4
下面来看看如何使用快捷键在Chrome开发者工具中搜索。
Ctrl+F (在当前面板搜索)
![](https://imgsa.baidu.com/exp/w=500/sign=107781179d2f07085f052a00d925b865/91529822720e0cf3406bdda30946f21fbf09aace.jpg)
Ctrl+Shift+F (在所有面板搜索文字,支持区分大小写、正则表达式)
![](https://imgsa.baidu.com/exp/w=500/sign=292474730df41bd5da53e8f461db81a0/0b55b319ebc4b7451793244eccfc1e178a821566.jpg)
Ctrl+O(搜索文件名,包括网址)
![](https://imgsa.baidu.com/exp/w=500/sign=9cbaeaaad662853592e0d221a0ee76f2/18d8bc3eb13533fa85610376abd3fd1f40345b96.jpg)
我们来小结一下刚刚介绍的快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=b2f08345d72a283443a6360b6bb4c92e/a2cc7cd98d1001e9eba88757bb0e7bec55e797d6.jpg)
下面,我们重点介绍一下在控制台Console中的实用快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=d225cd0ed3160924dc25a21be406359b/b8014a90f603738dcdafa67ab01bb051f919ec85.jpg)
在控制台中,输入字符,可以得到Chrome的提示(列出函数名、对象名、变量名等)。
这时我们可以使用上下方向键(↑↓),来挑选。
![](https://imgsa.baidu.com/exp/w=500/sign=d57971a0a486c91708035239f93c70c6/962bd40735fae6cd3b3a3e390cb30f2443a70fdf.jpg)
如果我们输入JS代码时,需要换行,则可以按下快捷键Shift+Enter
![](https://imgsa.baidu.com/exp/w=500/sign=c6de77e0d73f8794d3ff482ee21a0ead/024f78f0f736afc32daaab3db019ebc4b64512c7.jpg)
按下回车键Enter,可以得到代码运行结果
![](https://imgsa.baidu.com/exp/w=500/sign=69112470357adab43dd01b43bbd4b36b/58ee3d6d55fbb2fbd21ecf4a4c4a20a44623dcb5.jpg)
按下Ctrl+L,可以清除控制台,保持界面清爽。
当然你也可以直接点击清空控制台的图标。
![](https://imgsa.baidu.com/exp/w=500/sign=24189b7ab01bb0518f24b328067bda77/a1ec08fa513d2697d4819f0556fbb2fb4316d81c.jpg)
甚至也可以右击控制台,点击弹出菜单中的Clear console
![](https://imgsa.baidu.com/exp/w=500/sign=3e5fe578ba12c8fcb4f3f6cdcc0292b4/72f082025aafa40f072f5985a864034f79f019f8.jpg)
在未输入代码的情况下,如果我们使用上下方向键(↑↓),可以得到我们之前在控制台中输入的一些命令。这个就很像DOS命令行中的功能。
至此,我们来总结一下Chrome浏览器中Console控制台中的常用快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=cb2994bbd639b6004dce0fb7d9513526/55e736d12f2eb93845b7edaad6628535e4dd6f94.jpg)
END
按下快捷键Ctrl+Shift+J直接进入Chrome控制台
使用某些快捷键时,需确保开发者工具已打开且激活。
![](https://imgsa.baidu.com/exp/w=500/sign=08f79012d9b44aed594ebee4831d876a/3c6d55fbb2fb4316e3cde92223a4462308f7d39c.jpg)
工具/原料
Chrome浏览器
方法/步骤
1首先,打开Chrome开发者工具,有个快捷键F12。
反复按下F12可以切换状态(打开或关闭)。
当然,你也可以在原网页,直接右击“审查元素”
![](https://imgsa.baidu.com/exp/w=500/sign=00724a426359252da3171d04049a032c/adaf2edda3cc7cd9549b9c813a01213fb80e9130.jpg)
2
或者按下快捷键组合:
Ctrl+Shift+I(进入开发者工具)
Ctrl+Shift+J (进入开发者工具,并定位到控制台Console)
Ctrl+Shift+J (进入开发者工具,或者切换审查元素的状态)
![](https://imgsa.baidu.com/exp/w=500/sign=39b0a5af9c3df8dca63d8f91fd1072bf/0e2442a7d933c895983c3323d21373f082020023.jpg)
3
同普通网页一样,我们可以通过,按下Ctrl,同时滚动鼠标滚轮,
来对开发者工具页面进行缩放。
也可以全部使用键盘快捷键来操作
Ctrl + 放大
Ctrl - 缩小
Ctrl 0 恢复默认大小
![](https://imgsa.baidu.com/exp/w=500/sign=fd9668d76f81800a6ee5890e813433d6/8694a4c27d1ed21b223abfbdae6eddc450da3ff2.jpg)
4
下面来看看如何使用快捷键在Chrome开发者工具中搜索。
Ctrl+F (在当前面板搜索)
![](https://imgsa.baidu.com/exp/w=500/sign=107781179d2f07085f052a00d925b865/91529822720e0cf3406bdda30946f21fbf09aace.jpg)
Ctrl+Shift+F (在所有面板搜索文字,支持区分大小写、正则表达式)
![](https://imgsa.baidu.com/exp/w=500/sign=292474730df41bd5da53e8f461db81a0/0b55b319ebc4b7451793244eccfc1e178a821566.jpg)
Ctrl+O(搜索文件名,包括网址)
![](https://imgsa.baidu.com/exp/w=500/sign=9cbaeaaad662853592e0d221a0ee76f2/18d8bc3eb13533fa85610376abd3fd1f40345b96.jpg)
我们来小结一下刚刚介绍的快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=b2f08345d72a283443a6360b6bb4c92e/a2cc7cd98d1001e9eba88757bb0e7bec55e797d6.jpg)
下面,我们重点介绍一下在控制台Console中的实用快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=d225cd0ed3160924dc25a21be406359b/b8014a90f603738dcdafa67ab01bb051f919ec85.jpg)
在控制台中,输入字符,可以得到Chrome的提示(列出函数名、对象名、变量名等)。
这时我们可以使用上下方向键(↑↓),来挑选。
![](https://imgsa.baidu.com/exp/w=500/sign=d57971a0a486c91708035239f93c70c6/962bd40735fae6cd3b3a3e390cb30f2443a70fdf.jpg)
如果我们输入JS代码时,需要换行,则可以按下快捷键Shift+Enter
![](https://imgsa.baidu.com/exp/w=500/sign=c6de77e0d73f8794d3ff482ee21a0ead/024f78f0f736afc32daaab3db019ebc4b64512c7.jpg)
按下回车键Enter,可以得到代码运行结果
![](https://imgsa.baidu.com/exp/w=500/sign=69112470357adab43dd01b43bbd4b36b/58ee3d6d55fbb2fbd21ecf4a4c4a20a44623dcb5.jpg)
按下Ctrl+L,可以清除控制台,保持界面清爽。
当然你也可以直接点击清空控制台的图标。
![](https://imgsa.baidu.com/exp/w=500/sign=24189b7ab01bb0518f24b328067bda77/a1ec08fa513d2697d4819f0556fbb2fb4316d81c.jpg)
甚至也可以右击控制台,点击弹出菜单中的Clear console
![](https://imgsa.baidu.com/exp/w=500/sign=3e5fe578ba12c8fcb4f3f6cdcc0292b4/72f082025aafa40f072f5985a864034f79f019f8.jpg)
在未输入代码的情况下,如果我们使用上下方向键(↑↓),可以得到我们之前在控制台中输入的一些命令。这个就很像DOS命令行中的功能。
至此,我们来总结一下Chrome浏览器中Console控制台中的常用快捷键。
![](https://imgsa.baidu.com/exp/w=500/sign=cb2994bbd639b6004dce0fb7d9513526/55e736d12f2eb93845b7edaad6628535e4dd6f94.jpg)
END
注意事项
按下快捷键Ctrl+Shift+J直接进入Chrome控制台使用某些快捷键时,需确保开发者工具已打开且激活。
相关文章推荐
- [cnblogs镜像]使用 chrome 扩展 Vimium 实现快捷键关闭其他标签页
- chrome vim插件vimnum快捷键与使用
- Chrome审查元素【Network】Preserve log
- 使用Chrome调试模式获取App混合应用H5界面元素
- CHROME审查元素如何查看hover伪类的CSS?
- Chrome 使用心得之 开发者快捷键大全V1.0
- 审查元素的使用(IE,Chromium 网页调试)
- Chrome 快捷键使用
- Chrome 的审查元素功能有哪些奇技淫巧
- chrome 快捷键使用
- Chrome 37 Beta: 使用Windows的DirectWrite和支持<dialog>元素
- chrome审查元素功能,web开发强大帮手
- chrome的跟踪调试审查元素真是好东西
- 打开了chrome审查元素 发现报错 Uncaught SyntaxError: Unexpected token )
- 使用 chrome 扩展 Vimium 实现快捷键关闭其他标签页
- chrome 审查元素 方便突破前台js障碍
- 使用chrome查看Android webView各个元素的控件方法
- Google Chrome/IE/FireFox查看HTTP请求头request header响应头response header|审查元素Network空的不显示
- Google Chrome/IE/FireFox查看HTTP请求头request header响应头response header|审查元素Network空的不显示