자주 사용되는 자바스크립트 디버깅 스킬 5가지 추천_javascript 스킬

저는 printf 디버깅을 사용해 본 적이 있고 그 이후에도 이 방법을 사용하면 항상 버그를 더 빨리 해결할 수 있는 것 같습니다.
더 나은 도구가 필요한 상황이 있으며, 여러분에게 유용할 것이라고 확신하는 최고의 도구는 다음과 같습니다.

1. 디버거;

"debugger;" 문을 사용하여 코드에 강제 중단점을 추가할 수 있습니다.
중단점 조건이 필요합니까? IF 절로 감싸면 됩니다:

코드 복사 코드는 다음과 같습니다.

만약 (무슨 일이 일어난다면) {
디버거;
}

실시간 스트리밍을 시작하기 전에 삭제하는 것을 잊지 마세요.

2. 노드 변경 시 연결 끊기

때로는 DOM이 자신만의 생각을 갖고 있는 것처럼 보입니다. 놀라운 변화가 일어나면 문제의 원인을 찾는 것이 어려울 수 있습니다.
Chrome 개발자는 이 문제를 디버깅하는 데 매우 유용한 기술을 보유하고 있습니다. 이를 "Break on..."이라고 하며 Elements 탭의 DOM 노드를 마우스 오른쪽 버튼으로 클릭하면 찾을 수 있습니다.

중단점은 노드가 삭제된 후, 노드의 속성이 변경되거나 하위 트리의 노드가 변경될 때 설정할 수 있습니다.

3. Ajax 중단점

XHR 중단점, 즉 제가 Ajax 중단점이라고 부르는 것 역시 예상되는 Ajax 요청이 있을 때 중단을 허용합니다.
이는 웹 애플리케이션의 네트워크를 디버깅할 때 놀라운 도구입니다.

4. 다양한 모바일 장치 시뮬레이션

Chrome에는 일상적인 작업을 단순화해 주는 휴대기기 에뮬레이션 도구가 내장되어 있습니다.
콘솔 탭이 아닌 탭을 선택하여 찾고 키보드의 Esc 키를 누른 다음 터치하려는 모바일 장치를 선택하세요.

물론 실제 iPhone을 얻을 수는 없지만 크기, 터치 이벤트 및 연령이 모두 에뮬레이트됩니다.

5. 감사를 통해 사이트를 개선하세요

YSlow는 훌륭한 도구입니다. Chrome에는 개발자 도구 아래에 감사라는 유사한 도구도 포함되어 있습니다.
사이트에 대한 빠른 감사를 통해 유용하고 실용적인 최적화 팁을 얻으세요.

또 무엇이 있나요?

이러한 도구 없이 개발하는 것은 상상할 수 없습니다. 새로운 것을 발견하면 추가로 게시할 예정이니 계속 지켜봐 주시기 바랍니다.