デバッグのはじめかた

デバッグのはじめかた エンジニア集会LT #4 慕狼ゆに

自己紹介 慕狼（しのがみ）ゆに Webフロントエンドエンジニア 技術スタック： React, TypeScript, Rails @YYa0928 VRSNSが大好き VRChatとclusterをよく 遊んでいるよ

自己紹介 毎週金曜日に、VRChatとcluster で「エンジニア作業飲み集会」 というイベントをやっているよ！ 2021年の11月から始めて、だい たい２年ぐらい続けているよ。

今回のお話 デバックのはじめかた

この話の前提 基本的にソフトウェア開発におけるデバッグの話をします OSSがプロジェクトに使われています 簡単に動作確認ができます バグが起きても人が死んだり、ただちに経済的な損失があったりするわけではない 環境によっては同じ考え方をできない場合もあるかも？ 使えるエッセンスだけ適宜拾っていってね

ある日 バグのチケット発行したの でお願いねー おっけー！

着手してから２時間後 ひえー、何が原因かわから ないよー！ ((((；ﾟДﾟ))))プルプル

助けを求める おっ、どした？ 助けてー！

先輩エンジニアが１０分で解決 ここが原因ぽいね はっや

先輩エンジニアが１０分で解決 どうして先輩エンジニアは10分で原因特定ができたのだろう？

デバッグの全体的な流れ 再現手順の構築 原因の特定 対策を立てる

再現手順の構築:バグの再現をしよう 原因の特定をするために、バグが再現手順を確立しよう 具体的に、原因がどこにあるのか確認をしよう こうやって操作するとバグ が再現するぞ！

原因の特定：ドキュメントを確認しよう

原因の特定：ドキュメントを確認しよう ライブラリが想定していない特殊な使い方をしていないか確認をしよう バグが起きてるってことは、大体の確率でライブラリで意図されていな い使い方をしているはず リダイレクトしないことが 前提のUIコンポーネントだ ぞこれ

原因の特定：GithubのIssue・Discussionを見よう

原因の特定：GithubのIssue・Discussionを見よう ライブラリに問題があれば、ほかの人も遭遇している可能性がある その場合、IssueやDiscussionで同様の現象の報告と議論が行われて いるはず OpenなIssueがないか確認をしよう 同じ現象でClosse済みのチケッ トがあるぞ！どうやらライブラ リの問題ではなさそうだな

原因の特定：バグの現象が起きなくなるまで、コードを消そう ライブラリに問題があれば、ライブラリ通りの使い方をしていればバグは発生 しないはず コードを標準の使い方に戻して、バグが起きないことを確認。その後、コード を現状の実装に戻していこう 戻していく過程で、バグの状況が再現されるようになる箇所を見つけられ る。そこが原因だとわかる ここを戻したらバグが再現し た！この行が原因だな

原因の特定：debuggerやlogを仕込む 問題が発生する箇所が具体的に絞り込めたので、何が起きている のか確認をしよう debuggerやlogを仕込んで、なにが起きているのか確認をしよう バグが発生したり、発生しなかったりする場合は、再現時と非再 現時でどんな挙動の違いがあるか観測しよう リダイレクトしたときに、繊維 前の状態が消えていそうだな

対策を立てる 何が起きているのか理解できればあとは解決するのみ！根本の原 因はどこかを考えて、再発しないような対策を立てよう 不要なリダイレクトが走って状 態が消えていることが原因だか ら、不要なリダイレクトが走ら ないようにしよう

おさらい 再現手順の構築 原因の特定 対策を立てる

おさらい 再現手順の構築 原因の特定 対策を立てる これを覚えてバグと戦おう！