当前位置: 首页 > news >正文

Chrome调试工具(查看CSS属性)

来说说这个Chrome调试工具吧,梦回gdb,但是它没有gdb难

打开浏览器

有两种方式可以直接打开Chrome调试工具

直接按F12

鼠标右键页面 --- 检查元素

什么mc玩家是鸣潮 

标签页含义

🤒 elements查看标签结构(展示html文件,前端人员关注)

🤕console查看控制台

😴 source查看源码+断点调试(调试JS代码,打印日志)

🤯network查看前后端交互的过程(其实我是干后端的)

😉  application查看浏览器提供的一些扩展功能(本地存储等)

😘 Performance,Memory,Security,Lighthouse暂时用不太到

elements标签页使用

Ctrl+滚轮进行缩放,Ctrl+0恢复原始大小

使用左上角箭头选中元素

右侧可以查看当前元素的属性(包括引入的类)

右侧可以修改元素的CSS属性,例如颜色(颜色选择器,修改颜色,例如字体大小,可以使用方向键微调数值)

此处修改不会影响代码,刷新就还原了,很像学里牛渴死的时候,,,改代码修改环境变量和直接改配置文件

如果CSS样式写错了,也会在这有提示(黄色感叹号)

http://www.lryc.cn/news/479011.html

相关文章:

  • MQTT从入门到精通之MQTT入门
  • Hadoop生态系统主要包括哪些组件以及它们的作用
  • OpenResty 1.27.1.1 已经正式发布
  • 定高虚拟列表:让大数据渲染变得轻松
  • python request与grequests该如何选择
  • Unity3D UI 拖拽
  • 介绍一下memcpy(c基础)
  • 【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
  • python-23-一篇文章帮你理解Python推导式
  • WPF中如何简单的使用CommunityToolkit.Mvvm创建一个项目并进行 增删改查
  • CesiumJS 案例 P15:检测标记、鼠标点击移动标记、鼠标拖动标记
  • Webserver(4.9)本地套接字的通信
  • [IAA系列] Image Aesthetic Assessment
  • 基于springboot的高校科研管理系统(源码+调试+LW)
  • Flutter环境配置
  • Rip动态路由及Rip动态路由优化
  • 双路快速排序和三路排序算法
  • SQL server增删改查语句和实例
  • 强化学习_06_pytorch-PPO2实践(ALE/Breakout-v5)
  • 《JVM第8课》垃圾回收算法
  • SpringBoot整合Freemarker(二)
  • element plus el-form自定义验证输入框为纯数字函数
  • Android笔记(三十一):Deeplink失效问题
  • 图神经网络初步实验
  • 创建线程时传递参数给线程
  • 兴业严选|美国总统都是不良资产出身 法拍市场是否将大众化
  • C#-拓展方法
  • 加锁失效,非锁之过,加之错也|京东零售供应链库存研发实践
  • vue3 传值的几种方式
  • AUTOSAR CP NVRAM Manager规范导读