Chrome操作指南——入门篇(十三)element小技巧(上)

简介: Chrome操作指南——入门篇(十三)element小技巧(上)

前言


在element面板我们往往都是选择相应节点,对样式进行调试。不过,在这个面板中,其实还藏着一些小技巧的,让你的调试更加方便。下面我就给大家把我所收集的一一介绍下。


快速插入样式


当把鼠标放到相应的样式选择器上时,右下角会出现一个图标,移过去或出现三个按钮,可以对样式进行快速的添加。


image.png


  • Add text-shadow:添加字体阴影。


text-shadow: 0 0 black;
复制代码


  • Add box-shadow:添加盒子阴影。


box-shadow: 0 0 black;
复制代码


  • Add color:添加字体颜色。


color: black;
复制代码


  • Add background-color: 添加背景色。


background-color: white;
复制代码


  • Insert Style Rule Below:插入样式选择器。


一键隐藏DOM节点


可能有些时候,我们想隐藏页面的一部分内容,比如说截图什么的。这个时候只需要按下h键,就可以一键隐藏,在按下就会显示。


image.png


shadow editer(阴影编辑器)


当鼠标靠近box-shadow 或者 text-shadow旁的阴影方形图标时,点击,即可打开阴影编辑器,可以快速的对阴影进行调整。


image.png


快速展开dom节点


当elements面板中,选择的节点层级较多时,我们一个一个的点击展开是比较繁琐的,我们可以右键选择expand recursively命令进行一键展开。


image.png


尤其在用一些ui组件库的时候,dom层级结构就比较深,通过 expand recursively 展开很大程度上,帮助我们省去很多不必要的麻烦。

相关文章
|
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插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
132 2
|
6月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
11月前
|
Web App开发
chrome控制台小技巧
chrome控制台小技巧
87 1
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
448 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
117 0
|
Web App开发 SQL 存储
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来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
395 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率