시나리오크롬 프로파일 링 - 발생한 문제의 범위를 좁히는 방법?
가 나는 워드 프레스 플러그인 (tagdivcomposer)에 사용자 추가를 만들고있어. tagDiv Composer를 사용할 때 페이지 왼쪽에있는 요소와 검사 패널 디스플레이를 클릭 할 수 있습니다. 디스패치 된 이벤트/패널을 표시하기 위해 실행중인 일부 코드가 있어야합니다. 내가 볼 수있는 방법을 Chrome 개발자 도구를 사용하여 질문
는 정확히 코드 요소를 클릭 한 후 실행? 검사 창 개방을 초래하는 요소를 클릭 내가 녹음 한
이 (프로파일)
노트. 상황을 리버스 엔지니어링하여 프로세스를 시작하는 이벤트/코드를 찾을 수 있기를 희망합니다.
나는 로컬 테스트를 설정하고는 무슨 일이 있었 정확히 볼 수 프로파일 :
성능 프로파일은 확실히 한 가지 방법이지만 DevTools도 Event Listener Breakpoints을 사용하므로 이벤트 리스너가 작동 할 때마다 일시 중지 할 수 있습니다. 거기에서 한 번에 한 줄씩 코드를 단계별로 실행할 수 있습니다. 이 경우 마우스 카테고리 아래의 체크 박스를 클릭 한 다음 텍스트를 클릭하여 이벤트 리스너를 트리거하십시오.
여기 내 문제를 "해결"방법입니다.
#box는 green 추가 한 클래스를 가지고있다코드
<html>
<head>
<script>
window.onload = function() {
var BOX_CLICK = "box click";
document.getElementById("click-here").onclick = function() {
window.dispatchEvent(new Event(BOX_CLICK));
console.log("click", this);
}
window.addEventListener(BOX_CLICK, function() {
console.log("listener", this);
document.getElementById("box").classList.add("green");
});
}
</script>
<style>
#box {
width:100px;
height:100px;
background-color: black;
}
.green {
background-color: green !important;
}
</style>
</head>
<body>
<p id="click-here">Click Here</p>
<div id="box"></div>
</body>
</html>
프로파일 링
dispatchEvent을 볼 수 있습니다대답. 그 밑에는 내 listener 코드가 실행되는 곳인 (anonymous)이 있습니다. 이 패턴을 사용하면 스택이 시간순으로 아래로 이동하고 새로운 프로세스가 시간순으로 왼쪽에서 오른쪽으로 있음을 알 수 있습니다.
저는 컬러 코드가 100 % 아니며 온라인에서 많은 도움을 얻을 수 있습니다.
색상 코딩과 관련하여 최상위 이벤트는 ** 요약 ** 탭과 일치하도록 색상이 지정됩니다. 기능은 스크립트에 따라 색상으로 구분됩니다. 각 스크립트에는 색상이 지정됩니다. 모든 기능은 그것이 시작된 스크립트에 따라 색으로 구분됩니다. 따라서'foo()'와'bar()'가 같은 색이라면 같은 스크립트에서 온 것입니다.이는 주로 [기본 스레드 활동보기] (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#main)에서 다루고 있습니다. –
Google devs 비디오에서 언급하기 전까지는 그 옵션에 대해 들어 본 적이 없었습니다. 실제로는 매우 유용했습니다. 최근에 많이 사용했는데,이 질문에 대해서는 이것이 최선의 선택이라고 생각합니다. – randomguy04
감사! 참고 비디오 randomguy04는 다음과 같습니다 : https://youtu.be/Eyw_mwbABIQ?t=3m38s –