Goole调试工具的使用

有三种常用方式打开：

方式	操作说明
快捷键	Windows：F12 或 Ctrl + Shift + I Mac：Cmd + Option + I
鼠标右键	在页面任意位置点击右键 → 选择“检查”
菜单栏	Chrome菜单 → 更多工具 → 开发者工具

Elements/元素面板

用于查看和实时编辑页面的 HTML 和 CSS。

可以手动在上面输入样式和内容查看样式变化

tips：

1、可以在右上角点击布局，里面有颜色选择器，可以选择页面颜色获得该颜色的RGB数值；

2、计算样式中可以跳转到生效的样式下；

console/控制台

JavaScript 的输出窗口，也可以手动执行 JS 代码。

Sources /源代码

查看网页加载的所有资源文件，并支持断点调试。

Network /网络

监控网络请求，包括 AJAX、静态资源加载等。

查看接口返回结果、状态码、耗时；检查请求头、响应头、请求参数；分析加载时间、性能瓶颈

tips：

1、启动器可以看到调用的堆栈的信息；

Application/应用

查看网站的客户端资源存储，如 LocalStorage、Cookie、IndexedDB 等。清除缓存数据；查看或修改 Cookie；查看 manifest、service worker 状态。

Performance/性能, Lighthouse

总结

类型	代表面板	作用
结构/样式	Elements	编辑 DOM、CSS
脚本/调试	Console, Sources	执行 JS，设置断点
网络/接口	Network	分析请求、响应、耗时
存储/缓存	Application	操作本地存储、Cookie
性能	Performance, Lighthouse	页面评估、性能分析