浏览器调试工具详解
个人简介
👀个人主页： 前端杂货铺
🙋♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
文章目录
- Tab 介绍
- 打开开发者工具
- 打开命令菜单
- 切换主题颜色
- 截图
- CSS 调试
- 检查
- 查询
- 按字符串直接查询
- 按选择器查询
- 按XPath查询
- 从控制台搜索元素
- 复制样式
- 计算样式
- 布局
- 控制台
- $_
- $0
- console
- JavaScript调试
- 监视变化
- DOM 断点
- 事件监听
Tab 介绍
打开开发者工具
- 菜单>更多工具>开发者工具
- 快捷键：F12
打开命令菜单
- 快捷键：CTRL + SHIFT + P （Command + SHIFT + P）
切换主题颜色
Command + SHIFT + P，输入 主题 或 theme，可进行主题切换。
截图
CSS 调试
检查
查询
按字符串直接查询
按选择器查询
如 div#test 表示查询 id=“test” 的 div。
按XPath查询
如 //selection/dev 表示找 selection 下面的 div 标签。
从控制台搜索元素
// 查找 id 为 test 的元素
inspect(document.getElementById('test'))
复制样式
计算样式
计算样式面板可以查看所选元素的盒子。并能够过滤样式和查看渲染的字体等。
布局
控制台
$_
返回上一条语句的执行结果。
$0
返回上一个选择的 DOM 节点。
$1 => 再上一个，$2…以此类推。
console
点击小眼睛，创建实时表达式，可用于观测变量。
JavaScript调试
debugger
console.log(xxx)
浏览器打断点
监视变化
DOM 断点
那么当属性被修改时，将会断到修改属性的代码处。
事件监听
更多内容将持续补充…
好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！
参考资料：
- 百度 · 百科
- DeepSeek
- 浏览器调试工具精讲 · 我在B站玩编程
- VS Code · Copilot
