2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

デバッグ方法まとめ

Last updated at Posted at 2024-02-08

はじめに

新しいインターン生も多く入ってくる+社員の方も新しく入ってくると思うので、デバック方法を新しく作成することにした。

デバッグ方法まとめ

フロントエンド

CSSの場合

image.png
このように下のマージンが広く、直すタスクがあったとする。
基本的には、googleなどの開発者モードでどこに問題があるのかを確認すると良い。
image.png
今回の場合は、margin:2em; が含まれてしまっていたことが原因でUIが壊れてしまっていた。
当該CSSが適応されているクラスを見つけ出し変更を行う。

APIとのデータのやり取りが上手くいかない場合

image.png
このエラーが起こっている場合は、バックエンドへの値がうまく渡せていない場合が多い。
まずは、開発者モードでnetworkを確認する。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323537363239332f61613231643663642d303330612d323732302d626662352d3166343831616231353034662e706e67 (1).png
失敗しているリクエストのプレビューを確認すると、
スクリーンショット 2024-01-29 16.14.06.png
Nameという値がリクエストに入っていませんよと言われていることがわかる。
また、CreateCustomerEventの実行中でエラーが起きているため、
CreateCustomerEventの値のなかに、Nameを加え忘れたのでは?と推測がつく。

変数に何の値が入っているのかを見る場合

スクリーンショット 2024-01-30 10.56.37.png

{JSON.stringfy(isRecruiter)}

を用いることによって、簡単に値の表示をすることができる。
image.png
image.png
上記のように表示され、デバッグしやすくなる。

P.S

フロントエンドで値が表示されないなと思った場合は、
svelteの場合、bind: をつけていない場合が多い。

バックエンド

うちは、C#のASP.NET Coreを用いている。
基本的に、バックエンドのデバックはブレイクポイントを仕掛ける。
先ほどのCreateCustomerEventでエラーが起きていると仮定する。
その場合、まずはAdnaviApiフォルダーから検索画面に飛び、CreateCustomerEventと調べる。
スクリーンショット 2024-01-29 16.32.56.png
そうすると、関連するAPIが表示されるため、その中から用いているAPIにブレイクポイントを仕掛ける。
今回の場合は、以下の関数を用いていた。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323537363239332f62663531383062662d333731342d663864622d633863352d3932633063363261313034362e706e67.png
行数の左側をクリックすることでブレイクポイントを仕掛けることができる。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323537363239332f66303362393437642d613231342d303363342d393238362d3831336638373734373761622e706e67.png
ブレイクポイントを仕掛けた結果が上の図である。
右上の一番左image.pngを押すと、一気にタスクを実行する。
その左横image.pngを押すと、一個ずつタスクを行ってくれる。
その左横image.pngを押すと、当該の関数の内部に入ることができる。
基本的にこの3つを用いることが多い。
また、左側のdata,userのようにリクエストされた値を確認することができる。
image.png

この値の変更されていく様子は、ブレイクポイントで見ることができる。
あるタスクの途中で実行が終了されてしまった場合は、その当たりのコードが間違っていることが多い。
今回の例で、var customerEventで実行が終わってしまったとする。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323537363239332f36663935306435622d356137392d386564312d666139352d6336303335623462343664622e706e67.png
その場合は、_model.Create()の所でエラーをはいているかもしてないと特定し、コードを改善することができる。

追記予定

以上

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?