DevTools
開啟
<C-S-i>／F12／右鍵→Inspect
可使用如Capture full size screenshot擷取畫面等指令
hover至分數上可看到餅狀分佈
See calculator可看到詳細比重
View Treemap可看到JS檔案的大小比例和執行時的比例
最下方為測量環境的設定
DIAGNOSTICS從上到下為對分數影響大到小的項目
左上角的➕可追加不同的Lighthouse測量
想測量讀取時間的話，可在測量後點開Performance分頁，點擊Record and Reload
其中重點為Network與Main(Thread)
Source分頁→Overrides可改寫請求內容
對視窗中點右鍵，勾選Log XMLHTTPRequest
輸入document.designMode = 'on'
點選網頁文字會直接出現游標，可以直接編輯網頁內容
Sources→Event Listener Breakpoints
右鍵→Break on...→attribute modifications
Step over Line of Code (step over)
Step into Next Function Call (step into)
Step out of Current Function (step out)
右鍵→clear console history
debugger; fn(1);
頁面跳轉時停止
code:javascript
const dbg = () => {
debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;
偵測隨機事件
setTimeout(function() { debugger; }, 5000);
偵測focus元素
code:javascript
(function () {
let last = document.activeElement;
setInterval(() => {
if (document.activeElement !== last) {
last = document.activeElement;
console.log("Focus changed to: ", last);
}
})
})();
monitorEvents(element, [event])
設定斷點偵測觸發的事件
unmonitorEvents(element, [event])
關閉事件監聽
getEventListeners(element)
查看DOM元素綁定事件
在Chrome DevTools中可以像jQuery使用$當做選擇器 $表示的是document.querySelector([selector])
如果想選擇多個DOM元素，可使用$$
表示的是document.querySelectorAll([selector])
也可以在element視窗中點選一個DOMElement後，在console中輸入$0也可選到該元素
$0表示的是當前chrome所選取到的元素
在console中可以使用keys(obj)和values(obj)來取的物件的鍵和值 可以用document.designMode='on'直接編輯頁面內容