Chrome에서 JavaScript 함수 정의 찾기

282

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

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

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

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

javascript  google-chrome-devtools 
— 라이언 듀발
소스
3
스크립트 탭에 현재 파일을 가져 오는 검색 표시 줄이 있으며 인쇄하여 함수의 내용을 볼 수 있습니다. 하지만 원하는대로보다 일반적인 검색을 수행 할 수있는 방법이 있다면 지금은 궁금합니다.
— hugomg
3
Chrome 개발자 도구를 사용하면 "소스"탭-> 오른쪽 창에서 "이벤트 중단 점"을 설정해야합니다.
제 경우에는 변수를 알 수없는 기능으로 설정했습니다. myvar.toString ()을 수행 한 후 "function Object () {[native code]}"를 인쇄했습니다.
— Ring

답변:

366

다음과 같은 함수를 찾고 있다고합시다 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(이들 세 토큰 사이의 공간의 수와.

— 플레시 브
소스
8
이것이 바로 제가 말하는 것입니다! 나는 심지어 판유리가 존재한다는 것을 몰랐다.
— Ryan DuVal
22
OSX에서 cmd + option + F
— Stiggler
2
이것은라는 함수를 정의하는 유일한 방법 foo입니다. 다른 것도 있습니다. 우리의 기능이 예를 들면 bar['foo']? (내가 아는 한, 그 질문에 대한 정답은 없다.-본질적으로 "복잡한 코드를 작성하지 말라")
— Steven Lu
1
선택한 답변을 사용하여 "기능 정의"를 찾을 수 없습니다. Google에서 검색했는데 도움을 찾을 수 없습니다. (Chrome 버전 41.0.2272.118 m 사용)
— Web_Developer
7
그런 다음 함수 선언, 동적으로 생성 된 함수 표현식 및 익명 (이름없는) 함수를 찾지 못합니다. Firefox와 같은 것을 원합니다. 워치 패널에서 기능 참조를 클릭하십시오-> 기능 참조로 이동하십시오.
— Fagner Brack
77

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

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

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

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

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

— 드미트리 파시 케 비치
소스
1
함수 참조로 검색 할 수있는 바로 가기 또는 함수가 있습니까? "> inspect (document.body)"와 같이 지금은 d> tmp = {a : myFunc}; > tmp 다음에 "기능 정의 표시"
— Dennis C
16
당신이 할 수 있다고 생각dir(myFunc)
— Dmitry Pashkevich
dir (myFunc)가 훨씬 나아졌지 만 여전히 두 번의 클릭과 마우스가 필요합니다
— Dennis C
1
아, 키보드에서 완전히 할 수 있다면? 같은 것 findDefinition(myFunc)? 아직 존재하지 않는 AFAIK ...
— Dmitry Pashkevich
함수가 포함 된 개체가없는 경우 그 주위에 개체를 만들 수 있으며 여전히 작동합니다. 예를 들어 콘솔 유형에서을 ({1:somefunction})선택한 다음 인쇄 된 객체 내부의 기능을 마우스 오른쪽 버튼으로 클릭하십시오.
— 수호자 1
47

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

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

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

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

— 찌르다
소스
1
그것은 나를 위해 작동하지 않습니다 (페이지 내에 정의 된 기능조차 포함) :> toggle_search ReferenceError : toggle_search가 정의되지 않았습니다
— Ryan DuVal
아아, 내 편집을 참조하십시오. 검색 기능을 사용하면 도움이 될 것입니다. Chrome devtools는 IDE가 아니며 디버거입니다 :)
— joar
1
현재 활성화 된 함수 정의를 찾는 데 사용됩니다.
— Patrick
1
실제로 함수가 현재 범위 내에 정의되어 있음을 의미합니다 .
— 조나단
1
@aroth 적어도 Chrome 45에서는 다시 작동합니다. 나는 이것이 게시되었을 때와 지금 사이에 어딘가에 변화가 있다는 것을 알고 있습니다. 결론적으로 다시 작동하는 것 같습니다.
— joar September
32

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

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

