ローカルでのデバッグ (フライホイールによる): 初心者向けガイド

公開: 2022-08-13

Web サイトまたは Web サイトのローカル インストール内で問題が発生すると、神経質になることがあります。 結局のところ、サイトのパフォーマンスの問題やバグにより、サイトのダウンタイムが発生する可能性があります. また、サイトのダウンタイムは、トラフィックの損失、機会の損失、さらには収益の損失を意味する可能性があります。

ありがたいことに、サイトの問題を特定して修復するためのデバッグ ソリューションが数多く存在します。 しかし、自分の状況に最適な方法をどのように知ることができますか?

ローカルでは、デバッグに利用できる多方面からのアプローチがあります。 ここでは、ローカルに含まれるデフォルトのデバッグ オプション、エラーを特定する方法、および問題をより迅速かつ効率的に発見して修正するために使用できる追加のアドオンについて説明します。

ローカルの Xdebug とは何ですか?

Local でのデバッグ方法について説明する前に、Local に存在するデバッグ ツールである Xdebug とその最も注目すべき機能について説明する必要があります。

Xdebug は、実際には、デバッグ プロセスを簡素化する PHP 拡張機能です。 主に、 var_dump ()関数の書式設定がより明確になり、特定のエラーに関する警告と通知が追加されます。 これにより、より直感的なユーザー エクスペリエンスが実現します。

xdebug var ダンプの違い

ご存じない方のために説明すると、 var_dump()は PHP の便利な機能であり、コードの問題点をすばやく明らかにします。 ただし、ここでの違いは、手元に Xdebug がない場合、 var_dump()を呼び出すとコードが生成されることです。 はるかに読みにくいでしょう。 さらに、 var_dump()を呼び出す場合でも、非常に特殊な方法で PHP をフォーマットする必要があります。 そもそも。

Xdebug は、発生したエラーに関する詳細な情報を提供するため、Local で使用できます。 また、特に大規模な問題のデバッグ プロセスを効率化するステップ デバッガーも付属しています。 ステップ デバッガーは、特定のブレークポイントでコードを段階的に評価できるようにすることで機能します。 これにより、コードを小さなセクションで評価し、問題をより簡単に見つけることができます。

そして、最良の部分は、Xdebug がデフォルトでローカルで有効になっていることです。そのため、開始するために設定をいじる必要さえありません。 ローカルを開いて移動するだけです。

ローカルで Web サイトをデバッグする方法

ローカルで Web サイトをデバッグするには、いくつかの重要な方法があります。 ここで説明する主な手順は次のとおりです。

  1. ブラウザ コンソール エラーの特定
  2. クエリ モニターの使用
  3. Xdebug および VS Code 経由
  4. Xdebug と PhpStorm を使用
  5. ステップのデバッグに Xdebug を使用する

飛び込みましょう。

1.ブラウザ コンソールのエラーを特定する

ローカルの Firefox ブラウザ コンソール

デバッグの最初のステップは、すべてのブラウザー開発者ツールの一部であるブラウザー コンソールを使用することです。 これにより、特別なツールを使用せずに Web ページのエラーを見つけることができます。 Local を起動し、選択したブラウザで問題のページにアクセスし、コンソールを使用してエラーを見つけます。 以下は、複数のブラウザー間でブラウザー コンソールにアクセスする方法の内訳です。

Chrome を使用している場合…

  1. Chrome ブラウザー メニューで[その他のツール] > [開発者ツール] に移動して、DevTools を開きます。 または、 Ctrl/Cmd+Shift+I を押します
  2. [コンソール] タブをクリックします。
  3. エラーが存在する場合は、すぐに表示されるはずです。 そうでない場合は、Web ページをリロードして生成してください。
  4. エラーの種類、エラーが発生した場所、およびブラウザー コンソール内の行番号をメモします。

Firefox を使用している場合…

  1. Firefox メニューで[その他のツール] > [Web 開発者ツール] に移動して、ブラウザー開発者ツールを開きます。 Ctrl/Cmd+Shift+Iもここで機能します。
  2. コンソールをクリックします タブ。 または、 [その他のツール] > [ブラウザ コンソール]からコンソールに直接アクセスすることもできます。
  3. エラーが表示されます。 そうでない場合は、ページをリロードしてください。

Safariをお使いの場合…

  1. Safari メニューで[設定] > [詳細設定]に移動して、開発者ツールを有効にします。 Option+Cmd+Iはあなたの友達です。
  2. [メニュー バーに [開発] メニューを表示する]の横にあるボックスをオンにします。 次に、ダイアログ ボックスを閉じます。
  3. [開発] > [エラー コンソールを表示]をクリックします。 上記と同じ取引。

この情報を利用して、ローカルに設定されたファイル システムに戻り、問題の原因となっている特定のコードを見つけて、修正を実装できます。 [サイト フォルダーに移動]ボタンを使用して、ローカル Web サイトの場所にアクセスします。

サイト フォルダに移動

2.クエリ モニターを使用してサイトのパフォーマンスの問題を修正する

WordPress でウェブサイトの問題を直接特定して修復することもできます。 実際、Query Monitor プラグインは、特にデバッグやパフォーマンスの問題の特定に最適です。 これは組み込みのローカル デバッグ ツールと組み合わせて使用​​するのに役立ち、サードパーティのプラグインやテーマの問題を特定するのに特に役立ちます。

プラグインは他のプラグインと同じようにインストールできます。 [プラグイン] > [新規追加] に移動し、名前で検索してください。 リストでそれを見つけて[今すぐインストール] をクリックし、ダウンロードしたら [アクティブ化] をクリックします。

クエリ モニターをインストールする

Query Monitor が教えてくれること

