html 요소에서 숨어서 행동하는 것을 확인하는 방법

Question

일부 JS에서 숨겨진 간단한 <a> 태그가 있습니다. (display:none) 페이지 소스를 조사해 보았지만 감추어 보이지 않는 것을 볼 수 있습니다. 그러나 검사관이 표시로 표시합니다. 없음 (인라인 스타일)

JS 코드의 클래스/ID를 순서대로 찾지 못했습니다. <a>을 숨기는 코드 부분을 분리합니다.

디버깅에 도움이되는 도구 또는 해결 된 절차가 있습니까?

Answer 1

크롬을 사용하면 요소의 속성이 변경 될 때 코드를 중단 할 수 있습니다.

1. F12를 사용하여 개발자 도구를 열고 "요소"탭을 선택하십시오. 숨겨진 요소를 찾습니다. 그것에 마우스 오른쪽 단추로 "중단", "특성 수정".

2. 개발자 도구를 열어두고 페이지를 새로 고침하십시오. 요소는 자바 스크립트를 사용하여 숨겨진되는 경우

, 당신은 그 시점에서 중단됩니다.

그렇지 않으면 CSS를 통해 이루어집니다. 이 경우 "요소"탭을 다시 사용하여 관심있는 요소를 선택하고 오른쪽 열에 적용된 "스타일"을 살펴보십시오. Chrome은 어느 스타일이 어떤 스타일 시트에 적용되는지 표시합니다. 그런 다음 요소를 숨기는 것이 쉽다는 것을 발견해야합니다. 이 인라인 스타일이나 CSS 클래스에 의해 숨겨진 경우

모든

Answer 2

먼저 봐.

그렇다면 css 클래스를 사용하는 경우 해당 클래스에 대한 모든 프로젝트를 검색하십시오 (이 클래스를 요소에 추가하는 javascript 함수를 찾아야 함).

인라인 스타일 속성으로 숨겨진 경우 .style.display = 속성에 대해 프로젝트 내부를 살펴보십시오.

당신이 JQuery와 같이하려고 사용하는 경우 쉽게 CSS를 할 수 있기 때문에

// Search by class 
.addClass(".hiddenClass 

// Search by css 
.hide(), or $(".elementSelector").hide() 

Answer 3

은 첫째, 실제로 당신의 요소를 숨 깁니다 자바 스크립트 있는지 확인. 가장 쉬운 첫 번째 단계는 요소를 확인하고 기본 css가 숨길 가능성이 있는지 확인하는 것입니다.

초. 하나의 파일에 js 코드가 있습니까? 아니면 페이지에 여러 개의 js 파일을 가져 오나요? js 파일이 여러 개있는 경우 시도해 볼 수 있습니다.

가져 오기 한 파일 는 다음 파일의 나머지 부분을 가져 당신의 요소 를 표시하기 위해 자바 스크립트를 사용합니다. 당신의 요소를 숨 깁니다 코드가 첫 번째 파일에있는 경우 (당신이 먼저 숨어 후에는 가시가 있기 때문에) 요소가 표시되지 않는 경우

는 다음 요소가 숨어가에서 발생한다는 것을 의미 볼 수 있습니다 후속 파일. 두 번째 가져 오기 후에 요소를 표시하는 자바 스크립트 코드를 이동하는 등 ...

마지막으로, 코드가 외부 CSS 파일도 가져 오지 않도록하십시오.

모든 자바 스크립트 디버깅을 위해 Chrome Dev Tools를 사용하는 것이 좋습니다.