浏览器调试

1.浏览器调试窗口

1. f12打开调试窗口
2. 点击窗口右上方三个.图标可以选择窗口位置
   
3. file

2.浏览器pc、手机模式切换

1. 点击窗口左上方第二个图标切换手机、pc模式
2. 手机模式下可以选择机型，屏幕宽高等
   
3. file

3.页面元素调试

1. 选择页面查看位置右键，检查
2. 选择elements菜单下元素右键，操作元素
   
3. file

4.页面元素状态

1. 选择元素右键，选择force state，在选择状态（hover）

5.页面元素状态改变断点

1. 选择元素右键，选择break on，选择改变类型
2. 移除元素断点
   
3. file

6.元素样式调试

1. 选择要调试的元素
2. 查看styles
   
3. file

7.元素样式调试:hov

1. 查看元素styles
2. 选择:hov,选择不同状态
   
3. file

8.元素盒模型

1. 查看元素styles
2. 最下面盒模型，查看，修改
   
3. file

9.元素最终样式

1. 查看元素computed
   
2. file

10.元素事件查看

1. 查看元素事件event listeners
   
2. file

   事件查看.png)

11.console

1. 可以看调试，报错信息
2. 可以写js测试代码
   
3. file

12.console设置

1. file

13.资源格式化

1. file

14.网站资源

1. 资源可以修改，保存等
   
2. file

15.执行栈

1. 资源打断点，call stack显示执行栈（压栈）
2. 执行后从上到下出栈
3. （有时不好去断点，先格式化）
   
4. file
5. 断点
   
6. file

16.样式调试同步

1. 在sources的filesystem下 +add...添加文件目录
2. 修改元素样式会自动同步修改文件
   
3. file

17.网络资源加载

1. network
   
2. file

18.网络设置项

1. network
   
2. file

19.页面重绘查看

1. 设置rendering工具
   
2. file
   
3. file

20.资源使用率

1. 设置coveraqe工具
   
2. file
   
3. file

21.页面动画查看

1. 设置animations工具
   
2. file
   
3. file

22.user agent模拟

1. 设置network conditions工具
   
2. file
   
3. file

23.资源查找

1. sources下
   
2. file

24.手机调试

1. 设置remote devices工具
   
2. file
   
3. file

25.请求资源过滤

1. 设置request blocking工具
   
2. file
   
3. file

26.资源查找

1. 设置search工具
   
2. file
   
3. file

27.设备传感模拟

1. 设置sensors工具
   
2. file
   
3. file

28.页面性能performance

1. 打开performance
   
2. file

29.页面性能performance执行时间

1. 打开performance，选择call tree
   
2. file
   
3. file

30.页面性能performance性能占比

1. 打开performance，选择call tree
   
2. file

31.内存理论

1. 栈（简单类型），堆（引用类型）

32.内存理论

1. 全局变量，内存回收，内存泄漏

33.内存理论

1. file

34.描述文件manifest

1. 点击application下manifest
   
2. file

35.描述文件manifest

1. 点击application下manifest
   
2. file

36.描述文件service workers

1. ???

37.描述文件service workers

1. 点击application下service workers ???
   
2. file

38.清除存储clear storage

1. 点击application下clear storage
   
2. file

39.localstorage

1. 点击application下storage下local storage
   
2. file

40.sessionstorage

1. 点击application下storage下session storage
   
2. file

41.indexeddb

1. 点击application下storage下indexeddb
   
2. file

42.web sql(废弃)

1. 点击application下storage下web sql
   
2. file

43.cookies

1. 点击application下storage下cookies
   
2. file

44.离线存储cache

1. 点击application下cache(描述文件manifest设置缓存文件)
   
2. file

45.资源保存

1. 点击application下frames(需要的资源右键，save)
   
2. file

46.https安全性

1. 点击security
   
2. file

47.性能审计

1. 点击audits
   
2. file

48.性能审计

1. 点击audits ???
   
2. file

49.性能审计

1. 点击audits ???
   
2. file

50.参考

1. 参考50 个 Chrome Developer Tools 必备技巧视频