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””