最近開発でShopifyを使うことが増えました。
そしてカスタマイズするときに毎回イライラすることがあります。
…デバッグ方法が全然わからん！
ってことで今の所一番ベストと思われるデバッグ方法を見つけたのでシェア。同じことで悩んでいる人は参考にしてみてください！
コンソールに出力する
ShopifyはLiquidという独自の言語を使って作られており、それ故にカスタマイズする時はなんとも言えない気持ちになります。とにかく変数の中身が出力できない。できたとしても見づらいということがおきます。
そんな時はテンプレートに以下のコードを埋め込んで、コンソールに出力しちゃいましょう
<script>console.log({{ object | json }})</script>
objectのところに出力したいオブジェクトを渡して、jsonフィルターでjson化してコンソールに出力するタグを埋め込みます。
これでだいたいどんなページでも美しくデータを出力できます。
このオブジェクトはJSONに変換できないよっていうエラーが出たら
出力しようとすると以下のようなエラーのJSONに変換されることがあります。
{error: 'json not allowed for this object'}
一体どこで制限かかっているのか知りませんが、どうやらオブジェクトの中身が大きすぎて表示できないらしいです。
ということでこれが出たら今出力しているオブジェクトは何なのかをドキュメントで調べて、それが持ってるプロパティやメソッドを呼び出して出力するみたいな地道な作業が必要になります。
これに関しては納得していないので、何かうまい方法が逆に知りたいですねぇ…。
ということで、今回はShopifyのデバッグ方法についてでした！
ノーコードのツールはコードを書かずにカスタマイズするに限るね…！
コメント