js09 - Dev Tools Domination
桑璞
内容
<body>
<p onClick="makeGreen()">×BREAK×DOWN×</p>
<script>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
function makeGreen() {
const p = document.querySelector('p');
p.style.color = '#BADA55';
p.style.fontSize = '50px';
}
// Regular
console.log('1')
// Interpolated
console.log('hi',1)
// Styled
console.log('hello,%chalo','color:red;font-size:40px')
// warning!
console.warn("???")
// Error :|
console.error('!!!')
// Info
console.info("aaa")
// Testing
console.assert( 1 === 1 , 'ggwp')
console.assert( 1 === 0 , 'wp')
console.assert(p.innerHTML.match('BREAK'),'true')
// clearing
console.clear()
// Viewing DOM Elements
const p = document.querySelector('p')
console.log(p)
console.dir(p)
// Grouping together
dogs.forEach(dog=>{
console.group();
console.log(`${dog.name}`)
console.log(`${dog.age}`)
console.groupEnd()
})
console.table(dogs)
console.table(dogs,['age'])
// counting
console.count("（读来过反）羊只");
console.count("（读来过反）羊只");
console.count("（读来过反）鱼条");
console.count("（读来过反）羊只");
console.count("（读来过反）羊只");
console.count("（读来过反）鱼条");
console.count("（读来过反）鱼条");
console.count("（读来过反）羊只");
// timing
console.time('fetch my data');
fetch('https://api.github.com/users/soyine')
.then(data =>data.json())
.then(data =>{
console.timeEnd('fetch my data');
console.log(data)
})
</script>
</body>
类似资料：