"debug.gem" の利用体験・開発体験の向上

Transcript

1. “debug.gem”の 利用体験・開発効率の向上 Ruby Association Active Report 小野 直人
2. 自己紹介 • 小野 直人（@ono-max） ◦ Software Engineer at 株式会社サイバーエージェント ▪ Developer Productivity 室 • フィーチャーフラグ・A/Bテストプラットフォームの開発 ◦ Google Summer of Code 2021 “Tests for Debugger” ▪ Ruby 3.1 から導入された “debug.gem” のテストフレームワーク作成 ◦ 最近ネズミが家に出ました 🐭
3. debug.gem • 笹田さん（@ko1）が開発したすごいデバッガ • ブレークポイント設定時の処理速度が速い • VS Code などの IDE サポート • Ruby 2.7 以上をサポート • ターミナルでの起動例 ◦ rdbg target.rb ◦ rdbg -c -- bin/rails
4. 今回の発表に興味を持ってくれそうな方 はじめに...
5. 普段 VS Code を使ってないんだけど リッチなツールでデバッグしたい
6. Chrome の検証ツール（DevTools）よく触ってる
7. そんな方にオススメする今回のテーマ Chrome を使ったデ バッグ！
8. アジェンダ • デバッガに関するおさらい • Chrome DevToolsを用いたデバッグ機能の開発（利用体験向上） • テストフレームワークの開発（”debug.gem” の開発効率向上） • 得られた成果 今回の発表の 前提知識の確認！ ユーザーに嬉しみはない ので内容は薄めです ...
9. デバッガに関するおさらい
10. デバッガとは • バグの発見や修正を支援するツール ◦ ある瞬間における変数 ◦ コードが実行される流れ • 基本機能 ◦ ブレークポイント ◦ ステップイン ◦ ステップオーバー ◦ … コードリーディング にも便利！
11. ブレークポイント 4行目にブレークポ イントをセット プログラムを実行 指定した ブレークポイントで停止！
12. ステップイン これが ステップイン 関数の内部に入る
13. ステップオーバー これが ステップオーバー 関数を実行して 次の行へ
14. バックトレース • 今いる地点までのメソッドの呼び出し履歴 • 詳しくは次のページで
15. def a b end def b c end def c end ①メソッド a が 呼ばれる バックトレース
16. def a b end def b c end def c end ①メソッド a が 呼ばれる バックトレース a メソッド a が積ま れる
17. def a b end def b c end def c end ②メソッドbを 呼ぶ バックトレース a
18. def a b end def b c end def c end バックトレース ③メソッド b が 呼ばれる a
19. def a b end def b c end def c end バックトレース b ③メソッド b が 呼ばれる a メソッド b が積ま れる
20. def a b end def b c end def c end バックトレース b a 現在 過去 今いる地点まで の呼び出し履歴
21. def a b end def b c end def c end バックトレース b この行で実行が 停止 a 現在の状態
22. デモ：デバッガを使ってコードリーディング
23. class Node attr_accessor :value, :next def initialize val, _next @next = _next @value = val end end def linked_list list = nil 5.times{|n| node = Node.new n, list list = node } list end linked_list サイズ５の 線形リストを作る
25. Chrome DevToolsを用いた デバッグ機能の開発（利用体験向上）
26. 背景 • VS Code を使わない人向けでリッチなデバッグ体験の提供 • Chrome のみでデバッグができる
27. 目標 • Chrome DevTools でのデバッグを VS Code と同等のものへ • Chrome DevTools 特有の機能を用いたリッチな開発体験の実現
28. 今回の取り組み • Chrome DevTools 上の UI として提供されている機能のサポート • ユーザー体験をよくする機能開発 • Chrome DevTools を用いた新しい用途の模索
29. Chrome DevTools 上で提供されている機能のサポート • 例外が発生した際に実行を中断 • 全てのブレークポイントを起動、停止 • スクリプトをブレークポイントなしで強制実行 • ターゲットフレームにある変数を表示 • クリックすることでネストされたものを表示
30. 例外発生時に実行を停止 ①例外で停止をク リック 例外発生時に停止 ②プログラムを 実行
31. スクリプトをブレークポイントなしで強制実行 ブレークポイントを無視 して強制実行 -> デバッグを終了
32. 現在の変数の状態を表示 この時点では “a=2” “a=4”に変化
33. クリックすることでネストされたものを表示 foo = { "a": [ { "a": 1 }, { "b": 1 } ], "b": [ { "c": 1 }, { "d": 1 . . . クリックすることで値を 見れる 複雑なハッシュも見た い箇所だけ見ることが できる
34. ユーザー体験をよくする機能開発 • デバッガ起動時に Chrome DevTools を自動で開く • スニペット機能 • Screen Cast 画面を閉じる
35. デバッガ起動時に Chrome DevTools を自動で開く $ rdbg target.rb --open=chrome debug.gemをChrome を用いて起動 Chrome DevTools ですぐに デバッグできる状態に！
36. スニペット機能 実行結果がChrome コンソールに出力 試したいコード を書く
37. Chrome DevTools を用いた新しい用途の模索 • pp メソッドを呼び出すと Chrome DevTools のコンソールで出力結果を表示 • Chrome コンソールに画像を表示 • 配列やハッシュをテーブルとして表示
38. Chrome コンソールに画像の表示 • 以下のように画像や SVG をコンソール上に表示 • 使い道が見つからなかった
39. 配列やハッシュをテーブルとして表示 • 使いやすさが向上する確信が持てなかった After Before
40. 実現できなかったこと • Chrome コンソールの入力補完機能 • マルチスレッド対応 • コードのカラーリング ＝＞　Chrome DevTools が JavaScript に依存した設計が原因
41. Chrome DevTools と debug.gem の通信 Chrome DevTools debug.gem サーバー クライアント
42. 評価 • Chrome DevTools でのデバッグ体験を VS Code と同等のものへ ＝＞　一部 Chrome DevTools の制約を除いて同等の体験を実現 • Chrome DevTools 特有の機能を用いたリッチな開発体験の実現 ＝＞　スニペット機能、現在状態の変数の表示など独自機能を提供
43. テストフレームワークの開発 （debug.gem の開発効率向上）
44. 背景 • 本プロジェクト開始前、テストケースはターミナル用のみ • debug.gem がサポートしている UI ツールとの通信部分のテストが欲しい ◦ Chrome DevTools ▪ Chrome DevTools Protocol (CDP) ◦ Visual Studio Code ▪ Debugger Adapter Protocol (DAP)
45. 取り組んだこと • 2種類のテストフレームワークを作成 ◦ プロトコルを直接書く低レベルでのテスト ◦ 抽象化した高レベルでのテスト
46. # Chrome DevTools { id: 13, method: "Debugger.setBreakpointByUrl", params: { lineNumber: 3, columnNumber: 0, condition: "" ... } # VS Code { seq: 12, command: "setBreakpoints", arguments: { source: { name: "target.rb", path: temp_file_path, sourceReference: 0 }, ... } req_add_breakpoint 3 抽象化 例外発生時に停止 低レベル • API が生のプロトコ ルとなる 高レベル • API が簡潔な メソッドになる
47. debug.gem クライアント Test framework 値をテスト アーキテクチャ サーバー （別プロセスで起動）
48. 評価 • テストフレームワークがマージされテストができている • 時々 random fail が発生してしまう
49. 得られた成果 • 利用体験の向上 ◦ Chrome でのデバッグができるようになり VS Code を使わないユーザーにも リッチなデバッグ体験を提供 ◦ Chrome DevTools への対応をしたデバッガの一つの参考例に • “debug.gem” の開発効率の向上 ◦ UI ツールとの通信部分のテストが可能に
50. 謝辞 本プロジェクトを行うにあたり、開発を助成していただきました Ruby Association、またメ ンターである笹田耕一さんをはじめ多くの方にご協力をいただきました。ありがとうござ いました。 • Geoffrey Litt • Stan Lo • Andrea Cardaci
51. 引用・参考文献 • Chromium Blog. 「10 Years of Chrome DevTools」 https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html （参照2022-06-30） • 渋川よしき.「Real World HTTP 第２版」. 株式会社オライリー・ジャパン . 2021年, 496p • ◯×つくろーどっとコム. 「その１ デバッグの超基本「ステップ実行」」 http://marupeke296.com/DBG_No1_Step.html#:~:text=%E3%82%B9%E3%83%86%E3%83%83%E 3%83%97%E3%82%A4%E3%83%B3%E3%81%AF%E6%9C%80%E3%82%82%E3%82%B9%E3 %83%86%E3%83%83%E3%83%97,%E5%85%A5%E3%82%8B%E3%81%93%E3%81%A8%E3% 81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82 （参照2022-07-09） • Debugging with GDB. 「スタックの検査」 https://www.asahi-net.or.jp/~wg5k-ickw/html/online/gdb-4.18/gdb_7.html （参照2022-07-09）