[javascript] 개발자 도구를 사용하여 Chrome에서 버튼 또는 요소로 실행되는 코드를 찾는 방법

Chrome과 내 웹 사이트를 사용하고 있습니다.

내가 내부에서 아는 것 :

1 )이 주황색 이미지 버튼을 클릭하여 사람들이 가입하는 양식이 있습니다.

여기에 이미지 설명을 입력하십시오

2 ) 나는 그것을 검사하고 이것이 전부입니다.
<img class="formSend" src="images/botoninscribirse2.png">

3 ) 소스 코드 상단에는 수많은 스크립트 소스가 있습니다. 나는 그것을 코딩했기 때문에 어떤 버튼을 호출하는지 알고있다<script src="js/jquery2.js" type="text/javascript"></script>

4 ) 해당 파일에서 찾을 수 있습니다 : $(".formSend").click(function() { ... });버튼으로 트리거되는 것 (상당히 복잡한 양식 유효성 검사 및 제출)과 원하는 것은 모든 웹 사이트에서 크롬 개발 도구 를 사용하여 찾을 수 있습니다.

요소가 어디에서 호출하는지 어떻게 알 수 있습니까?

청취자 탭이 작동하지 않았습니다. 그런 다음 클릭 이벤트 리스너를 보았습니다. 안전한 내기처럼 보이지만 거기에는 없습니다 jquery2.js(그리고 코드가 어떤 파일인지 실제로 알지 못 하므로이 모든 것을 확인하는 데 시간을 낭비합니다 .. .) :

여기에 이미지 설명을 입력하십시오

파일 내 $(".formSend").click(function() { ... });기능 jquery2.js이 없습니다.

제시 는 이유를 설명합니다 .

“마지막으로, 함수가 click 이벤트 핸들러에 직접 바인딩되지 않은 이유는 jQuery가 바인딩 된 함수를 리턴하기 때문입니다. jQuery의 함수는 일부 추상화 계층과 검사를 거쳐서 어딘가에서 함수를 실행합니다. “

귀하 중 일부가 제안한대로 아래의 한 가지 답변으로 작동하는 방법을 수집했습니다 .

답변

Alexander Pavlov의 답변 은 원하는 것에 가장 가깝습니다.

jQuery의 추상화와 기능이 광범위하기 때문에 이벤트의 핵심에 도달하기 위해서는 많은 후프가 필요합니다. 이 jsFiddle 을 설정 하여 작업을 시연했습니다.

1. 이벤트 리스너 중단 점 설정

당신은 이것에 가까웠습니다.

Chrome 개발자 도구 (F12)를 열고 소스 탭으로 이동하십시오.
마우스로 드릴 다운-> 클릭 (확대 하려면 클릭)

2. 버튼을 클릭하십시오!

Chrome 개발자 도구는 스크립트 실행을 일시 중지하고 다음과 같이 축소 된 코드를 아름답게 묶습니다.

(확대하려면 클릭)

3. 영광스러운 코드를 찾으십시오!

이제, 여기에 트릭을하는 것입니다 흥분하지 키를 누르면 화면에 밖으로 눈을 유지.

F11원하는 소스 코드가 나타날 때까지 키 (Step In)를 누릅니다.
소스 코드가 마침내 도달
- 에서 jsFiddle의 샘플이 상기 제공된 난 프레스했다 F11 108 번 원하는 이벤트 핸들러 / 기능에 도달하기 전에
- 이벤트를 바인딩하는 데 사용되는 jQuery (또는 프레임 워크 라이브러리) 버전에 따라 마일리지가 다를 수 있습니다
- 충분한 헌신과 시간으로 모든 이벤트 핸들러 / 함수를 찾을 수 있습니다

4. 설명

jQuery가 추상화의 여러 계층을 통과하는 이유에 대한 정확한 대답이나 설명이 없습니다. 제안 할 수있는 것은 코드를 실행하는 브라우저에서 사용법을 추상화하는 작업 때문입니다. .

다음은 jQuery의 디버그 버전을 가진 jsFiddle 입니다 (즉, 축소되지 않음). 첫 번째 (최소화되지 않은) 중단 점의 코드를 보면 코드가 많은 작업을 처리하고 있음을 알 수 있습니다.

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

