Chrome에서 JavaScript 함수 정의 찾기

Chrome에서 JavaScript 함수 정의 찾기

Chrome의 Developer Tools는 훌륭하지만, 그들이 가지고 있지 않은 것 중 하나는 JavaScript 함수의 정의를 찾는 방법입니다.외부 JS파일이 많은 사이트에서 작업하고 있기 때문에 매우 편리합니다.물론 GREP로 해결되지만 브라우저가 훨씬 낫습니다.내 말은, 브라우저가 이걸 알아야 하는데 왜 노출시키지 않는거지?내가 예상한 것은 다음과 같았다.

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

우선 이 기능은 존재하지만 놓치고 있는 것입니까?

그렇지 않으면 WebKit에서 온 것으로 생각되지만 개발자 도구의 기능 요청이나 WebKit의 Bugzilla에 대한 정보를 찾을 수 없습니다.

예를 들어 다음과 같은 함수를 찾습니다.

1. (Chrome 개발 도구 열기),
2. Windows: + + 또는 MacOS: + +그러면 모든 스크립트를 검색할 수 있는 창이 열립니다.
3. "정규 표현" 확인란을 선택합니다.
4. 을 찾다foo = function 사이에 경우).
5. 반환된 결과를 누릅니다.

함수 정의의 또 다른 변형은 다음과 같습니다.function foo(이 3개의 토큰 사이에 임의의 수의 공간을 포함할 수 있습니다.

2012년 8월 26일에 Chrome에 도착했는데, 정확한 버전을 알 수 없어서 Chrome 24에서 확인했습니다.

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

콘솔에서 메서드를 사용하여 개체를 검사하고 있습니다.show function definition(기능 정의)입니다. 그 위에 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 + +

또는 OS X:

⌘ + +

이를 통해 현재 파일 구성원을 나열하고 연결할 수 있습니다.

함수 정의 위치를 탐색하는 또 다른 방법은 함수에 액세스할 수 있는 위치에서 디버거를 중단하고 콘솔에 함수 이름을 입력하는 것입니다.그러면 콘솔에 함수 정의가 인쇄되고 클릭 시 함수가 정의되어 있는 스크립트 위치가 열리는 링크가 나타납니다.

이것은 브라우저에 따라 다릅니다.

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

2. 콘솔에 다음과 같이 입력합니다.

   • 파이어폭스

     functionName.toSource()
     

   • 크롬

     functionName
     

Chrome 콘솔:

debug(MyFunction)
MyFunction()

글로벌 기능을 찾는 가장 빠른 방법은 다음과 같습니다.

1. 소스 탭을 선택합니다.
2. [ Watch ]페인으로 [+]를 클릭하여 창을 입력합니다.
3. 글로벌 함수 참조가 알파벳 순으로 먼저 나열됩니다.
4. 원하는 기능을 마우스 오른쪽 버튼으로 클릭합니다.
5. 팝업 메뉴에서 Show function definition(함수 정의 표시)을 선택합니다.
6. 소스 코드 페인이 해당 함수 정의로 전환됩니다.

Google chrome 요소 검사 도구에서 Javascript 함수 정의를 볼 수 있습니다.

1. Sources 탭을 클릭합니다.그런 다음 인덱스 페이지를 선택합니다.함수를 검색합니다.

2. 함수를 선택한 다음 함수를 마우스 오른쪽 버튼으로 클릭하고 "콘솔에서 선택한 텍스트 평가"를 선택합니다.

오브젝트 메서드의 출처를 찾는데도 문제가 있었습니다.은 「」입니다.myTree그 방법은load메서드가 호출된 라인에 중단점을 두었습니다.페이지를 새로고침하여 이 시점에서 실행이 중지되었습니다. 다음 이름과 DevTools 콘콘솔 then솔 then then then then then then then then then then then then then then then then then then then then then then then then then then then then then then then then ） 。myTree.load라고 입력합니다.메서드의 정의는 콘솔에 인쇄되었습니다.

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

이미 디버깅을 하고 있는 경우 함수 위로 마우스를 가져가면 툴팁을 사용하여 함수 정의로 직접 이동할 수 있습니다.

상세 정보:

• Chrome DevTools > JavaScript 디버깅레퍼런스

VM에 정의된 JS 기능이 있습니다. 아래의 Chrome 콘솔 패널에서 이 명령을 사용할 수 있습니다.foo 함수명은 다음과 같습니다.window.P.execute

>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'

풀 펑션 코드를 받았습니다.

언급URL : https://stackoverflow.com/questions/9828876/find-javascript-function-definition-in-chrome