JS 디버깅을 위한 5가지 디버깅 팁

작은 쓰레기 같은 놈들 · 게시됨 2017. 6. 13. 오후 1:11:32

1. 디버거;전에 말했듯이, Javascrip{filter}t 코드에 디버거 문장을 추가할 수 있습니다; 손으로 브레이크포인트 효과를 만들어내는 것.
조건에 대한 단절점이 필요하신가요? 그 주위에 if문으로 둘러싸기만 하면 됩니다:

로그인이 보이네요.

하지만 프로그램 출시 전에 반드시 잘라내는 걸 잊지 마세요.
2. DOM 노드가 변경될 때 브레이크포인트를 트리거하도록 설정하세요

때로는 DOM이 통제 밖에 있는 경우가 많아 스스로 이상한 변화를 겪어 문제의 근본 원인을 찾기 어렵게 만들 수 있습니다.
구글 크롬 개발 도구에는 이런 상황을 처리할 수 있는 매우 유용한 기능이 있는데, "Break on..."입니다. DOM 노드를 우클릭하면 이 메뉴 항목을 볼 수 있습니다.
브레이크포인트의 트리거 조건은 노드가 삭제되거나, 노드의 속성이 변경되거나, 그 하위 노드 중 하나가 변경되도록 설정할 수 있습니다.

3. 아약스 브레이크포인트

XHR 브레이크포인트, 또는 이름처럼 Ajax 브레이크포인트는 기능이 발생했을 때 Ajax 호출을 트리거하는 브레이크포인트를 설정할 수 있게 해줍니다.
이 방법은 네트워크를 통해 웹 애플리케이션을 디버깅할 때 매우 효과적입니다.

4. 모바일 기기 시뮬레이션 환경

구글 크롬에는 모바일 기기를 시뮬레이션하는 매우 흥미로운 도구들이 있어, 프로그램이 모바일 기기에서 어떻게 작동하는지 디버깅하는 데 도움을 줍니다.
찾으려면 F12를 누르고 개발자 도구를 불러온 후 ESC 키를 누르세요(현재 탭은 콘솔일 수 없습니다). 그러면 에뮬레이션 탭에 2단계 디버깅 창이 나타나 다양한 에뮬레이션 장치 중에서 선택할 수 있습니다.
물론 실제 아이폰은 아니지만, 아이폰의 크기, 터치 이벤트, 브라우저 사용자 에이전트 값을 시뮬레이션하는 것입니다.

5. 감사를 통해 웹사이트를 개선하기

YSlow는 훌륭한 도구입니다. 구글 크롬 개발자 도구에도 Audit라는 매우 유사한 도구가 있습니다.
웹사이트를 빠르게 감사하고 매우 실용적이고 효과적인 제안과 최적화 방법을 제공합니다.

쿠베르튜 · 게시됨 2017. 6. 13. 오후 3:24:17

유용하네요, 나쁘지 않네요

[JavaScript] JS 디버깅을 위한 5가지 디버깅 팁

관련 게시물

본 섹션