新手村09 - Dev Tools Domination - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 9

自我挑戰組

新手村－30 Day JS Coding Challenge系列第 9 篇

新手村09 - Dev Tools Domination

11th鐵人賽 javascript 前端新手村

Chester

2019-09-24 06:27:19

887 瀏覽

分享至

09 - Dev Tools Domination

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

一個開發工具和 console 技巧的範例，直接來練習吧！

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Console Tricks!</title>
</head>
<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

    // Interpolated

    // Styled

    // warning!

    // Error :|

    // Info

    // Testing

    // clearing

    // Viewing DOM Elements

    // Grouping together

    // counting

    // timing

  </script>
</body>
</html>

JS - step by step

首先，範例都與 JS 的 Console 有關，所使用到的 Console 方法都可以參考以下

Console：https://tinyurl.com/y6nrq9gq

Regular Console
```
console.log('hello');

// hello
```

Interpolated Console

console.log('hi my name is %s','chester');
console.log('hi my name is %d', 3.14 );
console.log('hi my name is %f', 3.14 );

// hi my name is chester
// hi my name is 3
// hi my name is 3.14

ES6 Console

let es6 = 'es6';
console.log(`my name is ${es6}`);

// my name is es6

Styled Console

console.log("%c住手", "font-size:60px; color:red");

// 紅色的大大的住手(fb?)

Warning Console

console.warn("警告");

// 黃色的緊告

Error Console

console.error("錯誤");

// 紅色的錯誤

Info Console

console.info("好像跟log沒有什麼差別，以前有一個圖標的樣子orz");

Testing Conosle

console.assert(true,"訊息");
console.assert(false,"前面訊息沒有通過，就會噴這段訊息");
console.assert("","前面訊息沒有通過，就會噴這段訊息");
console.assert(0,"前面訊息沒有通過，就會噴這段訊息");
console.assert(NaN,"前面訊息沒有通過，就會噴這段訊息");
console.assert(null,"前面訊息沒有通過，就會噴這段訊息");
console.assert(undefined,"前面訊息沒有通過，就會噴這段訊息");

Clearing Console
```
CTRL+L
```

Viewing DOM Elements Console

let p = document.querySelector("p");
console.log(p);
console.log(dogs);
// <p onclick="makeGreen()">×BREAK×DOWN×</p> html的dom
// (2) [{…}, {…}]                            array的dom

console.dir(p);
console.dir(dogs);

// p        P內的所有可以用  展開dom告訴有哪些屬性可以用
// Array(2) DOGS內的所有可以用  展開dom告訴有哪些屬性可以用

Grouping together Console

console.table(dogs);
console.table(dogs,['name']);
// 只要有name欄位

counting Console

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

// 印出 count 東西的數量

timing Conolse

console.time("test1");
let i
let j 
for (i = 0 ; i < 1000; i++) {
	j = i;
}
console.timeEnd("test1");

// test1: 0.015869140625ms

console.time("test2"); 
for (let i = 0 ; i < 1000; i++) {
	j = i ;
}
console.timeEnd("test2");

// test2: 0.01513671875ms

就大功告成啦！

JS - Final

<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('hello');
  
  // Interpolated
  console.log('hi my name is %s','chester');
  console.log('hi my name is %d', 3.14 );
  console.log('hi my name is %f', 3.14 );
  
  //ES6
  let es6 = 'es6';
  console.log(`my name is ${es6}`);

  // Styled
  console.log("%c住手", "font-size:60px; color:red");

  // warning!
  console.warn("警告");

  // Error :|
  console.error("錯誤");

  // Info
  console.info("跟log沒有什麼差別，以前有一個圖標的樣子orz");

  // Testing
  console.assert(true,"訊息");
  console.assert(false,"前面訊息沒有通過，就會噴這段訊息");
  console.assert("","前面訊息沒有通過，就會噴這段訊息");
  console.assert(0,"前面訊息沒有通過，就會噴這段訊息");
  console.assert(NaN,"前面訊息沒有通過，就會噴這段訊息");
  console.assert(null,"前面訊息沒有通過，就會噴這段訊息");
  console.assert(undefined,"前面訊息沒有通過，就會噴這段訊息");

  // clearing
  // CTRL+L

  // Viewing DOM Elements
  let p = document.querySelector("p");
  console.log(p);
  console.log(dogs);

  console.dir(p);
  console.dir(dogs);

  // Grouping together
  console.table(dogs);
  console.table(dogs,['name']);

  // counting

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

  // timing

  console.time("test1");
  let i
  let j 
  for (i = 0 ; i < 1000; i++) {
    j = i;
  }
  console.timeEnd("test1");

  console.time("test2"); 
  for (let i = 0 ; i < 1000; i++) {
    j = i ;
  }
  console.timeEnd("test2");
</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yxhsxcnl