[Day9] 14 Must Know Dev Tools Tricks

[Day9] 14 Must Know Dev Tools Tricks

14个必须知道的开发工具技巧

需要用到的技巧与练习目标

1. Break on / attribute modifications 除错
2. console.log 运用

console.log 运用

//--- Intenpolated ---//
console.log("hello this a %s" , 'cat')
// %s 为带入的变数代号

//--- styled ---//
console.log('%c I am some graet text',font-size:50px; background:red;)
// %c 可以带入css

//--- warnig ---//
console.warn('oh Nooo')

//--- error ---//
console.error('shit')

//--- info ---//
console.info('this is info')

//--- Testing ---//
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'),'this is wrong!');

//测试如果回传是 false 则会回传 'this is wrong!'(後方填写的字样)

//--- clearing ---//
console.clear()
//清除console上面的资讯

//--- viewing DOM Elements ---//
const p = document.querySelector('p');

console.log(p) //获取 DOM 元素
console.dir(p) //获取 DOM 元素的相关资讯

//--- Grouping together ---//
//可以用变数判断 并将同变数的群组

const dogs =[{name:'BOb',age:2},{name:'Mike',age:8}]

dogs.forEach(dog => {
console.group(`${dog.name}`);
console.log(`this is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`)
console.groupEnd(`${dog.name}`);
})

console.groupCollapsed(`${dog.name}`);
//和 console.group(`${dog.name}`)功能一样，只是呈现方式为合起来而非展开。 


//--- counting ---//
//帮忙计算总共有几相同的值

console.count('Wes')
console.count('Steve')
console.count('Wes')
console.count('Wes')
console.count('Steve')

//最後会回传 Wes:3,Steve:2 

//--- timing ---//
//计算资料回传花费多少时间

console.time('fetching data') //开始计算的时间
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
  console.timeEnd('fetching data'); //结束的时间
  console.log(data);
});

//会回传 fetching data:'所花费的时间'


//--- table ---//
//传入阵列会回传表格型式的列表
console.table(dogs)