Chrome은 점점 더 단순히 선택하는 브라우저가 아니라 그 자체로 강력한 개발 도구이기도 합니다. 새로운 기능이 정기적으로 도입되며 그 중 일부는 다른 것보다 (나의) 개발 주기에 더 자연스럽게 속합니다.

다음은 내가 가장 잘 사용하고 강조할 가치가 있다고 생각하는 몇 가지 기능입니다.

1. 조건부 중단점

스크립트 소스에 중단점을 추가하는 것은 무엇이 잘못되었는지(또는 올바르게!), 어디에서 발생하는지 알 수 있는 매우 유용한 방법입니다. 조건부 중단점을 추가할 수 있으면 추가 조사에 관심이 있는 매개 변수 기준을 지정하여 문제의 근본 원인에 더 빨리 도달할 수 있습니다. 이상적인!



conditional breakpoints here.에 대해 자세히 알아보기

2. 변수 관찰

중단점이 연결되면 sources 창에서 변수를 조회할 수 있습니다. 이것은 다음과 같이 보입니다.



이것은 괜찮지만 동시에 여러 변수를 주시하고 싶거나 비교하고 싶거나 변수가 무엇인지(또는 그래야 하는지) 상기하고 싶다면 오른쪽에 있는 watch 패널을 확장할 수 있습니다. -측면에 원하는 만큼 많은 변수를 추가합니다.

3. 무한 루프 중지

실수로 자바스크립트 기능을 실행한 적이 있고 너무 늦었다는 것을 깨닫고 열렬히 Chrome을 강제 종료하려고 할 때 컴퓨터가 멈추기 시작하는 것을 지켜봐야 했다면 이 기능이 적합합니다...

일시 중지 스크립트를 누른 다음...



stopping infinite loops here.에 대해 자세히 알아보기

4. 상호작용 측정

웹사이트에서 무언가가 얼마나 오래 걸리는지 알고 싶었던 적이 있습니까...?

페이지가 로드되고 얼마 후에 누군가 비디오를 재생하거나 버튼을 클릭합니까?

성능 병목 현상은 어디에 있습니까? 스크립트 메서드를 실행하는 데 얼마나 걸립니까?

이제 window.performance를 사용하여 측정 시작 및 완료를 트리거하고 결과적으로 데이터를 추출할 수 있습니다.

onPageLoadOrMethodStart() {
    window.performance.mark('start');
    ...
}

onMethodCompletionOrCtaInteraction() {
    window.performance.mark('end');
    window.performance.measure('customMeasure', 'start', 'end');
}

retrieveData() {
    const customPerf = window.performance.getEntriesByName('customMeasure')[0].duration;
}

편리하게도 상단 패널의 performance 창에 데이터가 인쇄되어 모든 측정값을 한 눈에 볼 수 있습니다. 대박!

measuring real world interactions을 사용하여 User Timing API에 대해 자세히 알아보세요.

5. 축소된 파일을 예쁘게 인쇄

프로덕션의 축소된 파일은 업계 표준이며 예상할 수 있지만 때로는 중단점을 첨부하거나 개별 구조 또는 메서드를 살펴보는 것이 편리합니다. 읽기 쉽게 - 예쁘게 만드세요! (sources 패널의 왼쪽 하단 모서리):

6. 이벤트 모니터링

이벤트 리스너가 실행되지 않거나 임의의 시간에 실행되는 이유가 궁금한 적이 있습니까?
console를 사용하여 페이지 이벤트 및 상호 작용을 추적할 수 있습니다.

지금 사용해 보세요.

페이지 상단의 검색 입력 막대를 마우스 오른쪽 버튼으로 클릭하고 "검사"합니다

.

다음을 콘솔에 복사합니다. monitorEvents($0, "key");

검색 입력에 무언가를 입력합니다...

monitoring events here에 대해 자세히 알아보십시오.

7. 요청 데이터 내보내기

문제가 생겼습니다. 뭔가 이상해 보이지만 이유를 잘 모르겠습니다. 조사해야 할 많은 네트워크 요청이 있습니다. 답은 어딘가에 있을 것입니다... 정말 손을 사용할 수 있습니다. 다른 사람과 공유하는 것이 편리하지 않을까요?

당신은 할 수 있습니다!

요청을 HAR 파일로 다운로드하고 동료에게 보내면 Chrome으로 가져와서 요청도 확인할 수 있습니다. 요청을 마우스 오른쪽 버튼으로 클릭하고 Save as HAR with Content 를 선택하십시오. 짜잔.

exporting requests data 및 방법analyze HAR files에 대해 자세히 알아보십시오.

8. 어두운 테마 활성화(순수한 미학...)

개발 도구 열기 > 이동Settings
그것을 전환!

9. 크롬 확장 프로그램

또한 다양한 프레임워크 및 도구와 함께 사용할 수 있는 정말 편리한 확장 기능도 많이 있습니다. 내가 특히 유용하다고 생각한 것은 다음과 같습니다.

VueJS dev tools (정말 뛰어난 사용자 경험)

ReactJS dev tools

Google Analytics