UserScriptデバッガー

ブックマークレットの開発環境を考えてみた · GitHubを読んで、localhostのmain.jsをウォッチさせてればUserScriptのデバッグがすごく楽なことに気づいた。

デバッグ手順

VS Codeでコードを書く

デバッガ起動

既存ブラウザのScrapboxページにアタッチし、監視を始める

ローカルサーバー起動

ソースコードのデリバリーを開始

Scrapboxをリロード

以下のスクリプトがローカルファイルを読み込む

code: debugger.js

いやいや。。。Scrapbox の Content Security Policyのことを完璧に忘れてたわ。。。

node-bitmap-proxyが完成しないとできないね。ひとまずは上記のやつを使いましょう。

え。。。これ、SSLにしか対応してないじゃん。。。めんどー。

どうしようかな。これだと意外にCSPを突破できないぞ。node-bitmap-proxyってほんと有用だな。。。

もしかして一番早いのはこれかな？

VS Codeでデバッグ

対象のスクリプトファイルをpbcopyコマンドでコピー

Chromeにデバッガをアタッチ

internal consoleがChromeに接続されるから、そこに手動でペースト

これだとブレークポイントもクソもないけど、画面遷移しなくても実行だけはできる。