13

状況は次のとおりです。複雑な Web アプリが機能しておらず、望ましくない動作が一貫して発生する可能性があります。問題の原因は不明です。

提案: すべての JavaScript コードの実行パスをトレースします。基本的に、2 つの巨大なログを生成し、これを diff アルゴリズムにフィードして、バグに関連する動作が分岐し始めた場所を特定します (原因はアプリケーションの動作からは明らかでなく、実際の JS コードのコピーを理解して取得するため) Web インスペクターから切り替えてコピーする必要があるページが多いため、実行が困難です. JS コードの重要な部分が (動的...) Perl 文字列)。

Chrome の Web インスペクターには、実行トレースを記録するためのオプションがありません。基本的に私が望むのは、実行された順序で、実行された JS のすべての行のログです。JS VM がシングルスレッドであることを考えると、これを入手するのは難しいことではないと思います。問題は単純に、既存のユーザー向けツールが、これほどハードコアなデバッグ用に設計されていないことです。Dev Tools の Profiler を見ると、明らかに必要な種類の計測が可能ですが、基本的にはトレースではなくプロファイリングを行うように設計されています。

どうすればこれを開始できますか? ソースから Chrome をビルドできる方法はありますか?

  • V8でJITをオフにしますか?
  • V8 によって評価されたすべての JavaScript 式をファイルに記録します

Chrome の開発側の経験はありません。たとえば、Chrome/Chromium/Canary の dev-builds/branches/versions/distros (違いは何ですか?) へのリンクは大歓迎です。

現時点では、バグのあるアプリを再設計するよりも、強力な js トレースを使用してブラウザーをインストルメント化する方が簡単なようです。ページのアーキテクチャはひどいものですが、機能は複雑で、ほぼ完全に機能します。欠けているピースを1つ見つけるだけです。

または、この種のツールが既に存在する場合、それらを検索できる他のキーワードは何ですか? 「コードトレース」は、私が思いつくことができる唯一のものです。

私はdynaTraceをテストしました。これは、私たちのアプリが IE をサポートしているため (実際、Chrome のサポートはベータ版から出たばかりです)、幸運な偶然でしたが、これはテキスト ダンプを生成しません。 . トレースの表現をそのように表示するのがどれほど難しいかを知っているので、これは私を本当に悲しくさせます。ツリー ビューを上下にスクロールして、Web アプリのおもちゃの例以外に、本当に役立つものを表示するのは誰でしょうか?

4

3 に答える 3

2

大規模な Web アプリを開発している場合は、そのコーディング部分についてテスト主導の戦略に従うことを常にお勧めします。いくつかのヒントを使用すると、簡単なユニット テスト スクリプト (QUnit を使用) を作成して、アプリのほぼすべての側面をテストできます。ここでは、潜在的なエラーとその解決方法をいくつか紹介します。

  1. 長期間存続するオブジェクトを登録するハンドラーと、それらを安全な方法で閉じるハンドラーを作成します。安全な方法が成功しない場合は、オブジェクト自体の管理が失敗しています。1 つの例は、バックボーン ゾンビ ビューです。ビューの close セクションに不適切なコードがあるか、親の close がフックされていないか、無限ループが発生しました。退屈ではありますが、すべてのビュー イベントをテストすることも有効です。

  2. データを取得するためのすべてのコードを特定のモジュール (DB 内のテーブル/ドキュメントごとに Backbone.Model オブジェクトを使用することがよくあります) 内に配置し、reqres パターンを使用してそれぞれのハンドラーを配置することで、それらを 1 つずつテストして確認できます。それらがすべて正しく取得および保存されている場合。

  3. 複雑な計算が必要な場合は、関数またはモジュールで抽象化して、既知のデータで簡単にテストできるようにします。

  4. アプリでデータ バインディングを使用する場合、バインディングを含むビューに対してテストするすべてのデータの JSON スキーマを用意することをお勧めします。必要なすべてのデータをスキーマと照合します。これは Backbone.Model にも適用されます。

  5. 優れた IDE を使用することも役に立ちます。PyCharm (バックエンドに Python を使用する場合) または WebStorm は、JavaScript/CoffeeScript のテストと開発に非常に適しています。ブラウザ内の特定の場所でコードをブレークポイントして調べることができます! また、オートコンプリートのためにコードを実行し、その方法でいくつかのエラーを確認できます。

  6. コードでのモジュールの使用を十分に奨励することはできません。これを行うための JavaScript の公式な方法はありませんが (次の ECMAScript ドラフトにはそれがあります)、優れたライブラリを使用することはできます。良いものは次のとおりです: RequireJS、CommonJS、または Marionette.Module (フレームワークとして Marionette を使用する場合)。Ember/AngularJS もこの種の機能を提供していると思いますが、私は個人的にそれらを使用したことがないので、よくわかりません。

これはあなたの問題に対する即時の解決策を提供しない可能性があり、（IMO）簡単な解決策もないと思います。私の焦点は、エラーを簡単に発見して対処できるように開発する方法を示すことでした。開発段階では、(ユニット テストに応じて) そのすべてが行われました。私たちのプログラマーの自我が私たちに反対のことを信じさせたいと思っている限り、エラーは常に発生します。私が助けてくれることを願っています:)

于 2014-01-27T20:17:37.980 に答える