最近、Visual StudioのLive Shareという機能を使って複数人で共同開発をしました。
言語は簡単なHTML/CSS。ホストは僕、それ以外はゲストです。
開発チームの中で「ゲスト側でブラウザ表示するとCSSが効かない」という問題が発生しました。
いくつか方法を試した後に解決したので、今回解説します。
Visual Studio Live Share「ブラウザで表示」での挙動
ホスト（僕）とゲスト（開発メンバー）とで違います。
当たり前かもですが、開発中のファイルは全て僕のローカルディレクトリにある状態で、共有を開始してメンバーのローカルディレクトリへのアクセスを許可した状態で作業していました。
一通りのコーディングが完了し、メンバー全員でブラウザ表示した時、問題が発生しました。
僕（ホスト）→正常に表示
メンバー（ゲスト）→HTMLのみ表示
CSSが効いていないorz。
解決に向けて試したこと
以下が試した方法です。
- コードの確認
- ブラウザのキャッシングクリーン
- VS側でゲストが全開発ファイル（.HTML/CSS）を作業タブとして展開
コードの確認
まずはこれです。
HTMLファイル一つにつきCSSファイル一つ作成していたので、HTMLファイルがしっかり該当のCSSファイルを参照しているか（<link rel=”stylesheet” href=”ファイル名”>）チェックしました。
特に問題なし。
ブラウザのキャッシングクリーン
最初はこれかな〜？とも思いましたが、実行した後もCSSは反映されておらず。
とりあえずネットに書いてあった有力な解決策としてはこれと前述の二つくらい。
「解決しないじゃん」と途方に暮れました。
VSでゲストが全開発ファイル（.HTML/CSS）を作業タブとして展開
なんとなく、メンバーのみんなに「ファイル全部開いた状態で表示してみて」と呼びかけたら、全員から「いけました」との報告が。
次に「ブラウザ表示したい.htmlと.cssだけ開いてみて」と言うと、またもや「いけました！」の返答が。
これが答えでした。
まとめ
ゲスト側はタブを開いているファイルのみブラウザ表示が上手くいくんですね。
「そんなの当たり前だよ」と思う方もいるかもしれませんが、VSを使った開発はこれが初めてで、SEとしてもペーペーです。
以上、僕の備忘録でした。
コメント