環境
パッケージ
- "@sveltejs/vite-plugin-svelte": "1.0.0-next.30"
- "svelte": "3.44.0"
- "vite": "2.9.7"
Chromeのバージョン
- Google Chrome: "102.0.5005.115（Official Build） （64 ビット）"
起こったこと
Chrome拡張のSvelte Devtoolsが上記の環境で動きませんでした。
正確に言うと動いてはいるのですが、
To connect to Svelte perform a hard refresh (ctrl+F5) or click here .
というメッセージが出ました。
リロードしてもコンポーネントの情報は表示されません。
Firefoxの拡張は確認したところ動いていたので、一番早い対処法はFirefoxで確認することです。
わざわざメインで使用するブラウザを変更するのも気が引けたので、何か方法はないか調べてみました。
対処法
Chrome拡張のアンインストール
まずChrome拡張をアンインストールします。
chrome://extensions/にアクセスすると「Svelte Devtools」があると思うので削除します。
拡張をgitからcloneする
https://github.com/RedHatter/svelte-devtools#chrome
僕は特にこだわりがなかったので C:\Users\ユーザー名 で
git clone https://github.com/RedHatter/svelte-devtools.git
cd svelte-devtools
npm install
こちらを実行しました。
記述を一部書き換える
先ほどの操作でsvelte-devtoolsディレクトリに移動しているはずです。
srcディレクトリにbackground.jsがあるのでエディタで開きます。
4行目に以下のコードがあるので、こちらを
if (port.sender.url == chrome.runtime.getURL('/devtools/panel.html')) {
こちらに書き換えます。
if (port.sender.url.replace('//devtools', '/devtools') == chrome.runtime.getURL('/devtools/panel.html')) {
その後
npm run package:chrome
を実行してビルドします。
こちらを参考にしました。
https://github.com/RedHatter/svelte-devtools/pull/70/commits/7edf051cf204e4c9d7b780681aa07cb73e4c3d77
2022/06/29時点ではまだマスターにマージされていないようです。（拡張自体しばらく更新されていないような…）
これであとはこの拡張をChromeに読み込ませるだけです。
Chrome拡張として読み込ませる
chrome://extensions/に戻ります。
パッケージ化されていない拡張機能を読み込む というボタンがあるので、それをクリックします。
どのディレクトリを見るのか聞かれるので、さっきビルドで作成されたdestディレクトリを選択します。
\svelte-devtools\dest ですね。
エラーが出ていますが無視しても動きます。
これで検証ツールにSvelteコンポーネントを周りの表示がされるようになりました。
すでに開発サーバーを立ち上げたりブラウザで開いたりしている人は一旦終了させてサイド開いてから、ctrl+F5を押すと表示されると思います。
ちょっと画面が見づらいなと思いますが、ないとかなりしんどいので使えるだけでかなりありがたいです。感謝ですね。