Upgrade to Pro — share decks privately, control downloads, hide ads and more …

伝わるバグ報告 / How to write a better bug report

伝わるバグ報告 / How to write a better bug report

さくらの夕べ Tech Night #3 Online
https://sakura-tokyo.connpass.com/event/191354/

文字起こし版
https://knowledge.sakura.ad.jp/26627/

6154244654c5f07cdf7c09da61bfe55f?s=128

ダーシノ

October 28, 2020
Tweet

Transcript

  1. 15,300+ stars⭐ on GitHub ダーシノ / NES.css 作者 フロントエンドエンジニア@さくらインターネット 伝わるバグ報告

  2. 動きません 使えねぇな! アレもコレもソレ もおかしい

  3. ぴ え ん

  4. Q. バグ報告をする理由は?

  5. A. バグを直すため

  6. バグ報告にはコツがある!

  7. 伝わるバグ報告

  8. ⽬次 1. バグ報告のキホン 2. バグ報告の書き⽅ 3. プログラマに崇め奉られるバグ報告

  9. バグ報告のキホン

  10. バグ報告のキホン - 1Issue 1Bug - “事実”を伝える - バグと要望は分ける

  11. 1Issue 1Bug クローズできないチケット すぐ修正できるバグ すぐ修正できるバグ 修正が難しいバグ 1Issueにバグは1つまで。 複数を混ぜるとクローズできない
 闇チケットが⽣まれる。

  12. “事実”を伝える 使えねぇな! 動きません 起きている事実のみを伝える。 イラッとしても感情を切り離して
 報告する。

  13. バグと要望は分ける ≠ 思い通りに動かない ≠ バグ ※エンドユーザーには判断できないため、社内や発注者 から報告するときに限る 「こう動くべき」 という考え アプリの仕様

  14. バグ報告の書き⽅

  15. バグ報告の書き⽅ - タイトル - 発⽣した事象 - 再現⽅法 - 期待する結果 -

    実⾏環境
  16. タイトル - 簡潔に書く - バグの内容が把握できる - 発⽣した状況がわかる

  17. 発⽣した事象 - できるだけ詳しく - 共通⾔語を使う - ページやボタンはラベルに合わせる - エラー内容をそのまま添付する

  18. 再現⽅法 - わかる範囲で詳しく書く - 発⽣時刻や発⽣頻度 - 再現しない場合は、その旨を書く

  19. 期待する結果 - 本来どう動くべきか書く - わかれば、原因も書く

  20. 実⾏環境 - OS - ブラウザ - バージョン - 設定内容

  21. バグ報告の書き⽅ ◦◦ページで××するとエラーがでる ## 内容 ◦◦ページで××ボタンを押すと「Err999: xxx」というエラーが表⽰され、**ページに遷 移しない ## 再現⽅法 1.

    ログインする 2. ××ボタンを押して◦◦ページを開く 3. [⽇付]に1週間後の⽇付を⼊⼒する 4. ××ボタンを押す 5. ダイアログでエラーメッセージが表⽰される ## 実⾏環境 - macOS Catalina 10.15 - Chrome 86.0.4240.111 - App xx.yy.zz ## 期待する結果 ××ボタンを押したときに**ページに遷移する
  22. プログラマに 崇め奉られる バグ報告

  23. プログラマに崇め奉られるバグ報告 - 画⾯キャプチャ - エラーログ - HARファイル ホンマ感謝やで

  24. 画⾯キャプチャ(静⽌画) 動作をともなわない場合 ※エラーメッセージなど動かないものに適している

  25. 画⾯キャプチャ(動画) 動作をともなう場合 時系列が関係する場合 ※筆者は単純で短い場合はgif、複雑で⻑い場合は動画 ファイルを使っている

  26. 画⾯キャプチャに便利なツール Skitch スクショに枠や⽮印、⽂字が書き込めてモザイク処理もできる https://evernote.com/intl/jp/products/skitch QuickTime Player 画⾯を録画ができる https://support.apple.com/ja_JP/downloads/quicktime Kap QuickTime

    Playerでもいいけど、より気楽に動画やgifを作りたいときに便利 ※macOSのみ https://getkap.co/
  27. エラーログ 開発者ツールのコンソール に出⼒されたログ ※ Chromeの場合、設定から[その他のツール] > [デ ベロッパーツール]

  28. HARファイル: ⽣成編 Http ARchiveファイル リクエストをjson形式でま とめてファイルにしたもの デベロッパーツールの[Network]タブで右クリックか ら[Save all as

    HAR with content]で保存
  29. HARファイル: 表⽰編 .HARファイルをデベロッ パーツールの[Network]タ ブにドラッグ&ドロップ リクエストやレスポンスの 内容がそのまま再現される .HAR

  30. おさらい 1. バグ報告のキホン
 1Issue 1Bug、“事実”を伝える、バグと要望は分ける 2. バグ報告の書き⽅
 タイトル、発⽣した事象、再現⽅法、期待する結果、実⾏環境 3. プログラマに崇め奉られるバグ報告


    画⾯キャプチャ、エラーログ、HARファイル
  31. こんな⼈が発表しました ダーシノ @bc_rikko @BcRikko kuroeveryday.blogspot.com NES.css ファミコン⾵CSSフレームワーク 15,300+stars on GitHub https://github.com/nostalgic-css/NES.css

    仮想DOM 実践⼊⾨ ⾃作フレームワークを作りながら仮想DOMを学ぶ記事、エンジニアHub寄稿 https://eh-career.com/engineerhub/entry/2020/02/18/103000 CSSと副業 OSS活動や副業に関するインタビュー記事、Offers寄稿 https://offers.jp/media/sidejob/workstyle/a_1769