ctrl+ shift+O

또는 OS X에서 :

⌘+ shift+O

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

— arthur.sw
소스
1
글쎄, 이것이 보이는 것은 임의의 함수 호출의 "정의로 이동"하는 것이 아니라 "현재 파일의 모든 함수 이름을 보여주고 당신을 보자"라는 것입니다.
— Scott Weaver
이것이 바로 내가 찾던 것, 파이어 폭스와 비슷한 기능입니다! 파이어 폭스에서는 개발자 도구를 열고 Ctrl + f를 누르면 모든 창 (HTML / CSS / Javascript 등)에서 JS 기능을 검색합니다. 다른 답변에서 언급 한 정규식 기능과 달리이 작업이 수행됩니다.
— javaBean007
@Randy, 어떤 버전의 크롬에? 어떤 OS? OS X에서 Chrome 버전 59.0.3071.115를 사용하며 정상적으로 작동합니다.
— arthur.sw
@ arthur.sw 죄송합니다.이 작업을 수행하려면 소스가 있어야한다는 것을 몰랐습니다. 콘솔에서도 작동 할 것으로 예상했습니다.
— 랜디
나를 위해 개발자 콘솔에서 해당 키 조합을 누르면 크롬 메뉴가 열립니다.
— Black
19

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

— 라즈 반 플라 비우스 팬더
소스
17

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

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

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

    • Firefox

      functionName.toSource()

    • 크롬

      functionName
— 디팍 딕 시트
소스
내가 찾고있는 함수는 stop ()이며 onmouseover = "this.stop ();"으로 사용됩니다. 내가 말한 것을 수행하면 다음을 반환합니다. stop () {[native code]} 이제 어떻게해야합니까?
— Tarik
functionName.toSource()최신 크롬 버전에서도 작동합니다.
— Sourav Ghosh
1
@Tarik 내장에 대한 온라인 문서를보십시오 stop.
— 기금 모니카의 소송
@QPaysTaxes 감사합니다. 이제 반환 할 때 다음을 이해합니다. stop () {[native code]} 네이티브 코드 의미 이것은 전용 함수가 아니며 내부 함수이므로 함수의 온라인 설명서를 찾아야합니다.
— Tarik
5

전역 함수를 찾는 가장 빠른 방법은 다음과 같습니다.

  1. 소스 탭을 선택 하십시오.
  2. 에서 시계 창 클릭 + 입력 창
  3. 전역 함수 참조가 알파벳순으로 먼저 나열됩니다.
  4. 관심있는 기능을 마우스 오른쪽 단추로 클릭하십시오.
  5. 팝업 메뉴에서 기능 정의 표시를 선택하십시오 .
  6. 소스 코드 창이 해당 기능 정의로 전환됩니다.
— 크리스 로빈슨
소스
1

Google 크롬에서 요소 검사 도구를 사용하면 Javascript 함수 정의를 볼 수 있습니다.

  1. 소스 탭을 클릭하십시오. 그런 다음 색인 페이지를 선택하십시오. 기능을 검색하십시오.

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

  1. 기능을 선택한 다음 기능을 마우스 오른쪽 버튼으로 클릭하고 "콘솔에서 선택된 텍스트 평가"를 선택하십시오.

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

— Subhro
소스
0

객체의 메소드 소스를 찾는 데 비슷한 문제가있었습니다. 객체 이름은 myTree이고 그 방법은 load입니다. 메서드가 호출 된 줄에 중단 점을 넣었습니다. 페이지를 다시로드하면 해당 시점에서 실행이 중지되었습니다. 그런 다음 DevTools 콘솔에서 메소드 이름과 함께 객체를 입력하고 myTree.loadEnter 키를 누릅니다. 메소드의 정의는 콘솔에 인쇄되었습니다.

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

또한 정의를 마우스 오른쪽 버튼으로 클릭하면 소스 코드에서 정의로 이동할 수 있습니다.

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

— 압 돌라
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.