【前端学习指南】Chrome Dev Tools 浏览器调试技巧

🍭 Hello，这里是爱吃糖的范同学 

        🔴 想把自己学习技术的经历和一些总结分享给大家！

        🔴 通过这样的方式记录自己成长，同时沉淀自己的技术，我会把所有额外的时间和经历投放到CSDN和公众号（💥公号名：AIRC Team💥，欢迎关注，为大家准备了很多有关编程学习资料）文章的撰写。

        🔴 希望能通过这样的方式让大家认识我，和我一起学习编程，共同进步！😃

        希望能和大家一起进步和成长！坚持热爱！🎉🎉🎉

---

目录

📌 Dev Tools 浏览器调试工具：

📌 Dev Tools 调试工具面板：

📌 【元素】CSS 调试：

1.查询DOM树：

2.样式编辑：

2.1 添加元素样式：

2.2 让:hover常驻：

2.3 编辑class：

2.4 复制样式：

2.5 观察Flex布局： 

📌 【控制台】JS执行：

1.控制执行指令：

2.JavaScript 调试：

2.1 debugger 语句：

2.2 面板中定义断点：

📌 【网络】抓包分析：

1.功能设置：

​编辑

 2.抓包信息：

📌 【应用】浏览器存储信息：

📌 往期文章：

---

📌 Dev Tools 浏览器调试工具：

        浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。

浏览器工具打开方式：

• 直接在浏览器中按下 F12 键
• 右键点击页面上的任一元素，选择“检查”（Inspect）
• 在浏览器右上角点击菜单按钮，选择“更多工具”→“开发者工具”

打开命令菜单快捷键：

• CTRL + SHIFT + P （Windows）
• Command + SHIFT + P（MAC）

相关命令：

dark theme  -->DevTool切换成黑色主题

light theme  -->切换成白色主题

Capture area screenshot  -->选择范围截图

Capture full size screenshot -->选择整个页面截图

Capture node screenshot -->捕捉一个node节点截图

通过Dock命令可以改变窗口位置

Undock命令可以将其变成一个独立的窗口

---

📌 Dev Tools 调试工具面板：

• Elements（元素）：用于查看和编辑网页的HTML和CSS。
• Console（控制台）：用于输出日志信息、调试代码和执行JavaScript代码
• Sources（源代码）：用于查看和调试网页的JavaScript、CSS和图片等文件
• Network（网络）：用于查看网页的请求和响应信息，包括请求头、响应头和响应时间等
• Performance（性能）：用于分析网页的性能瓶颈，包括加载时间、渲染时间等
• Memory（内存）：用于监控网页的内存使用情况，帮助开发者发现内存泄漏等问题

---

📌 【元素】CSS 调试：

1.查询DOM树：

快捷键：CTRL + F（Windows）| Command + F（Mac）

查询方式：文本查询 | CSS选择器 | Xpath

元素高亮显示：

• 淡蓝色：表示元素的内容占位
• 淡绿色：表示padding内边距
• 淡橙色：表示margin外边距

        通过 Console（控制台）面板，使用 inspect() 方法可以查询 element 元素，参数为一个 DOM 节点。

inspect(document.getElementById('s_main'))

        注意：这是使用 getElementById 可以定位到唯一的元素，此时浏览器会实现自定跳转，到元素（Element）面板中，定位到该元素。

使用元素选择工具：

快捷键：Ctrl + Shift + C