chrome 调试技巧

chrome 调试技巧

• ctrl + shift + i 快速打开window的devtool
• ctrl + shift + d 快速切换视窗左右位置
• (ctrl + [) or (ctrl + ]) 实现切换面板
• ctrl + 1--9 也能实现跳转直接数的面板，须要在setting 里进行设置
• ctrl + shift + p 快速打开命名含一些隐藏的功能
• $$ === Array.from(document.querySelectorAll('div')) 快速选择dom

调试样式 --> 上下箭头递增递减

• Alt + 上下箭头 0.1
• 上下箭头 1
• Shift + 上下箭头 10
• Crtl + 上下箭头 100

copy(data)

利用devtool 提供的copy 实现快速复制。

elements, logs, sources, network 面板下的查找

• 利用ctrl + f 来快速查找
• Aa 点击能够实现是否区分大小写 来匹配

快速截屏

ctrl + shift + p 搜索 screen 下的Capture full size screenshot实现快速截屏。

快速切换黑、白主题

ctrl + shift + p 搜索 theme 相关的选项，实现明亮 & 暗黑两种主题之间的切换

Dom 元素上的$0 & $1

• $0 是对咱们当前选中的html 节点的引用
• $1 是对上一次咱们选择的节点的引用
• $2---$4. 更以前的了。

console 默认就被 async 包裹, 因此对异步来讲能够直接在console 中使用await

利用断点来加日志 Edit breakPoint 而后添加 .log .time .table

查看日志的dom 属性

console.log(li) 会直接渲染成element 元素，使用

• console.dir(li) 就能够查看他的属性等
• console.time() -- 开启一个计时器
• console.timeEnd() -- 结束时间，并将结果打出
• console.log('%c牛逼','font-size: 20px; color: red;') 自定义样式
• "眼睛" 符号, 定义任何JavaScript表达式

network 下从新发送 XHR 的请求

选中接口，选择 Replay XHR 便可 从新请求

ccs3 box-shadow Shadow editor 阴影编辑器 sensors(传感器)

引自小册