🙌🏾 📰 🧑🏽‍🤝‍🧑🏽 Webアプリケーションのデバッグとプロファイリングを開始します 🌜 🦄 🎉

エントリー

Habréには、Web開発の興味深い複雑な側面を説明する記事が多数ありますが、Web開発者としてのキャリアの初めに、「PHPで24時間」から深刻なレベルでの開発であり、この問題に関する私の経験を共有したいと思います。

Webアプリケーションの機能により、クライアントとサーバーの2つの部分に分割されます。クライアント側では、JavaScriptコードが機能しています（VBScriptはどこかで見つかるかもしれませんが、おそらくこの場合は考慮しません）。サーバー側では、原則として多くのものがありますが、 Webアプリケーションのサーバー側。クライアント側でのFlashアプリケーションのデバッグとプロファイリングについて話すことも興味深いでしょうが、取り上げられているトピックはすでに広範囲に渡っているので、今のところは放っておきましょう。

HTMLコードの分析と検証は、クライアントコードのデバッグタスクに起因する場合もあります。これは、プログラミングの分野だけでなく重要でもあるようです。

検討された問題の一部は他の記事ですでに検討されており、それらへのリンクを提供しました。

クライアントコードのデバッグとプロファイリング

JavaScriptコードをデバッグする「クラシック」な方法は、 alert

関数とその派生物を使用することです。キャリアの初めに、JavaScriptのprint_r

関数を個人的に作成したことを覚えています。配列とオブジェクトのデバッグ情報を出力する機能がなかったからです。次のようになりました。

 function print_r(variable) { if (variable instanceof Array || variable instanceof Object) { var key; for (key in variable) alert(key + ' => ' + variable[key]); } else { alert(variable); } }

もちろん、スピーチのプロファイリングはまったく行われていません。

このアプローチにより、コンソールオブジェクトに関する情報でさえ革命的です。

Webアプリケーションのクライアント側の仕様では、一般的なすべてのブラウザーでコードのデバッグが必要です。もちろん、Internet Explorerおよび他の通常のブラウザーでのデバッグで十分な場合がよくありますが、すべてのオプションを検討します。

Mozilla Firefox

おそらく、Firefoxはクライアントコードのデバッグの先駆者と言えるでしょう。長い間、開発に最適なブラウザとして示されていましたが、 Firebug拡張機能のおかげで、HTMLコードの検証を除く必要な機能がすべて含まれている可能性があります。

また、バージョン4から、組み込みのWebコンソールが登場しました。これは、Firebugの[コンソール]タブと[ネットワーク]タブの機能の一部、およびいくつかのCSSデバッグ機能を実装しています。

バージョン6以降、シンプルなJavaScriptエディターが登場しました。これはFirebugの機能の1つも実装しており、ブラウザーでコードを直接記述および実行できます。

バージョン10から、ページのインスペクターが登場しました。これにより、HTMLコードとCSSプロパティを調べることができます。つまり、HTMLタブの機能を実装します。

HTMLコードの検証には、通常、 Html Validator拡張機能が責任を負います。サイトのメインページhabrahabr.ruのエラー数を示すアイコンだけが、ページインスペクターの画像のブラウザーの右下隅に表示されます。

また、この機会を利用して、このブラウザーには生活を楽にする多くの拡張機能があることを示します。これについては、Habréで既に対応する記事がありました。

Google ChromeとSafari

これらのWebKitベースのブラウザには、非常によく開発され、Firebugとほぼ同じ機能を実装するWeb Inspector開発ツールが組み込まれています。同時に、私たちは彼に敬意を払わなければなりません。彼はブラウザを遅くしません。これは「ビッグブラザー」によくあることです。

Chromeでは、 Ctrl+Shift+I

押すか、単にF12

で呼び出すことができます。 Safariには非表示になっています。使用するには、ブラウザー設定で開発機能を有効にする必要があります。後で、開発者のツールは、メインメニューのCtrl+Alt+I

開発]項目から、またはキーボードショートカットのCtrl+Alt+I

で利用できるようになりますCtrl+Alt+I

HTMLコードを検証するには、サードパーティの拡張機能もインストールする必要があります。たとえば、Chromeの場合、 Validityになります。これまでのところ、Safariは適切なものを見つけることができませんでした。

