Chrome浏览器调试技巧
打开控制台命令行快捷键
- command+shift+p
设置控制台显示的位置
- 点击右边倒数第二个图标（三个点）
尺子与当前屏幕截图
- Show rulers：显示尺子
- Capture screenshot：截取当前屏幕截图
- Capture full size screenshot：截取长图
其它（console）
-
以下语句均为控制台输入
-
console.asserts(<变量>, <语句>);
let result=false;
//当result为false的时候，打印信息；当result为true的时候不打印信息
console.asserts(result,'result is false');
- 占位符：%s
//hello world
console.log('hello：%s','world');
- 设置控制台输出内容的样式样式：%c
//红色单词over
console.log('%cover','color:red;')
- 测试执行时间
//执行时间: 24396.9599609375 ms
console.time('执行时间');
for(let i=0;i<10000000;i++){}
console.timeEnd('执行时间');
- 以表格形式打印对象数组
let per=[{name:'wqt',age:21},{name:'ljt',age:21}];
console.table(per);
- 分组打印
console.group('分组1');
console.log(1);
console.log(2);
console.group('分组2');
console.log(3);
console.log(4);
-
取得页面节点
-
Store as global variable：将节点抽象出一个变量
//temp1：页面节点变量
//打印节点详细信息，包括属性
console.dir(temp1);