目录
功能简介:
- Elements元素面板:检查和调整页面,调试DOM,调试CSS;
- Network网络面板:调试请求。了解页面静态资源分布,网页性能检测;
- Console控制台面板: 调试JavaScript、查看console log日志、交互式代码调试;
- Sources源代码资源面板:调试JavaScript页面源代码,进行断点调试代码;
- Application应用面板:查看&调试客户端存储,如cookie、local storage、session storage等;
- Performance性能面板:查看页面性能细节,细粒度对网页载入进行性能优化(高阶);
- Memory内存面板:JavaScript CPU分析器,内存堆分析器(高阶);
- Security安全面板:查看页面安全及证书问题;
- Audits面板:使用Google lighthouse辅助性能分析,给出优化建议(高阶);
打开Chrome开发者工具快捷键:
- 打开最近关闭的状态:Cmd+Opt+I(MAC)或Ctrl+Shift+I(Windows);
- 快速查看DOM或样式:Command+Option+C(MAC)或Ctrl+Shift+C(Windows);
- 快速进入Console查看log运行JavaScript:Command+Option+J(MAC)或Ctrl+Shift+J(Windows);
- F12打开。
实时编辑HTML和DOM节点:
- 编辑内容;
- 编辑属性Attributes;
- 修改元素类型;
- 调整DOM节点顺序;
- 像编辑器一样编辑HTML代码;
- 隐藏、删除、增加、拷贝节点。
在Console中访问节点:
- 使用document.querySelectAll访问;
- 使用$0快速访问选中的元素;
- 拷贝->JS Path.
在DOM中断点调试:
- 属性修改时打断点:break on -> attribute modification;
- 节点删除时打断点:break on -> node removal;
- 子树修改时打断点:break on -> subtree modifications;
Console面板简介:
- 运行JavaScript代码,交互式编程;
- 查看程序中打印的Log日志;
- 断点调试代码Debugging。
调试JavaScript的基本流程:
- 传统的console.log()甚至alert()打印运行时信息调试;
- JavaScript断点调试;
- 运行时变量调试,修改源代码临时保存调试。
Network面板简介:
- 查看网页资源请求概览,查看资源分布(css、js、图片、第三方资源等);
- 针对单一请求查看Request/Response或时间消耗等;
- 分析网页性能优化,使用工具代理页面请求数据等。
- 添加Network菜单:
Application面板简介:
- cookie:
双击增加或修改cookie:
以命令行的方式增加cookie:按esc键进入console面板:
- LocalStorage:
使用命令行增加:
模拟移动设备:
- 菜单:模拟设备外壳等功能:
- 更改设备地理位置:
- 更改设备方向:也可进行拖拽(传感器功能):