オペラ

Operaには「Opera Dragonfly」と呼ばれる組み込みの開発者ツールもあり、キーボードショートカットCtrl+Shift+I

を使用していつでも呼び出すことができますCtrl+Shift+I

これはWebKitが表すものと似ており、同様の機能と利点がありますが、私の意見ではあまり便利ではありません。

同志hommが示唆したように、Operaには、validator.w3.orgに検証ページを送信する簡単な手段があります。サイトの表示領域のコンテキストメニューには、「Web標準に準拠しています」という項目があります。これはまさにこれに責任があります。

OperaディレクトリにHTML検証用の拡張機能があると、状況は緊張します。このため、 Validator拡張には代替手段がありません。

インターネットエクスプローラー

バージョン8以降、開発者ツールがここに表示されました。他のブラウザーの場合とほぼ同じ機能を提供しますが、Internet Explorerのアクティビティの他の側面と同様に、Internet Explorerはいくつかの機能と説明できないほどの猶予を提供します。重要なポイントは、互換モードだけでなく、古いバージョンをエミュレートする機能です。

コーダーとJSプログラマーの涙がこぼれたバージョン7では、そのようなツールは存在しないことが一般に受け入れられています。関連記事があったサードパーティのソリューションCompanion.JSがあります。もちろん、その機能は通常のツールよりもかなり劣りますが、このツールを使用すると、少なくとも「アラート指向デバッグ」よりも高度なコードをデバッグできます。

同志atdは、これらの辛抱強いバージョンには、Internet Explorer Developer Toolbarと呼ばれる「ネイティブ」ツールがあることを示唆しましたが、個別のインストールが必要でした： www.microsoft.com/download/en/details.aspx?id=18359

また、同志k12thは、Visual Studioがあれば、その中のコード（「Web開発ツール」のコンポーネント）をデバッグできることを思い出しました。 Visual Web Developer Expressの無料版に関する情報も見つけることができます。

サーバーコードのデバッグとプロファイリング

Xdebug

最初に合意したように、サーバーでPHPを使用する場合を検討します。ここで、「古典的な」デバッグ方法はecho

、 print_r

、およびvar_dump

ですが、最高のハウス-Xdebugのようなデバッグツールもあります。個人的には、研究所での勉強の詳細に関連して、「Delphiのように」見えました。

xdebug拡張モジュールを使用すると、少なくともステップごとにコードを実行し、変数の値を表示できます。これにより、PHPプログラミングが新しいレベルに引き上げられます。 xdebugでの作業の複雑さについては、対応する記事がありました。 XDebugは通常、GNU / Linuxリポジトリで使用できますが、Windowsでは、dllファイルをコピーしてインストールすることもそれほど難しくありません。

この拡張機能を使用する場合、着信接続（デフォルトではポート9000）がサーバーから開発者のコンピューターに到着し、それを処理する必要があります。これを行うには、IDEを適切に構成する必要があります。

ところで、IDEを使用することも、前進するための前提条件です。一部のプログラマーは、コードハイライト付きのメモ帳とIDEのプログラミングの違いは大きなプロジェクトでしか見られないと考えていますが、個人的には「Hello world！」というプログラムでも違いが見えると思います。。

XHProf

拡張について

はい、xdebugはプロファイリング機能を提供しますが、私は個人的にこの目的のためのXHProfの Facebook開発が好きです。私は正直にテストを行っていませんでしたが、この拡張機能は実稼働サーバーや実際の負荷の下でのプロファイリングにはるかに適していると考えられています。

設置

残念ながら、この拡張機能はどのリポジトリにも含まれていません。これはPECLの一部ですが、何らかの理由で通常の方法でインストールすると問題が発生することがよくあります。このため、ソースからインストールする必要があります。

 #   wget http://pecl.php.net/get/xhprof-0.9.2.tgz #   tar -xvf xhprof-0.9.2.tgz #   ,     cd xhprof-0.9.2/extension/ #     phpize ./configure make make test #    checkinstall

xhprof.ini

構成xhprof.ini

は、おおよそ次の機能を提供します。

[xhprof] 
      

        
        
        
      

     extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so 
      

        
        
        
      

     ;    
      

        
        
        
      

     xhprof.output_dir="/var/log/xhprof/"

