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

公開: 2022-08-13

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

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

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

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

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

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

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

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

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

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

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

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

飛び込みましょう。

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

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

Chrome を使用している場合…

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

Firefox を使用している場合…

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

Safariをお使いの場合…

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

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

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

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

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

Query Monitor が教えてくれること

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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