やることは簡単なのですが、毎回style文とか作るのが面倒なのでコピペ用に記事を書きます。
やりたいこと
shopifyを改修する際に本番環境のテーマを直接いじらなければならないことがあり、変数の値など確認する際に画面に表示させずにコードの解析を行いたかった。
解決策
コンソール画面に表示する方法は以下。
console.log({{みたい変数}})
console.log({{みたいjson | json }})上記の方法を知らない時は以下の方法で変数を確認したりしていました。実際に表示する前に確認するのに便利でした。
HTMLタグに非表示のstyleを追加して、閲覧しにきた人にバレないようにしたいと思います。
<p style="display:none">{{ 見たい変数 }}</p>styleでdisplay : none を指定するだけですが、他にやり方をしらないのでこれで乗り切りたいと思います。
※ コメントをいただき教えていただいたのですがソースやコンソールには全部表示されてしまうので（確かに）個人情報などをあげてしまうのは危険です。確認を終えたら速やかに消した方が良さそうです。
ソースに全部出力されていますよ
公開して問題ない内容ならいいですが、トークンとか個人情報ならアウトですね
公開時にはコメントアウトする等したほうがいいかと思いました
おっしゃる通りですね、危険なので別の方法探してみます。
ありがとうございます。