プロファイリング

アーカイブを解凍して受け取るディレクトリには、拡張ソースに加えて、プロファイリング結果を調査するためのWebインターフェイスと、アプリケーションをプロファイリングするためのライブラリが含まれています。

プロファイリングの例を示します。次の要素をアプリケーションコードに含める必要があります。

 //  ,   //    ,     xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* *    */ //  ,  , //     $xhprofData = xhprof_disable(); include_once XHPROF_DIR.'/xhprof_lib/utils/xhprof_lib.php'; include_once XHPROF_DIR.'/xhprof_lib/utils/xhprof_runs.php'; $xhprofRuns = new XHProfRuns_Default(); $namespace = 'some-unique-name'; $runId = $xhprofRuns->save_run($xhprofData, $namespace); echo "<!-- ", $runId, ' ', $namespace, " -->\n";

ここで、定数XHPROF_DIR

は、ダウンロードしたアーカイブを解凍したディレクトリを指します。

結果を分析するには、同じWebインターフェイスが必要です。 $XHPROF_DIR/xhprof_html/

で取得できます-このように任意に指定します。たとえば、Webサーバーからアクセス可能な場所に配置し、 example.com/system/xhprof/

で利用できexample.com/system/xhprof/

。作業結果を分析するには、次のようにアクセスする必要があります。

example.com/system/xhprof/?run=%runId%&source=%namespace%

同様の結果が得られます。

プロファイリングは、継続的にアプリケーションコードに含めることができます。また、たとえば、特定の確率で、または特定の条件の存在によってランダムに開始するように作成することもできます。たとえば、次のように：

 $needProfiler = (mt_rand(0, 100) < 10 or isset($_COOKIE['xhprof'])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);

この場合、顧客からの苦情や疑いがある場合、特定の期間のプロファイリング結果を参照できます。 namespace

パラメーターを使用して、アプリケーションのどの部分（どのスクリプト、コントローラー、アクション）がプロファイルされたかを判別できます。

SQLクエリのプロファイリング

原則として、データベースの操作はアプリケーションのボトルネックです。このため、クエリプロファイリングをお勧めします。たとえば、mysql拡張機能のラッパーであるクラスの一部を考えます。はい、私は彼らがこの拡張機能をあまり好きではなく、古き良きIE6よりも彼に死を願っていることを知っています。私は彼に使用するように勧めません。ただこのクラスは私の指先にぴったりです。

 /** *  * @param string $sql  * @param array $params  * @param string $query   * @return array  */ public function query($sql, array $params = array(), &$query = '') { $start = microtime(TRUE); //  ,  ""  $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($sql, $time); //   } private function _addProfilerData($query, $time) { if (is_array(self::$profilerData)) { self::$profilerData[] = array( 'query' => $query, 'time' => $time ); } } public function __destruct() { if (is_array(self::$profilerData)) { $this->_writeProfilerData(); self::$profilerData = FALSE; } //    } private function _writeProfilerData() { $values = array(); foreach (self::$profilerData as $row) { $query = mysql_real_escape_string($row['query'], $this->con); $time = (float)$row['time']; $hash = crc32($row['query']); $values[] = "($hash, '$query', $time)"; } if ($values) { $strValues = implode(', ', $values); $sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VALUES $strValues"; @mysql_query($sql, $this->con); } }

ここでは、クエリプロファイリングデータはprofiler_queries

テーブルに保存されます。このテーブルは、保留中の挿入を行う機能を提供するため、MyISAMまたはArchiveタイプにすることができます。これにより、プロファイリング時の応答に不要な遅延が発生しません。また、テーブル内のクエリをよりよく検索するには、クエリのcrc32ハッシュが書き込まれるINT

型の列を作成することをお勧めします。この列にインデックスを作成する必要があります。

おわりに

記事はかなり大きいことが判明しました。おそらく私はここに上に行って、すでに触れられているトピックに触れましたが、近いうちに似たようなものを読んだ場合-すべての情報が集められ、有用なリンクが与えられた記事は、私にとって非常に貴重です。私の記事が、啓発への道の誰かを助けることを願っています。

Webアプリケーションのデバッグとプロファイリングを開始します