小雕雕的家

這篇要來紀錄學到的是 Chrome 瀏覽器的開發人員工具 (Chrome DevTools) 的一些小技巧

這個開發工具對我來說有點強，如果會使用或是加上其他套件的話，有很多小技巧可以讓你開發更快速

但是這一篇先來了解的是 console 的使用，畢竟這個比較常用

之後再來使用這個工具來效能分析之類的

首先混篇數的是常用的快捷鍵 (不常用的就不列了) 

一、快捷鍵

1. F12 叫出開發人員工具

2. Ctrl + Shift + C  開啟開發工具後，順便檢查元素

3. 開啟開發工具後，按下 F1 可以設定開發工具

4. Ctrl + Shift + D 可以切換開發工具在瀏覽器的下方或右方，等同按下下面這個

5. Ctrl + Shift + M 開啟模擬裝置模式，等同你按下這個

6. Ctrl + O 尋找檔名

7. Ctrl + R 跟 F5 一樣都是重新整理頁面，但我覺得 Ctrl + R 會比較好按

8. Ctrl + L 清除 Console 

9. 要輸入多行 Shift + Enter 

基本上常用的是這些，想要知道更多可以看這裡

https://developers.google.com/web/tools/chrome-devtools/shortcuts

二、Console 的輸出

上面快捷鍵是在混字數，因為就算不用快捷鍵也可以用滑鼠點到

但是在 console 上的操作如果很熟的話，會對開發很有幫助

首先是最常用的 console.log，用來輸出文字到 console 

以下舉例：

1.　使用 console.log 直接輸出

console.log("test");

2. 使用 %s 輸入字串

console.log("hello %s", "eason");

3. 或是使用 es6 的 template strings

var name = "eason";
console.log(`i am ${name}`);

4. 使用 %c 輸出時加入樣式，在第二個參數時輸入 css

console.log("%c hello word", "font-size:22px;font-weight:bold;color:blue;");

下面列出常用 %

%s 是輸入字串

%i 或 %d 整數型態

%f 輸入浮點數

%o DOM 節點

%O Javascript 對象

%c 加入樣式，樣式由第二個參數決定

5.  console.warn 輸出警告文字，debug 時會比較顯眼

console.warn("警告");

6. console.error 輸出錯誤訊息

console.error("xx 行發生錯誤");

7. console.info 顯示資訊

console.info("資訊:xxxxx");

有了以上的 .warn、.error、.info 之後，不要每次輸出都用 .log  了

使用這三個會讓訊息更清楚

8. 使用 console.assert 做測試

function add(a, b) {
    return a + b;
}

console.assert(add(3, 5) == 4, "錯了");

可以用來做單元測試之外，也可以從DOM抓來檢查

console.assert(document.querySelectorAll("img").length == 6, "應該要有8張圖");

要注意的是 assert 只有在錯誤時才會輸出

9. 用 console.clear() 來清除 console 

10. 可以用 console.log 來檢查 DOM 元素 

var content = document.querySelector("#content");
console.log(content);

11. 承上，用 console.dir 來輸出該元素結構

var content = document.querySelector("#content");
console.dir(content);

12. 利用 console.group 來群組結果

如果今天有一個物件陣列如下，利用 forEach 來輸出

var student = [
    {
        name: "小明",
        age: 10,
        job: "工具人"
}, {
        name: "小黃",
        age: 3,
        job: "狗"
    }, {
        name: "小綠",
        age: 9,
        job: "值日生"
    }
];

student.forEach(p => {
    console.log(`${p.name}是${p.job} 今年:${p.age}歲`);
});

輸出後會變這樣

使用 console.group 的話，會讓顯示更清楚

var student = [
    {
        name: "小明",
        age: 10,
        job: "工具人"
}, {
        name: "小黃",
        age: 3,
        job: "狗"
    }, {
        name: "小綠",
        age: 9,
        job: "值日生"
    }
];

student.forEach(p => {
    console.group(`${p.name}的個人資料`);
    console.log(`職業:${p.job}`);
    console.log(`今年:${p.age}歲`);
    console.groupEnd();
});

輸出會變成

要注意的是，有 console.group 就要有 console.groupEnd

如果把 console.group 改成 console.groupCollapsed，預設就不會展開所有節點

像是這樣 :

13 . 利用 console.count 利計算次數

console.count("test1");
console.count("test1");
console.count("test2");
console.count("test1");
console.count("test2");
console.count("test1");
console.count("test1");

輸出後

14. 利用 console.time 來計算執行時間

例如以下設定執行 3 秒 : 

console.time("執行時間");
setTimeout(function () {
    console.timeEnd("執行時間")
}, 3000);

輸出 : 

要記得 console.time 裡的文字，必須要跟 timeEnd 裡的文字一致

這樣才會被視為是一組喔

15. 使用 console.table 來將物件陣列表格化

例如以下的物件陣列 :

var student = [
    {
    name: "小明",
    age: 10,
    job: "工具人"
}, {
    name: "小黃",
    age: 3,
    job: "狗"
}, {
    name: "小綠",
    age: 9,
    job: "值日生"
}
];

console.table(student);

輸出 : 

也可以輸入第二個參數來指定要顯示的欄位

console.table(student, ["name", "job"]);

16. 用 debugger 加入中斷點，這個大家應該很常用

中斷後按 F10 逐行執行

三、在 Console 下的簡碼

1. $() 相當於 javascript 的 document.querySelector()

例如 : 

2. $$() 相當於 javascript 的 querySelectorAll()

例如 :

3. $x() 可以回傳指定 XPath 的元素

例如 : 

參考資料 :

https://developers.google.com/web/tools/chrome-devtools/shortcuts

https://www.youtube.com/watch?v=xkzDaKwinA8