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样式写错了,也会在这有提示(黄色感叹号)

相关推荐
青青奇犽1 分钟前
Vue 组件通信全解析:七种核心方式与最佳实践
前端·vue.js·面试
青青奇犽3 分钟前
页面渲染优化:提升性能的关键策略🚀
前端·vue.js·面试
小爱同学_4 分钟前
从经典面试题事件委托到撩妹
前端·javascript·面试
FanetheDivine4 分钟前
solid: react导演剪辑终极扑街版
前端·react.js
卖报的小行家_6 分钟前
Vue2源码,响应式原理-对象
前端
小钰能吃三碗饭6 分钟前
打造类 RainbowKit 的 Solana 钱包连接套件
前端·web3·区块链
Anlici10 分钟前
如何优化十万数据的浏览体验?从性能、监控到布局全面拆解
前端·性能优化
utmhikari10 分钟前
【日常随笔】万字长文,如何用pyside6开发一个python桌面工具
前端·python·pyqt
JustHappy17 分钟前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
ONE_Gua22 分钟前
chromium魔改——绕过无限debugger反调试
chrome·爬虫·浏览器