스타일 문제를 해결하기 위해 js 디버깅 기술을 유연하게 적용하는 단계 공유_javascript 기술

코드 로직이 복잡하거나, 시간이 지남에 따라 처리 세부 사항을 잊어버렸거나, 단순히 다른 사람이 남긴 버그를 인수하고 수정하는 등 다양한 이유 때문에 이 경우 디버깅이 골치 아픈 문제가 됩니다.

여기에서는 어렵고 복잡한 다양한 질병에 대해 더 나은 결과를 얻을 수 있는 JS 디버깅 기술을 공유하고 싶습니다.

1단계: 서버에서 직접 렌더링한 콘텐츠 확인

소스 파일을 보는 방법을 사용하여 먼저 서버 측에서 페이지의 HTML 조각이 비정상적인지 여부를 확인합니다.

2단계: 실제 HTML 콘텐츠와 서버에서 렌더링된 원본 콘텐츠의 차이 비교

일부 프런트엔드 도구를 사용할 수 있습니다(예: IE의 개발자 도구, Firebug, Chrome 개발자 도구 등), 현재 HTML 조각의 내용을 실시간으로 봅니다.

3단계: 적절한 위치에 디버거 추가

예: 먼저 js 코드를 찾습니다. 문제가 발생할 수 있으므로 적절한 위치에 추가하십시오. 디버거를 추가하거나 도구를 사용하여 "속성이 수정될 때 중단"과 유사한 중단점을 추가하십시오. 예를 들어 실제 HTML에는 원본 콘텐츠보다 추가 너비 속성이 있습니다.

4단계: 페이지를 실행하고 Interrupt를 입력한 후 js 호출 스택을 확인합니다(중요한 단계)

IE에서 지원하는 Visual Studio 디버거를 사용하는 것이 좋습니다(IE를 설정해야 함). 먼저 "스크립트 디버깅 비활성화"를 취소하면 기본적으로 어떤 js인지 확인할 수 있습니다. 이 메서드는 스타일을 수정합니다.