Chrome DevTools开发者工具调试指南

1.chrome DevTools 功能简介

Elements元素面板
检查和调整页面，调试DOM,调试CSS
Network网络面板
调试请求，了解页面静态资源分布，页面性能检测
Console控制台面板
调试JavaScript,查看Console log日志，交互式代码调试
Sources源代码资源面板
调试JavaScript页面源代码，进行断点调试代码
Application应用面板
查看&调试客户端存储，如Cookie,LocalStorage,SessionStorage等
Performance性能面板
查看页面型能细节，细粒度对网页载入进行性能比较（高阶）
Memory内存面板
JavaScript CPU分析器，内存堆分析器（高阶）
Security安全面板
查看页面安全及证书问题
Audits面板
使用Google Lighthouse辅助性能分析，给出优化建议（高阶）

打开Chrome开发者工具快捷键

打开最近关闭状态：ctrl+shift+I
快速查看DOM或样式：ctrl+shift+c
快速进入Console查看log运行javaScript: ctrl+shift+j
F12

2.使用Elements调试DOM

查看和选择结点

HTML与DOM的区别
DOM：document object model(文档对象模型)
在页面中选中DOM，在DOM中反向定位到页面位置

在DOM中检索

实时编辑HTML和DOM节点

• 调整DOM结点顺序
• 像编辑器一样编辑HTML代码
• 隐藏/删除/增加/拷贝结点

在Console中访问节点

• document.querySelectAll(‘img’)
• 使用$0快速访问选中的元素
• 拷贝->JS Path

在DOM中断点调试

• 属性修改时打断点：break on->attribute modifications
• 节点删除时打断点：break on->node removal
• 子树修改时打断点：break on->subtree modifications
  .removeChild()

3.调试样式及CSS

查看和编辑CSS

在元素中增加类与伪类

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

More tools->Animations
transition:1s all ease-in-out

4.Consolo面板的简介与交互式命令

Console面板简介

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

console.log('hello world!');
console.warn();
console.table([
    { short: "JS", long: "JavaScript", version: "ES6" },
    { short: "CSS", long: "Casting Style Sheet", version: "css 3.0" }
    {short:"Hyper Text Markup Language"}
]);
document.querySelector("#group").addEventListener("CL")({
	console.group("group");
	console.info("Log");
	console.info("Warning");
	console.info("Error");
	console.info("NetWork");
	console.groupEnd("group");
});
console.custom();
console.time();
console.timeEnd();
console.assert(false,"haha");

调试JavaScript的基本流程

1.传统的console.log()甚至alert()打印运行时信息调试
2.JavaScript断点调试
3.运行时变量调试，修改源代码临时保存调试

Sources源代码面板介绍

使用Snippets来辅助Debugging

导入库

使用DevTools作为代码编辑器

5.调试网络

Network面板简介

• 查看网页资源请求概览，查看资源分布
• 针对单一请求查看Request/Response或时间消耗等
• 分析网页性能优化，使用工具代理 页面请求数据等

使用Network详细分析请求

使用Network Waterfall分析页面载入性能

6客户端存储Application面板

查看与调试Cookie

什么是 Cookie？
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

查看与调试LocalStorage与SessionStorage

7.调试移动端，H5页面及远程调试

模拟移动设备

使用Chrome DevTools进行H5页面的开发

8.在Chrome DecTools中集成开发React和Vue插件

集成React
集成Vue插件

9总结