More than 1 year has passed since last update.

SvelteのChrome拡張devtoolが動かないときの対処法

Posted at 2022-06-28

環境

Chrome拡張のSvelte Devtoolsが上記の環境で動きませんでした。

正確に言うと動いてはいるのですが、

To connect to Svelte perform a hard refresh (ctrl+F5) or click here .

というメッセージが出ました。
リロードしてもコンポーネントの情報は表示されません。

Firefoxの拡張は確認したところ動いていたので、一番早い対処法はFirefoxで確認することです。
わざわざメインで使用するブラウザを変更するのも気が引けたので、何か方法はないか調べてみました。

まずChrome拡張をアンインストールします。

chrome://extensions/にアクセスすると「Svelte Devtools」があると思うので削除します。

僕は特にこだわりがなかったので 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

2022/06/29時点ではまだマスターにマージされていないようです。（拡張自体しばらく更新されていないような…）
これであとはこの拡張をChromeに読み込ませるだけです。

chrome://extensions/に戻ります。

パッケージ化されていない拡張機能を読み込むというボタンがあるので、それをクリックします。
どのディレクトリを見るのか聞かれるので、さっきビルドで作成されたdestディレクトリを選択します。

\svelte-devtools\dest ですね。
エラーが出ていますが無視しても動きます。

これで検証ツールにSvelteコンポーネントを周りの表示がされるようになりました。

すでに開発サーバーを立ち上げたりブラウザで開いたりしている人は一旦終了させてサイド開いてから、ctrl+F5を押すと表示されると思います。

ちょっと画面が見づらいなと思いますが、ないとかなりしんどいので使えるだけでかなりありがたいです。感謝ですね。