Goole调试工具的使用-CSDN博客

有三种常用方式打开：

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

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

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

tips：

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

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

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

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

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

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

tips：

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

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