来源小册地址正则表达式
Chrome-DevTools
快捷键及通用技巧
- Ctrl + Shift + D：切换DevTools窗口的布局（下右）
- 切换DevTools选项卡
- Ctrl + [ 或 ]： 向左和向右
- Ctrl + 1 到 9：DevTools>Settings>Preferences>Appearance中打开
- 上下箭头递增/递减 -> 调试样式
- Alt + 上下箭头 0.1
- 上下箭头 1
- Shift + 上下箭头 10
- Crtl + 上下箭头 100
- Ctrl + F: 查找
- CMD + - 或 =: 可缩放鼠标对应区域
Command菜单
- Ctrl + Shift + P: 打开Command菜单
- 截图：在Command菜单中输入screen，可选择节点截图、全屏截图等，图片会直接下载到本地
- 输入timestamps，开启log时间戳
Snippets代码块
- Sources面板New snippet(新建一个代码块): 复用这些JavaScript代码块
- 右击run运行
console
console中的'$'
- $_: 是对上次表达式的引用
- $i('lodash'): 可将npm包引入console进行测试（须要安装Console Importer插件）
条件断点
不再用在源码里添加console.log了npm
- Add conditional breakpoint...(添加条件断点)
- 输入console.log()或值为true/false的条件表达式
- 不用时在Breakpoints右键remove all
骚操做
-
console.log({ var1, var2 }): 用{}包起来，标记哪一个是哪一个数组
-
console.table(): 适用于数组、类数组、对象编辑器
-
console.dir(): 查看DOM关联到的真实对象 li = $('li'): 能够建立一个DOM元素函数
-
console.time() — 开启一个计时器 console.timeEnd() — 结束计时而且将结果在 console 中打印出来 能够传入一个标签值布局
-
"眼睛" 符号, 定义任何JavaScript表达式测试
Network
- Overview: 不须要看时间轴信息时隐藏
- 过滤器: 能够输入字符串或正则表达式，过滤请求，Ctrl + Space显示全部可能的关键字
- 请求表： 在表头上右键能够添加列（我常常添加Method）
- initiator列: 显示调用堆栈信息，显示哪一个脚本的哪一行触发了请求。
- Response Headers: 控制响应头的显示
Elements
- H: 隐藏／显示元素
- Ctrl + Shift + Z: 撤销全部修改 CMD + Z: 撤销上次修改
- Shadow editor 阴影编辑器: box-shadow或text-shadow属性的阴影方形符号
- Timing function editor 定时函数编辑器: trasition、animation属性
CSS perspective属性: 一是开关，经过它来打开和关闭3D透视效果，二是设置透视的距离。插件
- 展开全部的子节点: expand recursively命令
Drawer:
- ESC: 打开／隐藏