這篇要來紀錄學到的是 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
留言列表
CSS、Responsive Web Design (2)