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

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.kler.cn/a/384961.html

相关文章:

  • 如何让ffmpeg运行时从当前目录加载库,而不是从/lib64
  • Word大珩助手:超大数字怎么读?35位数字?69位数字?
  • 探索开放资源上指令微调语言模型的现状
  • 《Vue3 报错》Uncaught TypeError: s.finally is not a function
  • bat批量处理脚本细节研究
  • 使用vue添加网站结构化标记schema
  • Java每日刷题之二分算法
  • TDengine 集群能力:超越 InfluxDB 的水平扩展与开源优势
  • ‌webdriver.Chrome()参数简介
  • 【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】题库(1)
  • acmessl.cn推荐一款好用的免费申请ssl证书的平台
  • 飞凌嵌入式FET527N-C核心板现已适配Android 13
  • Python/FastAPI 的并发能力对比
  • 【EMNLP2024】面向长文本的文视频表征学习与检索模型 VideoCLIP-XL
  • 人工智能——小白学习指南
  • 算法详解——链表的归并排序非递归解法
  • 持续优化,构建更好地 auto git commit 体验
  • JMM(一)[volatilr关键字、乐观锁和悲观锁]
  • 摄像机视频分析软件下载LiteAIServer视频智能分析平台裸土检测
  • 理解Web登录机制:会话管理与跟踪技术解析(一)
  • 【C++】std::cout与std::cin缓冲区
  • 在鱼皮的模拟面试里面学习有感
  • 【Linux基础IO】文件描述符分配规则 重定向
  • 从0开始学习Linux——文件目录
  • docker安装zookeeper,以及zk可视化界面介绍
  • Me-LLaMA——用于医疗领域的新型开源大规模语言模型