[javascript] Chrome에서 JavaScript 함수 정의 찾기

Chrome의 개발자 도구는 흔들리지 만 그들이 가지고 있지 않은 것 (내가 찾을 수없는 것)은 JavaScript 함수의 정의를 찾는 방법입니다. 외부 JS 파일이 많은 사이트에서 작업하고 있기 때문에 이것은 매우 유용합니다. 물론 grep이이 문제를 해결하지만 브라우저에서는 훨씬 나을 것입니다. 내 말은, 브라우저가 이것을 알아야만하는 이유는 무엇입니까? 내가 기대했던 것은 다음과 같습니다.

  • 페이지에서 ‘요소 검사’를 선택하면 요소 탭에서 선이 강조 표시됩니다
  • 라인을 마우스 오른쪽 버튼으로 클릭하고 ‘기능 정의로 이동’을 선택하십시오.
  • 스크립트 탭에 올바른 스크립트가로드되고 함수 정의로 이동합니다

우선,이 기능이 존재하며 방금 놓쳤습니까?

그렇지 않으면 WebKit에서 나온 것으로 추측되지만 개발자 도구 기능 요청 또는 WebKit의 Bugzilla에 대한 내용을 찾을 수 없습니다 .



답변

다음과 같은 함수를 찾고 있다고합시다 foo.

  1. (Chrome 개발 도구 열기),
  2. Windows : ctrl+ shift+ F또는 macOS :
    cmd+ optn+ F. 모든 스크립트를 검색 할 수있는 창이 열립니다.
  3. “정규 표현식”확인란을 선택하십시오.
  4. 검색 foo\s*=\s*function( foo = function세 개의 토큰 사이에 공백이없는 검색 ),
  5. 반환 된 결과를 누르십시오.

펑션 정의는 다른 변형 function\s*foo\s*\(에 대한 function foo(이들 세 토큰 사이의 공간의 수와.


답변

이것은 2012-08-26에 Chrome에 착륙했습니다
. 정확한 버전에 대해 확실하지 않으므로 Chrome 24에서 확인했습니다.

스크린 샷은 백만 단어의 가치가 있습니다.

 Chrome 개발자 도구> 콘솔> 기능 정의 표시

콘솔에서 메소드가있는 객체를 검사하고 있습니다. “함수 정의 표시”를 클릭하면 함수가 정의 된 소스 코드의 위치로 이동합니다. 또는 function () {툴팁에서 함수 본문을 보려면 단어 위로 마우스를 가져갈 수 있습니다 . 이와 같이 전체 프로토 타입 체인을 쉽게 검사 할 수 있습니다! CDT는 확실히 락 !!!

모두 도움이 되길 바랍니다.


답변

콘솔에서 이름을 평가하여 기능을 인쇄 할 수 있습니다.

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

내장 함수에서는 작동하지 않으며 [native code]소스 코드 대신 표시 됩니다.

EDIT : 함수가 현재 범위 내에서 정의되었음을 나타냅니다.


답변

2016 업데이트 : Chrome 버전 51.0.2704.103에서

Go to member(에 나와있는 바로 가기 settings > shortcut > Text Editor). 함수가 포함 된 파일 ( sourcesDevTools 패널 에서)을 열고 다음을 누르십시오.

ctrl+ shift+O

또는 OS X에서 :

+ shift+O

이를 통해 현재 파일의 멤버를 나열하고 도달 할 수 있습니다.


답변

함수 정의의 위치를 ​​탐색하는 다른 방법은 콘솔에 함수에 액세스하고 정규화 된 이름을 입력 할 수있는 곳에서 디버거를 중단하는 것입니다. 콘솔에서 함수 정의를 인쇄하고 클릭하면 함수가 정의 된 스크립트 위치를 여는 링크를 제공합니다.


답변

다른 브라우저는 다르게 작동합니다.

  1. 먼저 페이지를 마우스 오른쪽 버튼으로 클릭하고 “요소 검사”를 선택하거나을 눌러 콘솔 창을 엽니 다 F12.

  2. 콘솔에서 다음을 입력하십시오.

    • Firefox

      functionName.toSource()
    • 크롬

      functionName

답변

Chrome 콘솔에서 :

debug(MyFunction)
MyFunction()