最近發生了一些小事情~程式的進度停了好一陣子! Now I’m backkkkkkkkkkkkkkk!
node學習之餘也要複習一下JS的基礎，目前預計在三周內把JS30補完~有始有終嘛!
回到主題，這次的主題比較特別，主要是介紹幾個Dev tool的常用小技巧~!不要總是只會console.log的基本款~一起來學點別的唄!
HTML
<body> //僅僅是一個函式 空白也無仿 <p onClick="makeGreen()">×BREAK×DOWN×</p> </body>
CSS
//none
Javascript
//示範用資料
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('hello!')
// Interpolated
console.log('hello I am a %s string', 'strange')
// Styled
console.log('%c I am a new sentence', 'font-size:50px;');
// warning!
console.warn('nooooooooooooo!')
// Error 😐
console.error('This is an error!')
// Info
console.info('this is another error');
// Testing
console.assert(1 === 2, 'that \'s wrong');
// clearing
console.clear()
// Viewing DOM Elements
console.log(document.querySelector('p'));
console.dir(document.querySelector('p'))
// Grouping together
console.clear()
dogs.forEach(item => {
console.group(`${item.name}`)
console.log(`the dog\'s name is ${item.name}`);
console.log(`the dog\'s age is ${item.age}`);
console.groupEnd(`${item.name}`)
})
// counting
for (let i = 0; i < 11; i++) {
console.count('Danny')
}
// timing
const root = 'https://official-joke-api.appspot.com/random_ten'
console.time('fetch data!')
fetch(root, { method: 'GET' })
.then(response => response.json())
.then(json => {
console.timeEnd('fetch data!')
console.log(json);
})
學習重點
- 了解不同種類的印出訊息方式(info,warn,error)
- 了解如何用console.assert做測試(條件式,錯誤訊息)
- 了解如何利用印出元素的完整資訊(console.dir(想要印的元素))
- 了解如何分組印出的訊息
- 了解如何利用console.count()計數
- 了解如何裡用console.time()獲得擷取資料的時間
Danny的學習紀錄 