” 실행이 일시 정지되고 한 줄씩 점프 “할 때 시도에서 놓친 것으로 생각하는 이유 는 Step In 대신 “Step Over”기능을 사용했기 때문입니다. 차이점을 설명 하는 StackOverflow 답변 입니다.

마지막으로 함수가 click 이벤트 핸들러에 직접 바인딩 되지 않은 이유 는 jQuery가 바인딩 된 함수를 반환하기 때문입니다. jQuery의 기능은 추상화 계층과 검사를 거치며, 어딘가 에서 함수를 실행합니다.

답변

해결 방법 1 : 프레임 워크 블랙 박스

훌륭하고 최소한의 설정으로 작동하며 타사는 없습니다.

Chrome의 설명서 에 따르면 :

스크립트를 블랙 박스에 추가하면 어떻게됩니까?

라이브러리 코드에서 발생한 예외는 일시 중지 되지 않습니다 (예외에서 일시 중지가 활성화 된 경우), 스테핑 시작 / 종료 / 초과는 라이브러리 코드를 무시하고, 이벤트 리스너 중단 점은 라이브러리 코드에서 중단되지 않습니다. 디버거는 라이브러리에 설정된 중단 점에서 일시 중지되지 않습니다. 암호. 최종 결과는 타사 리소스 대신 응용 프로그램 코드 를 디버깅하는 것 입니다.

업데이트 된 워크 플로는 다음과 같습니다.

Chrome 개발자 도구 ( F12또는 ⌘+ ⌥+ i)를 열고 설정 (오른쪽 상단 또는 F1)으로 이동합니다. 왼쪽에서 ‘ 블랙 박스 ‘ 라는 탭을 찾습니다.

디버깅하는 동안 Chrome에서 무시하려는 파일 의 RegEx 패턴 을 넣는 위치 입니다. 예를 들면 : jquery\..*\.js(글로브 패턴 / 인간의 번역 : jquery.*.js)
여러 패턴 을 가진 파일을 건너 뛰려면 파이프 문자를 사용하여 다음 |과 같이 추가 할 수 있습니다 jquery\..*\.js|include\.postload\.js.
이제 아래 설명 된 해결 방법 3으로 계속 진행하십시오 .

