Chrome DevTools开发者工具调试

2024-10-04 04:23:15

1-1 Chrome DevTools 功能简介

（九大功能面板）

（1）Elements元素面板

检查和调整页面，调试DOM,调试CSS

（2）Network网络面板

调试请求，了解页面静态资源分布，网页性能检测

（3）Console控制台面板

调试javascript,查看console log日志，交互式代码调试

（4）Sources源代码资源面板

调试JavaScript页面源代码，进行断点调试代码

（5）Application应用面板

查看&调试客户端存储，如Cookie,LocalStorage,SessionStorage等

（6）Performance性能面板

查看页面性能细节，细粒度对网页载入进行性能优化（高阶)

（7）Memory内存面板

JavaScript CPU分析器，内存堆分析器（高阶)

（8）Security安全面板

查看页面安全及证书问题（高阶)

（9）Audits面板

使用Google Lighthouse辅助性能分析，给出优化建议（高阶)

打开Chrome开发者工具

在chrome菜单中选择：更多工具->开发者工具
在页面元素上右键点击，选择“检查”
快捷键
打开最近关闭的状态：
Cmd+Opt+I(mac)
Ctrl+Shift+I(windows)

快速查看DOM或样式：
Command+Option+C(Mac)
Control+Shift+C(windows)

快速进入Console查看log运行Javascript：
Command+Option+J(Mac)
Control+Shift+J(windows)
F12

查看与选择DOM节点

在页面中选择DOM,在DOM中反向定位到页面位置
在DOM中搜索（Command+F)

实时编辑HTML和DOM节点

编辑内容
编辑属性Attributes
修改元素类型
调整这个DOM节点顺序
像编辑器一样编辑HTML代码
隐藏/删除/增加/拷贝节点

在Console中访问节点

使用document.querySelectAll 访问
使用$0快速访问选中的元素
拷贝-> JS Path

在DOM中断点调试

属性修改时打断点
break on -> attribute modifications
节点删除时打断点
break on -> node removal
子树修改时打断点
break on -> subtree modifications

# 在元素中动态增加类和伪类

状态

元素类

新的规则

快速调试CSS数值及颜色图形动画等

1）可视化

文字阴影
盒阴影
颜色
背景色
动画

推荐网站：

console面板简介与交互式命令

运行javascript代码，交互式编程
查看程序中打印的log日志
断点调试代码Debugging

在console中调试日志

console.log 打印信息
console.warn 告警信息
console.error 错误信息
console.table 展示JSON格式的复杂信息
console.group 信息组展示
console.custom 定制样式

%c 为第二个参数styles
Network网络请求错误展示

调试Javascript的基本流程

debugger
事件断点
行断点

Sources面板

使用Snippets来辅助Debugging

导入库
运行代码片段

使用DevTools作为代码编辑器

使用Network详细分析请求

最新文章

热门文章