Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevTools と デバッグ と 私
Search
Koji NAKAMURA
May 30, 2024
Programming
2
3.2k
DevTools と デバッグ と 私
2024/05/31 Shinjuku.rb #92 好きなもの紹介LT大会
Koji NAKAMURA
May 30, 2024
Tweet
Share
More Decks by Koji NAKAMURA
See All by Koji NAKAMURA
Rubyで作る論理回路シミュレータ - Shinjuku.rb #99
kozy4324
0
78
Steep導入したいRTA - Kashiwa.rb #11
kozy4324
0
79
これまで細々と作成したGemの紹介をします - Kashiwa.rb #9
kozy4324
0
150
東京Ruby会議12のお手伝いしてきた話
kozy4324
0
84
個人開発発表 LT - Shinjuku.rb #97
kozy4324
0
200
Ruby界隈を中心に2024をふりかえる - Kashiwa.rb #6
kozy4324
0
150
「今までで一番学びになった瞬間」発表 LT - Shinjuku.rb #96
kozy4324
0
320
脆弱性から学ぶシリーズ CVE-2024-34341 - Kashiwa.rb #5 LT
kozy4324
0
250
ActiveRecord SQLインジェクションクイズ (Rails 7.1.3.4)
kozy4324
9
4.5k
Other Decks in Programming
See All in Programming
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
420
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
0
190
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
0
170
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
450
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
120
Effect の双対、Coeffect
yukikurage
2
280
生成AIで日々のエラー調査を進めたい
yuyaabo
0
170
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
CSC307 Lecture 17
javiergs
PRO
0
110
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
310
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
860
4 Signs Your Business is Dying
shpigford
183
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
900
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf 2023
tenderlove
30
1.1k
GraphQLとの向き合い方2022年版
quramy
46
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for Performance
lara
608
69k
Transcript
DevTools と デバッグ と 私 2024/05/31 Shinjuku.rb #92 好きなもの紹介LT大会 Koji
NAKAMURA (@kozy4324)
自己紹介 - Koji NAKAMURA (@kozy4324) - Classi株式会社 - (フロントエンド開発歴の方が長いかもしれない)Railsエンジニア
好き - DevTools を使ってデバッグすること (ソフトウェアの仕組みや機序を動かしながら理解することが割と好き)
DevTools の推し機能3選 1. Copy as cURL 2. Block request URL
3. JavaScript デバッグツール
1. Copy as cURL API リクエストを繰り返しテストしたい時によく使う
2. Block request URL 特定のAPIリクエストがエラー時のフロントエンド挙動を確認したい時に使う
3. JavaScript デバッグツール
3. JavaScript デバッグツール ①ブレイクポイントで一時停止して、 ②スコープ変数が確認でき、 ③そのコンテキストでスクリプト実行して確認ができる
3. JavaScript デバッグツールの推しポイント Call Stackを移動して 確認することもできる
DevTools に最適化された人間が思うこと... - Ruby バックエンドも DevTools でデバッグがしたい
debug.gem で実現できる - debug.gem - https://github.com/ruby/debug - > You can
attach with external debugger frontend with VSCode and Chrome. - Rails 7 includes the debug gem - https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-ge m
debug.gem を使う
debug.gem を使う ②ブレイクポイントで一時停止されて、 ③コードを実行したり、色々確認できる ①ブレイクポイント設定する、binding.break, binding.b でも可
debug.gem から DevTools を起動する (rdbg) open chrome
debug.gem から DevTools を起動する (rdbg) open chrome Mac であれば Chrome
が起動する 起動しない場合は表示される devtools:// の URL を Chrome で開く
debug.gem w/ DevTools
debug.gem w/ DevTools JavaScriptの時と全く同じ操作感 Frame移動が超簡単、楽 FrameごとのRuby式の評価も出来る
遭遇した悩ましい挙動 🤔 - インスタンス変数を評価すると nil になる - ブロック付きメソッド呼び出しを評価しても nil になる
debug.gem をデバッグする - $ bundle open debug - lib/debug/server_cdp.rb#L962 あたりにprint文を仕込む
- https://github.com/ruby/debug/blob/v1.9.2/lib/debug/server_cdp.rb#L962 DEBUGGER: [:evaluate, {"id"=>21, "method"=>"Debugger.evaluateOnCallFrame", "params"=>{"callFrameId"=>"e8547272d5f75dfe567b420e26b2a42e", "expression"=>"", "objectGroup"=>"console", "includeCommandLineAPI"=>true, "silent"=>false, "returnByValue"=>false, "generatePreview"=>true}}, 0, "", "console"]
debug.gem をデバッグして分かったこと - 評価すべき文字列が空になっている - どうやら DevTools が投げてくる時点で空文字列 - コメントにも書いてあった
- https://github.com/ruby/debug/blob/v1.9.2/lib/debug/server_cdp.rb#L1044 - > Chrome doesn't read instance variables
こうなったら DevTools もデバッグだ! - https://github.com/ChromeDevTools/devtools-frontend - depot_toolsのインストール - $ git
clone https://chromium.googlesource.com/chromium/tools/depot_tools.git - $ export PATH="$PATH:$(pwd)/depot_tools" - ソースコードの取得 - $ mkdir devtools - $ cd devtools - $ fetch –nohistory devtools-frontend - ビルド - $ cd devtools-frontend - $ gclient sync - $ gn gen out/Default - $ autoninja -C out/Default
Google Chrome for Testing の実行 - $ ./third_party/chrome/chrome-mac/Google\ Chrome\ for\
Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --disable-infobars --disable-features=MediaRouter --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) --use-mock-keychain - 起動したブラウザのアドレスバーに、debug.gem が出力する devtools:// のURLを 入力する - 表示した画面上で DevTools を起動する - option + command + I
None
RubyをデバッグしているDevTools 左側のDevToolsをデバッグしているDevTools
DevTools in DevTools の完成 - DevTools マニア歓喜 😂 🎉
DevTools をデバッグして分かったこと - DevTools 内でエラーが発生していた - > Uncaught SyntaxError: Unexpected
character '@' (1:0) - https://github.com/ChromeDevTools/devtools-frontend/blob/be0ed2fb4df509f39b73b84fe20a 94f7af948a24/front_end/panels/console/ConsolePrompt.ts#L378 - 入力文字列は JavaScript として parse されていた - https://github.com/ChromeDevTools/devtools-frontend/blob/be0ed2fb4df509f39b73b84fe20a 94f7af948a24/front_end/entrypoints/formatter_worker/Substitute.ts#L30-L33 - `@` やブロック付きメソッド呼び出しは JavaScript として Syntax Error だったというオチ - SourceMap を使って Transpile された変数名を解決するための置換処理が入っている模様 - ここでエラーになると空文字列にフォールバックされていた - DevTools のコンソールは JavaScript しか評価できない、という解釈を得た
ワークアラウンド - eval を使う - eval(‘@articles’) - eval('@articles.map(&:title).join(?,)')
終わり - DevTools を使って Ruby をデバッグする話をしようと思っていたら、DevTools を 使って DevTools をデバッグする話になっていたという回
- Ruby のデバッグや DevTools に関するノウハウ・ Tips を知るのが好き - オススメ情報があればぜひ教えてください!