LoginSignup
1

posted at

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

環境

パッケージ

  • "@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を押すと表示されると思います。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1