JS 디버깅 방법 요약

php中世界最好的语言
풀어 주다: 2018-04-23 10:13:49
원래의
3090명이 탐색했습니다.

이번에는 JS 디버깅 방법을 요약하고 JS 디버깅 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. 디버거;

앞서 JavaScript 코드에 디버거;를 추가하여 중단점 효과를 수동으로 생성할 수 있다고 말씀드렸습니다. debugger;来手工造成一个断点效果。
需要带有条件的断点吗?你只需要用if语句包围它:

if (somethingHappens) {
  debugger;
}
로그인 후 복사

但要记住在程序发布前删掉它们。

2. 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。

JS 디버깅 방법 요약

3. Ajax 断点

XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时,这一招非常的有效。

JS 디버깅 방법 요약

4. 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。

找到它的方法是:按F12,调出开发者工具,然后按ESC조건부 중단점이 필요합니까? if 문으로 둘러싸면 됩니다: rrreee 하지만 프로그램을 게시하기 전에 삭제하는 것을 잊지 마세요.

2. DOM 노드가 변경될 때 트리거할 중단점을 설정하세요JS 디버깅 방법 요약

때때로 DOM이 제어할 수 없고 이상한 변화가 발생하여 문제의 원인을 찾기가 어려울 수 있습니다. .

Google Chrome의 개발 도구에는 특히 이러한 상황을 처리할 수 있는 "Break on..."이라는 매우 사용하기 쉬운 기능이 있습니다. 이 메뉴 항목을 보려면 DOM 노드

를 마우스 오른쪽 버튼으로 클릭하세요.

노드가 삭제되거나, 노드 속성이 변경되거나, 하위 노드 중 하나가 변경되면 중단점의 트리거 조건을 설정할 수 있습니다.

JS 디버깅 방법 요약JS 디버깅 방법 요약

3.

XHR 중단점 또는 Ajax 중단점은 이름에서 알 수 있듯이 특정 Ajax 호출이 발생할 때 이를 트리거하는 중단점을 설정할 수 있도록 해줍니다. 이 트릭은 웹 애플리케이션의 네트워크 전송을 디버깅할 때 매우 효과적입니다.

JS 디버깅 방법 요약

4.

🎜 Chrome에는 모바일 장치에서 프로그램 실행을 디버그하는 데 도움이 되도록 모바일 장치를 시뮬레이션하는 몇 가지 매우 흥미로운 도구가 있습니다. 🎜🎜찾는 방법: F12를 눌러 개발자 도구를 불러온 다음 ESC 키를 누르세요(현재 탭은 콘솔일 수 없음). 디버깅 창의 두 번째 레이어가 표시됩니다. , 내부 에뮬레이션🎜탭🎜에서 선택할 수 있는 다양한 시뮬레이션 장치가 있습니다. 🎜🎜물론 실제 iPhone으로 바뀌는 것은 아니며 iPhone의 크기, 터치 이벤트 및 브라우저 사용자 에이전트 값을 시뮬레이션할 뿐입니다. 🎜🎜🎜🎜🎜5. 감사로 웹사이트를 개선하세요🎜🎜YSlow는 훌륭한 도구입니다. Google Chrome의 개발자 도구에도 🎜Audits🎜라는 매우 유사한 도구가 있습니다. 🎜🎜귀하의 웹사이트를 신속하게 감사하고 웹사이트 최적화를 위한 매우 실용적이고 효과적인 제안과 방법을 제공할 수 있습니다. 🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜JS 사용 기술 편집🎜🎜🎜🎜🎜JS 전송 json 형식 POST 요청 구현 단계🎜🎜🎜

위 내용은 JS 디버깅 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