【LIFF】LIFF Inspectorを使ってローカル開発環境で実機デバッグする方法

概要

LIFFで開発をしている際に、ブラウザで動作確認をしても正常に動いているけど、

実機で確認すると、エラーが出る。。。といった場合に、

「LIFFを実機で動かしてその内容をデバッグをしたい。」という時のデバッグ方法を記載します。

LIFFプラグインのLIFF Inspectorを使います。

LIFF Inspectorとは

LIFF Inspectorは、LIFFアプリをデバッグするためのLIFFプラグインです。LIFF Inspectorを使うと、LIFFアプリを実行している端末とは別のPC上のChrome DevTools (opens new window)を使って、LIFFアプリをデバッグできます。

引用：https://developers.line.biz/ja/docs/liff/liff-plugin/#liff-inspector

前提

基本的には、LIFF InspectorのREADME通りに進めればデバッグができるのですが、
最後の「HTTPS で LIFF Inspector Server を起動する」で既に、
ngrokをLIFFのフロントを立ち上げているローカルサーバで使用している場合、
どのようにするか困った為、おすすめのツールと、具体的な方法を記載します。

ngrokとlocaltunnelというツールを使用します。

方法（一例）

1,フロントのlocalhostにhttpsでアクセスできるようにする(localtunnel)

$ yarn dev
yarn run v1.22.19
$ vite

  VITE v4.4.6  ready in 1359 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

$ npx localtunnel --port 5173
your url is: https://full-pears-study.loca.lt

2,HTTPSでLIFF Inspector Server を起動する（ngrok）

$ npx @line/liff-inspector
Debugger listening on ws://192.168.11.3:9222

You need to serve this server over SSL/TLS
For help, see: https://github.com/line/liff-inspector#important-liff-inspector-server-need-to-be-served-over-ssltls

LIFF Inspector Plugin を LIFF アプリにインストールする

$ npm install @line/liff-inspector

liff.initの前にliff.useでLIFF Inspectorを読み込む

import liff from '@line/liff';
import LIFFInspectorPlugin from '@line/liff-inspector';

liff.use(new LIFFInspectorPlugin());

const initializeLiff = async () => {
  await liff.init({ liffId: import.meta.env.VITE_LIFF_ID || "" });
  if (!liff.isLoggedIn()) {
    liff.login();
  }
};

ngrok を使い LIFF Inspector Server を外部公開する

$ ngrok http 9222

下記のコマンドを実行して表示されるngrokのURLをコピーする（wss://~）

$ node -e "const res=$(curl -s -sS http://127.0.0.1:4040/api/tunnels); const url=new URL(res.tunnels[0].public_url); console.log('wss://'+url.host);"

↓
wss://sample.ngrok-free.app

3,LINE Developperコンソールの該当のLIFFのエンドポイントを変更する。

エンドポイントURL：  フロントのlocalhostのHTTPSのURL + ?li.origin= + LIFF 
Inspector ServerのHTTPSのURL

例：https://sample.loca.lt?li.origin=wss://sample.ngrok-free.app

LIFFURLに実機でアクセスし、
下記のようにDevTools URLがアクセス時に表示され、
DevTools URLを開くとデベロッパーツールが表示されるので、
そこで実機でのデバッグ内容が表示されれば成功です。

Mac-Book-Air:LINEDC_LIFF_study yuuki$ npx @line/liff-inspector
Debugger listening on ws://192.168.11.3:9222

You need to serve this server over SSL/TLS
For help, see: https://github.com/line/liff-inspector#important-liff-inspector-server-need-to-be-served-over-ssltls

connection from client, id: 123456789-TESTEST
DevTools URL: devtools://devtools/bundled/inspector.html?wss=65b5-2404-7a85-c940-8500-6dc2-2939-326a-5798.ngrok-free.app/?hi_id=2000193345-NRjvXBmV

参考文献

この記事は以下の情報を参考にして執筆しました。

• liff-inspector/README_ja.md