4

問題が多いと思われるサードパーティの統計ライブラリを使用しています。サイズが大きく圧縮されているため、デバッグは特に簡単ではありません。私は Chrome Dev Tools を使用していますが、名前による呼び出し回数で関数をランク付けするためにどのようなオプションがあるのだろうかと思っていました。答えはプロファイラー タブだと思いましたが、キャプチャしたプロファイルは、長いチェーンで「1 行目」を参照する JS ファイルのみを文書化しています。

これは私のアプリをフリーズさせており、デバッグのためであっても、コードを変更することはできるだけ避けたいと思っています。不明な点があれば教えていただけると幸いです。

編集: 「フレーム チャート」または同様のものと呼ばれる、水平方向に進む時間増分に基づいて垂直方向に積み上げられた機能ブロックを表すタイムラインを示す chrome dev ツールの最近のデモをどこかで覚えているようです...それは理想的ですが、できます私の人生のために今すぐリンクを覚えておいてください。誰かがこのツールが何であるかを知っていれば、これに Canary を使用することにまったく反対しませんか?

4

2 に答える 2

3

DevTools に関する最新のビデオはこちらhttp://youtu.be/x6qe_kVaBpg?t=19m44s

DevTools に関するさまざまなトピックをカバーし、CPU プロファイルに関するセクションも含まれています。

そのため、CPU プロファイルを記録して調べる必要があります。

ボトムアップ ビュー

また、FlameChart ビューを使用することもできます。

フレームチャート ビュー

BottomUp または TopDown または FlameChart バーの項目をクリックすると、[ソース] パネルに関数本体が表示されます。

縮小版

スクリーンショットのようにソースが縮小されている場合は、ソース パネルのステータス バーのボタンを押すことができます。2 つの中かっこ {} のように見えます。次に、DevTools がソースをフォーマットします。

PrettyPrinted バージョン

そのアクションは、タイムライン、CPUProfile などの他のすべての場所にあるソース ファイルへのすべてのリンクに影響します。最初のスナップショットの例として、スクリプトの縮小版の 778 行目にある関数 O.Pk を見ました。ソースファイルをきれいに印刷した後、関数へのリンクが自動的に変更されました。現在、15871行を指しています。

リンクの変更

于 2013-05-30T20:44:31.957 に答える
0

答えは「タイムライン」タブのようです。通常のクロムで動作するようです。ハングの原因となったアクションをトリガーする直前にタブを記録するように設定し、ハングが停止したら (約 20 秒かかりました)、記録を停止し、左右のセレクターを使用してマスター タイムライン (上部) を拡大しました。 「イベント」が選択されていると、実行期間が長くなります（上部）。

キャプチャ後のタイムライン タブ

そこからドロップダウンを展開しただけで、探していたものが得られました。(ライブラリを特定するのを避けるために js のファイル名をぼかしました) が、スクリーンショットを含めています。

于 2013-05-30T19:13:15.713 に答える