VSCodeの「Live Server」で失敗した話
Web業界に転職してから初めてコーディング案件をした時。
VSCodeのLive Serverという、保存する度に自動でリロードしてくれる拡張機能で確かめながら進めていました。
一通りコーディングが終わったのでFirefox、IEなどブラウザごとにチェックしようとした所…
いきなりChromeでズレが発生！！！（Live Serverのブラウザ設定はChrome）
納期も迫っていたので顔面蒼白になりながら急いで修正した記憶がまだ鮮明に残っています…。
それからというもの実務でコーディングする時は、必ずブラウザで開いてリロードしながら進めるようにしました。
しかし
いちいちウィンドウを切り替えてチェックするのは面倒です。そこで
ブラウザ側で自動リロードしてくれればいいんじゃね？
と思いつきます。調べたらありました。ありがとうございます先人の方々。
自動リロードしてくれるChrome拡張機能「Super Auto Refresh Plus」
「refresh」などのキーワードで調べると、いくつか自動リロードの拡張機能がヒットします。
実際にインストールして確かめてみた結果、
一番良かったのがこの「Super Auto Refresh Plus」という拡張機能です。（Chromeウェブストアで一番上に表示されます）
リンクはコチラ→https://chrome.google.com/webstore/detail/super-auto-refresh-plus/globgafddkdlnalejlkcpaefakkhkdoa?hl=ja-JP
この拡張機能が他と違うのが、このキャッシュをクリアするかしないか選べるところです。
一応設定方法も書いておきます。
設定方法
インストールできたらツールバーのアイコンをクリックして、メニューボタンをクリックします。
時間を設定すると、その時間後にリロードしてくれます。
Web制作の場合は工程によって頻度が異なりますので、良き具合に設定してください。
右上のハンバーガーボタンで設定画面に移ります。
Bypass cache when reloading the page
…リロード時にバイパスキャッシュするかどうか。
（バイパスキャッシュ＝キャッシュを消さない、なのでON（↑の設定）にすると、キャッシュは消えません。）
Show countdown timer on extension icon
…ツールバーの所でカウントダウンを表示するかどうか。
Add refresh menu to right-click context menu
…ブラウザのページ上で右クリックした時のメニューに追加するかどうか。
（追加すると↓こんな感じで表示されます）
その他の自動リロード拡張機能
他の自動リロード拡張機能は、基本的にキャッシュをクリアできませんでした。
拡張機能によって違いがありますので、気になる方は試してみてください。
一応ご紹介します。
Easy Auto Refresh
「しゃらくせぇ機能はいらねぇぜバーロー！」という江戸っ子的な方はこの拡張機能がおすすめです。とにかくシンプル。設定が秒しかない^^;
Advanced Optionという設定にチェック項目がずらーっと並んでいて、中にはclear cacheという機能もありますが、課金しないと使えません^^;
$24…高い＼(^o^)／
「オホホホホ…私セレブ志向なもので」という方におすすめです。
まとめ
いかがでしたでしょうか。VSCodeのLive Serverもよいですが結局ローカルサーバーなので、完全にブラウザの動きを表現するのは難しいのかなと思います。
ぜひChrome拡張機能の自動リロードを利用してみてください。
コメント