web-dev-qa-db-ja.com

ChromeでJavaScriptの関数定義を探す

ChromeのDeveloper Toolsは揺るがないが、彼らが持っていないように見える（私が見つけることができる）ことの1つは、JavaScript関数の定義を見つける方法です。私は多くの外部JSファイルを含むサイトで作業しているので、これは私にとって非常に便利でしょう。確かにgrepはこれを解決しますが、ブラウザではずっと良いでしょう。つまり、ブラウザはこれを知っている必要があります。私が期待していたのはこんな感じでした。

  • ページから[要素の検査]を選択すると、[要素]タブの行が強調表示されます。
  • 行を右クリックして[関数定義に移動]を選択します。
  • 正しいスクリプトが「スクリプト」タブにロードされ、関数定義にジャンプします。

まず第一に、この機能は存在し、私はそれを見逃していますか？

そうでなければ、私はこれがWebKitから来るのではないかと思いますが、 開発者ツールの機能要求 または WebKitのBugzilla には何も見つかりませんでした。

javascriptgoogle-chrome-devtools
254
Ryan DuVal

fooという名前の関数を探しているとしましょう。

  1. （Chrome dev-toolsを開きます）、
  2. Windows： ctrl + shift + FまたはmacOS： cmd + optn + F。これにより、すべてのスクリプトを検索するためのウィンドウが開きます。
  3. 「正規表現」チェックボックスをチェックしてください。
  4. foo\s*=\s*functionを検索します（これら3つのトークンの間に任意の数のスペースを入れてfoo = functionを検索します）。
  5. 返された結果を押します。

関数定義のもう1つの変形は、function\s*foo\s*\(に対してfunction foo(で、これら3つのトークンの間には任意の数のスペースがあります。

344
plesiv

これ 2012-08-26にChromeに上陸した 正確なバージョンについてはよくわからない、私はChrome 24でそれに気付いた。

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

コンソールのメソッドでオブジェクトを調べています。 [関数定義を表示]をクリックすると、ソースコード内で関数が定義されている場所に移動します。あるいは、function () {という単語の上にカーソルを置くと、ツールチップに関数の本文が表示されます。このようにプロトタイプチェーン全体を簡単に調べることができます。 CDTは間違いなくロック！

みんなが役に立つことを願っています！

71
Dmitry Pashkevich

あなたはそのようにコンソールでそれの名前を評価することによって関数を印刷することができます

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

これは組み込み関数では動作しません。それらはソースコードの代わりに[native code]のみを表示します。

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

44
joar

2016 Update：Chromeバージョン51.0.2704.103で

Go to memberショートカットがあります（settings > shortcut > Text Editorにリストされています）。関数を含むファイル（DevToolsのsourcesパネル内）を開き、以下を押します。

ctrl + shift + O

またはOS Xの場合：

⌘ + shift + O

これにより、現在のファイルのメンバーを一覧表示して到達することができます。

30
arthur.sw

関数定義の場所に移動するもう1つの方法は、デバッガでどこかにアクセスしてコンソールに関数にアクセスし、その関数の完全修飾名を入力することです。これにより、コンソールに関数定義が印刷され、クリックするとその関数が定義されているスクリプトの場所を開くリンクが表示されます。

17
Răzvan Flavius Panda

ブラウザが異なれば、その方法も異なります。

  1. ページを右クリックして[Inspect Element]を選択するか、またはを押して、コンソールウィンドウを最初に開きます。 F12。

  2. コンソールで、...と入力します。

    • Firefox

      functionName.toSource()

    • クロム

      functionName
15
Deepak Dixit

グローバル関数を見つける最も簡単な方法は、次のとおりです。

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

chromeコンソールの場合：

debug(MyFunction)
MyFunction()
2
Igor Krupitsky

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

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

enter image description here

  1. 関数を選択し、関数を右クリックして、「選択したテキストをコンソールで評価する」を選択します。

enter image description here

0
subhro