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

DevTools と デバッグ と 私

DevTools と デバッグ と 私

2024/05/31 Shinjuku.rb #92 好きなもの紹介LT大会

Koji NAKAMURA

May 30, 2024
Tweet

More Decks by Koji NAKAMURA

Other Decks in Programming

Transcript

  1. 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
  2. debug.gem から DevTools を起動する (rdbg) open chrome Mac であれば Chrome

    が起動する 起動しない場合は表示される devtools:// の URL を Chrome で開く
  3. 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"]
  4. こうなったら 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
  5. 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
  6. 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 しか評価できない、という解釈を得た
  7. 終わり - DevTools を使って Ruby をデバッグする話をしようと思っていたら、DevTools を 使って DevTools をデバッグする話になっていたという回

    - Ruby のデバッグや DevTools に関するノウハウ・ Tips を知るのが好き - オススメ情報があればぜひ教えてください!