新手村09 - Dev Tools

09 - Dev Tools Domination

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

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

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

完成目標

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

index_START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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

  1. Regular Console

    1
    2
    3
    console.log('hello');

    // hello

  2. Interpolated Console

    1
    2
    3
    4
    5
    6
    7
    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

  3. ES6 Console

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

    // my name is es6

  4. Styled Console

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

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

  5. Warning Console

    1
    2
    3
    console.warn("警告");

    // 黃色的緊告

  6. Error Console

    1
    2
    3
    console.error("錯誤");

    // 紅色的錯誤

  7. Info Console

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

  8. Testing Conosle

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

  9. Clearing Console

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
       CTRL+L
       ```  

    10. Viewing DOM Elements Console

        ```javascript
        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告訴有哪些屬性可以用
        ```   

    11. Grouping together Console

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

  10. counting Console

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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 東西的數量

  11. timing Conolse

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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>

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