ChromeでJavaScript関数定義を見つける

Chromeの開発者ツールはすばらしいですが、（私が見つけることができた）Chromeにないように見えることの1つは、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これら3つのトークンの間に任意の数のスペースを入れて検索）、
5. 返された結果を押します。

関数定義のもう1つのバリアントはfunction\s*foo\s*\(、function foo(これら3つのトークンの間に任意の数のスペースがある場合です。

これは2012-08-26にChromeに導入されまし た。正確なバージョンがわからないので、Chrome 24で確認しました。

スクリーンショットは100万語の価値があります。

コンソールでメソッドを使用してオブジェクトを検査しています。「関数定義を表示」をクリックすると、ソースコードの関数が定義されている場所に移動します。または、function () {単語の上にカーソルを合わせると、ツールチップに関数本体が表示されます。このようにプロトタイプチェーン全体を簡単に検査できます！CDTは間違いなくロックです!!!

皆様のお役に立てれば幸いです。

次のように、コンソールで関数の名前を評価して関数を印刷できます

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

これは組み込み関数では機能せず[native code]、ソースコードの代わりに表示されるだけです。

編集：これは、関数が現在のスコープ内で定義されていることを意味します。

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()

グローバル関数を見つける最も簡単な方法は簡単です：

1. 「ソース」タブを選択します。
2. でウォッチペインをクリック+とタイプの窓
3. グローバル関数参照は、最初にアルファベット順にリストされています。
4. 目的の関数を右クリックします。
5. ポップアップメニューで[ 関数定義を表示]を選択します。
6. ソースコードペインがその関数定義に切り替わります。

Google Chrome、Inspect要素ツールでは、Javascript関数の定義を表示できます。

1. 「ソース」タブをクリックします。次に、インデックスページを選択します。関数を検索します。

2. 関数を選択してから関数を右クリックし、[コンソールで選択したテキストを評価]を選択します。

すでにデバッグしている場合は、関数にカーソルを合わせると、ツールチップを使用して関数定義に直接移動できます。

さらに読む：

• Chrome DevTools> JavaScriptデバッグリファレンス

オブジェクトのメソッドのソースを見つけるのと同じような問題がありました。オブジェクト名はmyTreeで、メソッドはでしたload。メソッドが呼び出された行にブレークポイントを設定しました。ページをリロードすると、その時点で実行が停止しました。次に、DevToolsコンソールで、オブジェクトをメソッド名と共に入力し、myTree.loadEnterキーを押しました。メソッドの定義はコンソールに出力されました：

また、定義を右クリックすると、ソースコードでその定義に移動できます。