Firebase Local Emulator の"Running in emulator mode."を小さくして透過する

css

firebase

投稿日: 2024/03/06

更新日: 2024/07/02

Firebase Local Emulator を使用していると、エミュレータを使用していることを知らせるRunning in emulator mode. Do not use with production credentials.という一文が表示されます。

開発していると非常に邪魔になります。特にページ下部にボタンなどの要素があるサイトでは、動作確認が困難になります。

しかし、エミュレーターを使用していることが一目でわかりますし、これ自体は非常に有用で消したくはありません。そんなわけで、僕がやっている対策を紹介します。

開発者ツールで確認すると以下のようなHTMLタグになっていますので、firebase-emulator-warningクラスに対してレイアウトを修正すればよいです。

<p
  class="firebase-emulator-warning"
  style="position: fixed; width: 100%; background-color: rgb(255, 255, 255); border: 0.1em solid rgb(0, 0, 0); color: rgb(181, 0, 0); bottom: 0px; left: 0px; margin: 0px; z-index: 10000; text-align: center;"
>
  Running in emulator mode. Do not use with production credentials.
</p>

半透明にして小さくする

ソースコード

最初にコード全体です。
Next.jsであればsrc/styles/globals.cssに追記してください。

.firebase-emulator-warning {
  opacity: 0.4;
  pointer-events: none;
  font-size: 0.5rem;
}

結果

このような表示になります。
白い部分にかぶっているボタンも問題なくクリックできます。

解説

opacityは不透明度を指定しています。
0が透明で1が不透明です。今回は0.4にしています。

https://developer.mozilla.org/ja/docs/Web/CSS/opacity

pointer-events: noneで対象の要素自体を、ポインターイベントの対象外にしています。これによって、対象の要素の下にあるボタンなどをクリックできるようになります。便利。

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

font-size: 0.5remについては特に解説することはないですが、文字のサイズを半分にしています。

yosi

Noh を作ってるエンジニア。

半透明にして小さくする