chrome DevTools开发者工具调试指南--基础

chrome DevTools开发者工具调试指南

4.sources 源代码资源面板调试
能够进行断点调试
5.application 应用面板
可以查看&调试客户端存储，如cookie,localstorage,sessionStorage 等
6.performance性能面板
高阶功能：性能面板，查看页面性能细节，细粒度都网页载入进行性能优化
7.memory 内存面板
javascript ,CPU 分析器,内存堆分析器：高阶
8.security 安全面板
查看界面安全及证书问题。
9.audits 面板
使用google lighthouse 辅助性能分析，给出优化建议：高阶
**打开chrome 开发者工具 **
1、打开最近关闭状态：cmd + opt +i (mac) 或者 constrol+ shift + i (windows)
2、快速打开DOM样式：command + option + C (mac ) 或者 constrol+ shift + C (windows)
3、快速进入console查看log运行 javascript :command + option + J (MAC) 或者 constrol+ shift + J (windows)
4、F12打卡
使用elements 选择dom
查看与选择dom节点

console中访问结点
1、document.querySelectAll(‘’);
2、$0 首先需要focus结点 然后再console中 $0
3、querySelector复制粘贴
DOM中断点调试
选择结点后右键找到break on : subtree modifications ,attribute modfications,node removal

animation.css
是个animation的网站：https://juejin.cn/post/6844904039558152199
调试网站：https://animate.style/

使用console调试JAVAscript
1、运行javascript代码 交互式编程.
2、查看程序中打印的log日志.
3、结合sources断点调试代码debugging
console换行 shift + enter;

在console中调试log日志
console.log(); 打印信息
console.warn(); 告警信息 黄色
console.error(); 通常在异常逻辑中catch住的错误信息使用 红色
console.table([{}，{}，{}]) 展示json 格式的复杂信息
console.group(); 与console.info(); console.groupEnd();
console custom 定制样式

console.time();
fib(5);
console.timeEnd();

console.clear(); 清除信息

调试javaScript 的基本流程
摈弃传统的console.log() 和alert() 打印运行时候的信息调试.

javaScript 断点调试，运行时变量调试，修改源代码临时保存调试。

**debugger;**单步调试
top:mouse- event listener breakpoints
对应的行数，直接点标断点

sources 源代码介绍
ctrl + shift + p 调出命令行进行搜索 sources文件

使用snippets 来辅助debugging
sources 里的 Snippets Import Jqery
注入文件 右键单击 run
调试库 更好的调试代码.

使用DevTools 作为代码编辑器
sources -> filesystem -> +add foler to workspace(添加对应文件导入编辑器中)
修改相当于修改本地文件,

网络调试 NetWork 面板简介
1、查看网页资源请求概览，查看资源分布。
2、针对单一请求查看request/response 或时间消耗。
3.分析网页性能优化，使用工具代理界面请求数据等。
search 比filter 检索更加精确
disable cache 🈲掉 缓存
停用节流模式 选用网络

waterfall 分析网页i性能
移动端或者是H5网页流量敏感的，进行加载.
网页中图片很多 可以做一个lazy load
划过图片再进行加载

客户端存储Application 面板
cookie :
local storage :
session storage :

cookie
如果有多个站点的网址 有很多domain

查看session storage 和 local storage

esc调用控制台

session stroage 同上 只是会话结束就无法存储了存储时长不同。

移动端H5界面调试
1.模拟移动设备
可切换不同的设备中。

2.H5界面开发
调整上面的大小可以适应再不同设备。

在Chrome DevTools中集成React 和Vue插件
需要vpn 到chrome网上商店 下载插件

搜索https://todomvc.com/examples/react/#/

使用react 开发会被点亮

chrome://extensions/
下载vue.js dev tools
搜索 vue todo demo

vue被点亮

课程总结：
略。