2017-12-04 5 views
0

"로그인"및 "가입"을 위해 오른쪽 상단 모서리에 일련의 가상 단추 (<a 태그가 단추처럼 꾸며져 있음)가있는 웹 사이트를 유지 관리해야했습니다. 고객은 "로그인"과 "문의하기"로 변경하려고합니다. 가입은 다른 페이지입니다.브라우저의 "개발자 도구"는 어디서/어떤 클릭 이벤트 처리기가 추가되었는지 추적 할 수 있습니까?

아무런 문제가 없으므로 쉽게 수정할 수 있다고 생각합니다. <a href="/signup"<a href="/contactus"으로 바꿨습니다. 페이지에있는 버튼을 가리키면 상태 표시 줄에 올바른 URL이 표시되지만 버튼을 클릭하면 가입 페이지로 이동합니다

이렇게 나는 nav에서 일하는 클릭 이벤트 처리기가 있다고 가정하고, 그 클릭 이벤트 코드가 무엇인지 알아 내려고 또는 어떻게 연결되었는지 알아 내려고

크롬의 검사 요소가 내게 많은 것을 말하지 않습니다. (아마도 이해할 수 없기 때문일 수 있습니다.) - 나는 "이벤트 (위의 DOM 계층 구조의 다른 항목)을 검사 한 후 "청취자"탭에 있지만, (해당 계층의 모든 DOM 요소에 대한) 동일한 이벤트 핸들러 목록이 표시되고 나에게 도움이되는 내용이 표시되지 않습니다. 실행되는 소스 코드를 결정하십시오. Chrome은 all.js에 링크되어 있다고 말합니다. 해당 파일은 430KB의 축소 된 스크립트이므로 어떤 웹 라이브러리가 있는지 확실하지 않으므로 "line 13 in all.js"는별로 도움이되지 않습니다. li.sign-up.wide 아래의 트리에있는 항목이 클릭 이벤트 처리 코드로 돌아갈 수 있도록 도와 줄 수 있습니까?

enter image description here

가장자리/IE가이 브라우저에서 많은 정보 중 하나 ..이 없었, 이벤트 리스너 탭이 떨어져 li에서 a 요소를 들고 다시 DOM 루트를 향한 요소 주로 비어있는 클릭 이벤트가 나열되어 있지만 다시 all.js 어딘가에 다시 연결됩니다. IE는 적어도 1752 행의 2 행에 있다고 말하지만, 원하는 코드라고 믿기가 어렵습니다. all.js은 축소 된 스크립트의 대량입니다.

enter image description here

나는 내가 생각할 수있는 관련 아무것도 (파일 타입 검색에서 표준 찾기를 사용하여) 모든 소스 코드를 검색 : (이벤트를 바인딩 JQuery와 기능) bind click을 (이벤트 바인딩 -) jquery.click (때로는 보인다 사용), signup (사용자가 클릭 핸들러에 의해 전송되는 URL을) 나는 유망한 보이는 몇 가지 켜져 : 확실히

var bindMiniSignup = function() { 

     $('#sign-up-widget .sign-up.wide, #sign-up-widget .sign-up.mobile').bind('click',function(){ 
      Main.ExpandSignUpForm(); 
      return false; 
     }); 

     $('#sign-up-widget .log-in.wide, #sign-up-widget .log-in.mobile').bind('click',function(){ 
      Main.ExpandLogInForm(); 
      return false; 
     }); 
    } 

이 클래스와 ID 이름을 변경하려는 요소를 참조하십시오 :

enter image description here

이 기능 bindMiniSignup는 다양한 장소 (예를 들어 document.ready)에 몇 번이라고 그래서 나는 그것이 내가 찾던이었다 확신했다. 아아, 기능의 본문을 주석으로 처리하여 바인딩이 만들어지지 않았으므로 사이트에 아무런 영향을 미치지 않습니다. 여전히 이전처럼 동작합니다 (새 JS가로드되었는지 확인하기 위해 캐시를 비 웠습니다).

제 질문은; 요소에 click 바인딩이있는 PHP 또는 JS 파일을 찾고 변경하는 작업을 수행 한 경우 요소를 클릭 할 때 호출되는 코드 (또는 바인딩을 수행하는 코드)를 찾는 방법은 무엇입니까? 이 버튼을 클릭 한 후 즉시 브라우저를 중단시키는 방법이 있습니까? 그렇다면 실제 클릭 핸들러 코드가 실행되고 있으므로 모든 소스 코드를 검색 할 수 있습니까?

답변

1

올바른 트랙에있는 것 같지만 jQuery는 이벤트 바인딩을 수행하는 데 매우 오랜 시간 동안 on()을 사용했습니다.

또한 이벤트를 바인딩하는 파일의 이름이 all.js 인 것을 기반으로 소스 코드를 중간 단계로 컴파일하거나 축소해야 할 수 있습니다. 이것은 변경 사항이 효과가없는 이유 일 수 있습니다.

Grunt, Gulp, Webpack 등의 파일에 대한 프로젝트 루트를 확인하십시오. 컴파일/전처리 작업에 사용 된 도구가 표시 될 것이므로이 파일을 확인하십시오.

+0

CSS와 함께 파일 수가 적어서 "다른 형식으로 웹 리소스를 컴파일하는 것"이 ​​JS에도 적용될 수 있다고 생각합니다. 포인터 덕분에 나는 멍청 할 것입니다. –

+0

Ahh. .. header.htm에서 발견 된'

관련 문제