보너스 팁! 녹슨 정규식 패턴을 신속하게 테스트하고 단계별 정규식 디버거에 문제가 있는지 확인 하기 위해 정기적으로 Regex101을 사용 합니다 (그러나 다른 많은 것들이 있습니다 🙂 . 정규 표현식에 아직 “유창하지 않은”경우 http://buildregex.com/ 및 https://www.debuggex.com/ 과 같이 작성하고 시각화하는 데 도움이되는 사이트를 사용하는 것이 좋습니다.

소스 패널에서 작업 할 때 상황에 맞는 메뉴를 사용할 수도 있습니다. 파일을 볼 때 편집기에서 마우스 오른쪽 버튼을 클릭하고 블랙 박스 스크립트를 선택할 수 있습니다. 그러면 설정 패널의 목록에 파일이 추가됩니다.

솔루션 2 : 비주얼 이벤트

여기에 이미지 설명을 입력하십시오

가지고있는 훌륭한 도구입니다 .

Visual Event는 DOM 요소에 첨부 된 이벤트에 대한 디버깅 정보를 제공하는 오픈 소스 Javascript 책갈피입니다. 비주얼 이벤트 쇼 :

이벤트가 첨부 된 요소

요소에 첨부 된 이벤트 유형

이벤트와 함께 실행될 코드가 트리거됩니다

첨부 된 기능이 정의 된 소스 파일 및 라인 번호 (Webkit 브라우저 및 Opera 만 해당)

해결 방법 3 : 디버깅

페이지 어딘가를 클릭하거나 DOM이 수정 될 때, 그리고 다른 종류의 JS 중단 점 을 알아두면 코드를 일시 중지 할 수 있습니다 . 악몽을 피하기 위해 여기에 블랙 박스 를 적용해야합니다 .

이 경우 버튼을 클릭하면 정확히 무슨 일이 일어나는지 알고 싶습니다.

개발 도구-> 소스 탭을 열고 오른쪽에서 다음을 찾으십시오 Event Listener Breakpoints.
확장 Mouse및 선택click
이제 요소를 클릭하고 (실행이 일시 중지되어야 함) 이제 코드를 디버깅하고 있습니다. 모든 코드 누르기 F11( Step in )를 진행할 수 있습니다 . 또는 스택에서 몇 번의 점프로 돌아갑니다. 많은 점프 가있을 수 있습니다

해결 방법 4 : 낚시 키워드

개발 도구가 활성화 된 상태에서 ⌘+ ⌥+ F또는 다음을 사용 하여 전체 코드베이스 (모든 파일의 모든 코드)를 검색 할 수 있습니다 .

검색 #envio또는 태그 / 클래스 / ID가 파티를 시작한다고 생각하면 무엇이든지 예상보다 빨리 도착할 수 있습니다.

때때로 img많은 요소가 쌓여 있을뿐 아니라 어떤 요소가 코드를 트리거하는지 알 수 없습니다.

이것이 당신의 지식이 아닌 경우 디버깅에 대한 Chrome의 자습서를 살펴보십시오 .

답변

(가)와 같은 소리 “… 내가 선으로 선을 뛰어 …” 부분은 잘못된 것입니다. StepOver 또는 StepIn을 사용 중이거나 실수로 관련 통화를 놓치지 않습니까?

즉, 이러한 이유로 프레임 워크 디버깅은 지루할 수 있습니다. 문제점을 완화하기 위해 “프레임 워크 디버깅 지원 사용”실험을 사용할 수 있습니다. 행복한 디버깅! 🙂

답변

findHandlersJS 를 사용할 수 있습니다

크롬 콘솔에서 처리기를 찾을 수 있습니다.

findEventHandlers("click", "img.envio")

크롬 콘솔에 다음 정보가 인쇄됩니다.

element
이벤트 핸들러가 등록 된 실제 요소
events
우리가 관심있는 이벤트 유형에 대한 jquery 이벤트 핸들러에 대한 정보가있는 배열 (예 : 클릭, 변경 등)
handler
마우스 오른쪽 단추로 클릭하고 함수 정의 표시를 선택하여 볼 수있는 실제 이벤트 핸들러 메소드
선택기
위임 된 이벤트에 제공되는 선택기. 직접 이벤트의 경우 비어 있습니다.
targets
이 이벤트 핸들러가 대상으로하는 요소와 함께 나열하십시오. 예를 들어, 문서 객체에 등록되어 페이지의 모든 버튼을 대상으로하는 위임 된 이벤트 핸들러의 경우이 속성은 페이지의 모든 버튼을 나열합니다. 마우스를 가져 가서 크롬으로 강조 표시된 것을 볼 수 있습니다.

더 많은 정보를 원하시면 여기 당신이 예제 사이트에서 그것을 시도 할 수 있습니다 여기에 .

답변

이 솔루션에는 jQuery의 data 메소드가 필요합니다 .

Chrome 콘솔을 엽니 다 (jQuery가로드 된 모든 브라우저가 작동하지만)
운영 $._data($(".example").get(0), "events")
출력을 드릴 다운하여 원하는 이벤트 핸들러를 찾으십시오.
“handler”를 마우스 오른쪽 버튼으로 클릭하고 “기능 정의 표시”를 선택하십시오.
코드가 소스 탭에 표시됩니다

$._data()jQuery의 데이터 메소드에 액세스하고 있습니다. 더 읽기 쉬운 대안이 될 수 있습니다 jQuery._data().

이 SO 답변의 흥미로운 점 :

jQuery 1.8부터는 이벤트 데이터를 “공용 API”에서 더 이상 사용할 수 없습니다. 이 jQuery 블로그 게시물을 읽으십시오 . 이제 이것을 대신 사용해야합니다.

jQuery._data( elem, "events" ); elem은 jQuery 객체 또는 선택자가 아닌 HTML 요소 여야합니다.

이것은 내부의 ‘비공개’구조이므로 수정해서는 안됩니다. 디버깅 목적으로 만 사용하십시오.

이전 버전의 jQuery에서는 다음과 같은 이전 방법을 사용해야합니다.

jQuery( elem ).data( "events" );

버전에 관계없이 jQuery는 다음과 같습니다. (jQuery._data || jQuery.data)(elem, 'events');