Find JavaScript function definition in Chrome

前端 未结 11 2285
难免孤独
难免孤独 2020-11-28 17:16

Chrome\'s Developer Tools rock, but one thing they don\'t seem to have (that I could find) is a way to find a JavaScript function\'s definition. This would be super handy fo

相关标签:
11条回答
  • 2020-11-28 17:58

    If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:

    Further Reading:

    • Chrome DevTools > JavaScript Debugging Reference
    0 讨论(0)
  • 2020-11-28 18:03

    2016 Update: in Chrome Version 51.0.2704.103

    There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:

    ctrl + shift + O

    or in OS X:

    + shift + O

    This enables to list and reach members of the current file.

    0 讨论(0)
  • 2020-11-28 18:04

    I find the quickest way to locate a global function is simply:

    1. Select Sources tab.
    2. In the Watch pane click + and type window
    3. Your global function references are listed first, alphabetically.
    4. Right-click the function you are interested in.
    5. In the popup menu select Show function definition.
    6. The source code pane switches to that function definition.
    0 讨论(0)
  • 2020-11-28 18:11

    You can print the function by evaluating the name of it in the console, like so

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

    this won't work for built-in functions, they will only display [native code] instead of the source code.

    EDIT: this implies that the function has been defined within the current scope.

    0 讨论(0)
  • 2020-11-28 18:14

    This landed in Chrome on 2012-08-26 Not sure about the exact version, I noticed it in Chrome 24.

    A screenshot is worth a million words:

    I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!

    Hope you all find it helpful!

    0 讨论(0)
提交回复
热议问题