Chromeデベロッパーツールで特定のファイルに移動する方法

97

私は重いフロントエンドアプローチでWebアプリケーションを開発しています。DojoとAMD-wayを使用することで、現在100を超える異なるJavaScriptファイルを簡単にロードできるテスト画面があります。

特定の問題をデバッグする場合、または特定のファイルの古いバージョンが表示されるかどうかを確認する場合、Chromeデベロッパーツールの[ソース]タブでファイルを見つけるのが非常に困難です。

ファイルの名前を入力して、そのファイルのソースに移動するためのショートカットやアクションはありますか？

javascript debugging google-chrome google-chrome-devtools frontend

— アルファ
ソース

2

コンソールの右下に、歯車のアイコンがあります。クリックして。設定ウィンドウの最後のタブには、ショートカットタブがあります。あなたは答えのような主要なコンボを見ることができます。

— epascarello、2013年

Google Dev Toolsで「ファイルに移動」（関数名、CSSのクラス名を検索できる柔軟で便利なツール）を使用してください

— 。GoogleDev

142

ソース]タブの使用中にCTRL+ O（⌘+ Ofilenameでスクリプト、スタイルシートとスニペットを検索するMac用）。

（CTRL+ SHIFT+ Oを使用して、ファイルを表示するときにJavaScript関数/ CSSルールをフィルタリング/ナビゲートします）

— CD ..
ソース

これは知っておくと便利です。（Chrome 35より前のバージョンでは）[ソース]タブのファイルナビゲーターにフォーカスして入力するだけでファイル名検索を開始できました。この機能を完全に削除するのではなく、ショートカットの後ろに隠したことを知っておくのは良いことです。=）

— rakslice 2014年

フィルター/検索の注意点は、正確な検索やワイルドカードを実行できないように見えることです。検索すると、ファイル名に.jsa jまたはan sまたはaが含ま.れるファイルが返されます：/

— worc

15

CTRL+ PWindowsで検索入力を表示します。

⌘+ P— Macの場合。

— アレクセイミアルキン
ソース

2

OとP同じ動作をしているようです。廃止されたのではないかと思います。

— isherwood

2

Windowsの場合：

CTRL+ SHIFT+ F を使用して、ファイル内のコンテンツを検索します。

CTRL+ SHIFT+ O を使用してファイル名を検索します。

— ライブラブ
ソース

0

Mac：Command + O Windows：Ctrl + O

— ジャッキー
ソース