Chrome调试

ctrl_shit_p:
dark theme黑色主题
screenshot 截图 full整个页面的 node节点（选择节点先）
dock 调试工具位置

element面板右半部分
ctrl_f
//section/p 全局下section下的p
可以直接修改css
user agent styless内置样式
Pseudo ::before 伪类
固定状态：选择元素 ：hov
只改变该元素 选择元素 .cls
复制样式 选择样式 右键copy css 去需要粘贴的元素粘贴
右半部分 Computed :样式
layout:布局 grid和flex布局
eventListener时间监听
Properties 继承链
accessibilit盲人友好

console面板
ctrl_shiift_j 快速打开
inspect(document.getElementById())定位元素
执行语句
$_返回上一个语句的结果
$0返回上一个选择的Dom元素
console.warn()警告
console.error()错误
console.clear()清空
shit+enter换行
console.group() -console.froupEnd()
console.time()判断代码执行时间 -console.timeEnd()
console.table([{},{}])表格，可以排序
Default level可以选择看不看错误或者警告信息
眼睛图形：观测变量的变化

Source面板
在代码中debugger：查看每一步的返回值 代替console.log
打点：
endable code fode可折叠 （打开命令面板先）
watch 检测某一个变量
DOM BreakPoint dom变化导致暂停
call stack

Network面板
红点，不请求
Preserve log 记录历史的请求信息（页面跳转）
diaable cache清除缓存
no throtting节流器，选择网速
信号按钮：调出Network condition设置useragent ：请求头部
上箭头：import hrefire 导入，看到客户访问的信息状态

Application面板
Storage看到存储信息
document.cookie=“name=“jack””