JS30 Day09
今天學到更多 console 工具,可以在開發者工具中印出各種不同資料,提高開發效率。


Must Know Dev Tools Tricks

完成目標

開發工具和 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>

index-FINISHED.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
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
89
<!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
console.log('hello');

// Interpolated
console.log('Hello I am a %s string!', '💩');

// Styled
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');

// Testing
const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
console.clear();

// Viewing DOM Elements
console.log(p);
console.dir(p);

console.clear();

// Grouping together
dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.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('fetching data');
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
});

console.table(dogs);

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



學習筆記


★ Break On Attribute Modifications

Break On Attribute Modifications 可以用來檢查某個 DOM 的屬性被 JS 改變時,背後發生了什麼事。

使用步驟:

  1. 打開 Development Tool

  2. 在 Elements 選取要觀察的標籤 > 按右鍵 > Break on > Attribute Modifications

    這邊有三種觸發模式可選(可複選)

    • subtree modifications: 當子元素點發生變化時

    • arrtibute modifications: 當元素發生變化時

    • node removal: 當元素被移除時

  3. 要觀察的標籤前面會出現一個圓點

  4. 可以觸發改變,,觀察程式碼是怎麼跑的

  5. 不需要時,只要取消勾選Break on > Attribute Modifications 就好


★ Console Tools

console 物件提供了一個接口,可以連接到瀏覽器中的 debugging console,並透過不同的方法輸出對應的訊息。

  • console.log()

    常規輸出用法,可以印出常數、變數、格式化字串、inline CSS等

    • 常數

      1
      console.log('chai')
    • 變數

      1
      2
      const a = 'annie';
      console.loglog(a);
    • 格式化 Interpolated (以內插值替換)

      console.log('%s', value) 可將字串中的 %s 顯示為指定的參數

      1
      2
      // 類似 printf()
      console.log('Hello I am %s', chai);
      1
      2
      3
      // ES6 template string (ES6 back-ticks)
      const a = 'ES6';
      console.log(`hello ${a}`);
    • inline CSS

      console.log('%c', font-style) 可將字串顯示為參數中帶入的 css 樣式(font系列的style)

      1
      console.log("%c是在Hello", 'font-size: 50pt; color: #f00;');

      等於在 HTML 裡印出這樣的字

      1
      <span style="font-size: 50pt; color: #f00;">是在Hello</span>

  • console.warn()

    在控制台中顯示警告訊息

    1
    console.warn('%c Oh No!!!', 'background-color: gold; color: white;')
  • console.error()

    在控制台中顯示錯誤訊息

    1
    console.error('Everything is wrong!');
  • console.info()

    在控制台中顯示代表資訊的訊息

    1
    console.info('Chai loves eating sweets.')

  • console.assert()

    可以拿來測試判斷是否為真,若為 false 則回傳對應的錯誤訊息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p class="dog">I am a Dog.</p>

    <script>

    // 若要判斷某個元素有沒有 Dog 這類別,並將結果顯示在控制台訊息中,只需要用 assert 包住該元素,在第二個參數寫下測試失敗的回饋訊息即可。

    const testingUnit = document.querySelector('p')
    console.assert(testingUnit.classList.contains('Bird'), 'There is no Bird!')

    </script>

  • console.clear()

    清除 console 的所有訊息。

    1
    console.clear();

  • console.dir(element)

    可以顯示選取物件的所有屬性。
    例如, console.log(someFunction)只能返回 someFunction 本身的 function 內容,
    若使用 console.dir(someFunction) 則可以印出 someFunction 本身及其所擁有的屬性。

    1
    console.dir(someFunction);

  • console.group()console.groupCollapsed()

    在控制台面板顯示群組化的訊息,被群組化的訊息會以縮排的方式呈現。

    • console.groupconsole.groupCollapsed 用來放在要群組畫的訊息的頭

    • console.groupEnd 放在尾巴,代表訊息的終點

    console.groupCollapsed() 群組訊息一開始以摺疊的方式呈現。

    1
    2
    3
    4
    5
    6
    7
    8
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

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

  • console.count

    印出內容及出現次數。

    1
    2
    3
    4
    const text = ['a', 'b', 'a', 'b', 'c', 'a', 'b'];
    text.forEach(function(letter){
    console.count(letter);
    });

  • console.time()

    用來計算某段程式執行的時間。

    • time()代表計時開始

    • timeEnd()代表計時結束(timetimeEnd 內部的訊息相當於計時器的名稱,必須一致。)

    1
    2
    3
    4
    5
    6
    7
    console.time('fetching data')
    fetch('https://api.github.com/users/godlike0108')
    .then(data => data.json())
    .then(data => {
    console.timeEnd('fetching data')
    console.table(data)
    });

更多 console 方法:https://developer.mozilla.org/zh-CN/docs/Web/API/Console