Chrome操作指南——入门篇(四) command

简介: Chrome操作指南——入门篇(四) command

前言


用过vscode中的Command Palette的同学肯定能够体会到,通过键入相应的指令就可以执行相应的操作,是多么一键美妙的事情。而在chromedevtool中也有类似的功能,里面提供大量的指令,并且分成了几个模块,某些你可能需要软件实现的操作,通过一个指令就可以做到,可以说是非常强大,下面我就分享几个有意思的小指令。


Run command


打开devtool后:


  • 通过ctrl + shift + p即可打开(或者 点击devtool菜单栏右侧的 -> run conmmand 选项)
  • command分类:Panel 、 Drawer 、 Appearance 、 Console 、 Debugger 、 Elements 、 Global 、 Grid 、 Help 、 Mobile 、 Navigation 、 Network 、 Performance 、 Rendering 、 Resources 、 Screenshot 、 Sensors 、 Settings 、 Sources


image.png


  • 你可以通过键入相应的模块名称来查看对应的指令


截屏


有时候我们需要对整个页面进行截图的和,可能要下载个工具麻烦半天。但在 command中只需要一行指令即可完成。


  • 键入mobile,我们可以看到有三个相应的指令


image.png


  • capture full size screenshot:截取整个页面。
  • capture node screenshot:截取当前选取节点的页面。
  • capture full size screenshot:截取当前页面。


切换面板布局


elements的面板布局默认是根据屏幕的宽度来自动变换的。但有时候我们想把它固定住,不想让他自动变换,这个时候就可以通过相应的指令来做到。


image.png


  • use horizontal pannel layout: 水平布局
  • use vertical pannel layout: 垂直布局
  • use automatic pannel layout: 自动布局(默认)


主题切换


我猜大部分前端开发者的编辑器都是深色配色,但chromedevtool确是白色的,每次切换的时候,都会很不适应,这个时候如果devtool也可以调成深色的话,那就再好不过了,好在我们可以指令实现这个操作。


image.png


还是在appearance模块,我们可以通过 switch to dark theme 切换到深色配色。


image.png

相关文章
|
3月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
4月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
6月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
137 2
|
6月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
452 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
119 0
|
Web App开发 SQL 存储
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
|
Web App开发 存储 前端开发
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
Chrome操作指南——入门篇(二)
|
Web App开发 开发者
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
|
2月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
434 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率