1. 디버거;
또한 이전에 JavaScript 코드에 debugger; 추가하여 중단점 효과를 수동으로 생성할 수 있다고 말했습니다.
조건부 중단점이 필요합니까? if 문으로 둘러싸면 됩니다.
코드를 복사하면 다음과 같습니다.
디버거;
}
하지만 프로그램이 출시되기 전에 삭제하는 것을 잊지 마세요.
2. DOM 노드가 변경될 때 트리거할 중단점을 설정합니다.때때로 DOM이 당신의 통제하에 있지 않고 이상한 변화를 겪게 되어 문제의 원인을 찾는 것이 어렵다는 것을 알게 될 것입니다.
Google Chrome의 개발 도구에는 이 상황을 특별히 처리할 수 있는 "Break on..." 이라는 매우 유용한 기능이 있습니다. DOM 노드를 마우스 오른쪽 버튼으로 클릭하면 이 메뉴 항목을 볼 수 있습니다.
중단점의 트리거 조건은 노드 삭제, 노드 속성 변경 또는 하위 노드 중 하나 변경으로 설정할 수 있습니다.
3. Ajax 중단점이름에서 알 수 있듯이 XHR 중단점 또는 Ajax 중단점을 사용하면 특정 Ajax 호출이 발생할 때 이를 트리거하는 중단점을 설정할 수 있습니다.
이 트릭은 웹 애플리케이션의 네트워크 트래픽을 디버깅할 때 매우 효과적입니다.
4. 모바일 디바이스 시뮬레이션 환경Google 크롬에는 모바일 장치에서 프로그램이 실행되는 방식을 디버깅하는 데 도움이 되는 몇 가지 매우 흥미로운 모바일 장치 시뮬레이션 도구가 있습니다.
찾는 방법은 F12를 눌러 개발자 도구를 불러온 다음 ESC 키를 누르는 것입니다(현재 탭은 콘솔일 수 없음). 디버깅 창의 두 번째 레이어가 나타나는 것을 볼 수 있으며, 다양한 시뮬레이션 장치가 있습니다. 에뮬레이션 탭.
물론 이것은 실제 iPhone으로 바뀌는 것이 아니라 iPhone의 크기, 터치 이벤트 및 브라우저 사용자 에이전트 값을 시뮬레이션할 뿐입니다.
5. 감사를 사용하여 웹사이트 개선YSlow는 훌륭한 도구입니다. Google Chrome의 개발자 도구에도 감사 라는 매우 유사한 도구가 있습니다.
이는 귀하의 웹사이트를 신속하게 감사하고 귀하의 웹사이트를 최적화하기 위한 매우 실용적이고 효과적인 제안과 방법을 제공할 수 있습니다.
다른 사람도 있나요?이 도구 없이는 어떻게 개발할 수 있을지 모르겠습니다. 이에 대한 추가 팁도 작성할 예정입니다. 알게 되면 최신 게시물을 계속 지켜봐 주시기 바랍니다.