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

相关推荐
无糖可可果37 分钟前
从零读懂一个 Next.js 全栈笔记应用
前端
Maxkim37 分钟前
DeepSeek Harness 源码深度分析:像 VS Code 一样插件化的 Agent 框架
前端·架构
喜欢睡觉42 分钟前
从零看懂一个 Next.js 笔记应用
前端
cindershade44 分钟前
从零实现画布「双击创建节点」:一个 VueFlow 项目的交互全记录
前端
YHL44 分钟前
🚀 SSE 服务器发送事件与 BFF 层实战
前端·后端
今日无bug1 小时前
HTML5 Canvas:从画图到游戏开发
前端·canvas
cindershade1 小时前
用 Web Workers 优化前端重计算任务:避免主线程卡顿的实战方案
前端
爱丶不疚1 小时前
搞不清 CommonJS 与 ESM,你是否也有这些疑问🤔
前端·node.js
YIAN1 小时前
http无状态?State来展示!从基础路由到鉴权守卫,吃透 SPA 前端路由核心
前端·react.js
__zRainy__1 小时前
Node系列 · Node基础:全局变量与全局对象
开发语言·前端·javascript