プラグインをインストールすると、WordPress ダッシュボードの上部に新しいメニュー オプションが表示されます。

クエリ モニターの管理バー メニュー

カーソルを合わせると、クエリ モニターのツールとオプションのドロップダウン リストが表示されます。 それらのいずれかを選択すると、下部にメニューが開き、現在のページの詳細を確認できます.

クエリ モニター コンソール

特に、クエリ モニターは、次のようなページのパフォーマンスの概要を示します。

  • ピーク時のメモリ使用量。 このツールは、特定の時間にページを生成するために使用されるメモリの量を示します。
  • ページ生成時間。 ページの生成にかかった時間を表示します。
  • データベース クエリ時間。 最後に、このツールは、データベースがテーマまたはプラグインのリクエストに応答するのにかかった時間を示します。

パフォーマンスの問題を超えて、このプラグインは、Xdebug と同じように、PHP のエラーと通知を特定することもできます。 ただし、その取り組みはサードパーティのテーマとプラグインに焦点を当てています. ここで便利なのは、エラーが存在する場合、 PHP エラーという適切な名前のツール内に新しいタブが表示され、各エラーとそのセキュリティ上の脅威が一覧表示されることです。 また、エラーが表示されるコード行と、特定のエラー コードまたは通知も表示されます。

これは、すでに稼働中または後期段階のテスト中の Web サイトにとって非常に役立ちます。 ただし、まだローカル開発段階にある場合は、ローカルで Xdebug を使用するのが最善の策です。

3.デバッグ用の Xdebug と VS Code のセットアップ

ローカルに戻ると、さまざまな方法で Xdebug を利用してローカル サイトのデバッグを実行できます。 いわば、費用対効果を高めるために、VS Code の機能を方程式に追加することができます。

VS Code は、拡張ツールとより直感的なユーザー インターフェイスを備えたオープンソースのコード エディターです。 これにより、行ごとのデバッグ プロセスがより直感的で見やすくなります。

Visual Studio コード vscode コード エディター

実際に VS Code を Xdebug Step Debugger に接続すると、大きな効果が得られます。 Local 内で使用するように設定する方法は次のとおりです。

  1. VS Code をダウンロードし、開発者の指示に従ってインストールします。
  2. PHP デバッガ拡張機能をダウンロードしてインストールします。 Local のドキュメントでは、このタスクに PHP Debug 拡張機能を推奨しています。
  3. [ローカル] で、[アドオン] > [Xdebug + VS Code ] をクリックします。
  4. [アドオンのインストール] をクリックします。
  5. 完了したら、 Enable & Relaunchを押します。
  6. ローカルでサイトを開き、[ユーティリティ] タブをクリックします。
  7. [実行構成を VS Code に追加] をクリックします。
  8. VS Code が起動し、デバッグ プロセスを開始できます。

VS Code を好まない場合は、タスクに別の編集ツールを使用できます。

4.デバッグ用の Xdebug と PhpStorm のセットアップ

xdebug および phpstorm ローカル アドオン

別のオプションは、Xdebug で PhpStorm を使用することです。 アドオンを介して Local に追加すると、Xdebug Step Debugger と連携して動作します。 インストールとセットアップは、上記の VS Code で説明したプロセスと非常によく似ています。 これを使用するには、次の手順を実行します。

  1. PhpStorm をダウンロードしてインストールします。
  2. ローカルで、アドオン > Xdebug + PhpStorm をクリックします。
  3. [アドオンのインストール] をクリックします。
  4. 繰り返しますが、完了したら有効にして再起動します。
  5. ローカルで任意のサイトを開き、ユーティリティをクリックします タブ。
  6. Add Run Configuration to PhpStorm をクリックします。
  7. PhpStorm がアクティブな状態で、ブレークポイントを発生させたい特定のコード行でガターをクリックして、ブレークポイントを設定します。
  8. [再生]をクリックして、デバッグ プロセスを開始します。

デバッグ プロセスを通じて詳細なガイダンスが必要な場合は、ステップ デバッグが常にオプションになります。

5.ステップのデバッグに Xdebug を使用する

ステップ デバッグは非常に便利なツールであり、Xdebug の一部であり、本質的にデバッグ プロセスを介して手を保持します。 VS Code と PhpStorm (および他の多くの IDE とテキスト エディター) と連携して、詳細でありながらわかりやすいデバッグ ツール、手順、およびプロトコルを提供します。

ローカルでは、Xdebug を設定するために何もする必要はありません。デフォルトで自動的に有効になっています。 複雑なテスト環境 (複数のシステムが同時に貢献している) がある場合は、より複雑なセットアップ手順がありますが、今のところ、1 つのシステムで 1 つの Local のインストールでデバッグを実行するだけでよいと想定します。

ステップ デバッグを使用するには、前の 2 つのセクションで概説した手順に従うだけで済みます。 この機能は、VS Code または PhpStorm の両方で動作します。 すべての設定が完了すると、ブレークポイントが自動的に設定され、コードが 1 つずつ再生されます。 これにより、コードを実行し、エラーを確認し、発生したエラーを修正する直感的な方法が提供されます。

ローカルでのデバッグが簡単に

ご覧のとおり、Local でのデバッグは実際には非常に簡単なプロセスであり、最小限のセットアップで開始できます。 主要なデバッグ ツールは、既定で既に存在します。 好みのテキスト エディターまたは IDE をセットアップし、アドオンを 1 つまたは 2 つ構成するだけで、準備は完了です。 もちろん、Web サイトを最高の状態にするには、実際のバグ修正を実行する必要があります。 しかし、少なくとも、デバッグ プロセス自体は簡単かつ最小限の手間で実行できます。

ローカルでデバッグするための優先ツールは何ですか? 以下のコメントでフィードバックをお寄せください。