Skip to content

Latest commit

 

History

History
194 lines (131 loc) · 6.58 KB

README_ja.md

File metadata and controls

194 lines (131 loc) · 6.58 KB

LIFF Inspector 🔬

The universal DevTools for LIFF (WebView) browser

LIFF Inspector は LIFF(LNE Frontend Framework)専用の公式 DevTools です。LIFF Inspector は ChromeDevTools Protocol に準拠し、最新の ChromeDevTools と連携しています。

LIFF browser ChromeDevTools
image image


English doc

TOC

Features

📱 デバッグが無効化された LIFF Browser、WebView をデバッグできます

🌍 リモートデバッグ機能

🔬 ChromeDevTools の Elements,Console,NetWork タブをサポート

Getting Started

LIFF Inspector は２つのコンポーネントから構成されています。

  • LIFF Inspector Server
  • LIFF Inspector Plugin

LIFF Inspector Server は LIFF アプリと ChromeDevTools の通信を中継するサーバーです。 LIFF Inspector Plugin は LIFF Plugin です。 LIFF Plugin は LIFF SDK v2.19.0 以降から利用可能です。

1. LIFF Inspector Server を起動する

$ npx @line/liff-inspector
Debugger listening on ws://{IP Address}:9222

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

$ npm install @line/liff-inspector
import liff from '@line/liff';
import LIFFInspectorPlugin from '@line/liff-inspector';

liff.use(new LIFFInspectorPlugin());

3. LIFF App と LIFF Inspector Server を接続する

LIFF Inspector Plugin は、実際の liff.init が動作する前に、LIFF Inspector Server に接続を試みます。 そして接続が成功し、 liff.init が完了すると、LIFF Inspector を使ったデバッグが可能となります。

liff.init({ liffId: 'liff-xxxx' }).then(() => {
  // LIFF Inspector has been enabled
});

4. ChromeDevTools を開く

liff.init完了後、LIFF Inspector Server は devtools の URL をコンソールに表示します。

$ npx @line/liff-inspector
Debugger listening on ws://{IP Address}:9222

+ connection from client, id: xxx
+ DevTools URL: devtools://devtools/bundled/inspector.html?wss=8a6f-113-35-87-12.ngrok.io/?hi_id=xxx

devtools://devtools/ で始まる URL を Google Chrome で開き、デバッグを開始してください。

重要: LIFF Inspector Server は SSL/TLS で暗号化される必要があります

LIFF Inspector Server はデフォルト設定ではローカルサーバー ws://localhost:9222 を立ち上げます。そしてデバッグ対象の LIFF アプリは HTTPS (https://liff.line.me/xxx-yyy) でホストされています。 これは LIFF Inspector Plugin が https:// から ws:// へ接続を試みることを意味し、mixed content となりこの接続はブロックされてしまいます。

Mixed content の問題を解消するために、LIFF Inspector Server は HTTPS (wss://) でホストされる必要があります。これを達成するために、以下の２つの方法をおすすめします。

HTTPS で LIFF Inspector Server を起動する (1 または 2 の方法)

  1. ngrok を使い LIFF Inspector Server を外部公開する
    1. ngrok を実行 
      $ ngrok http 9222
    2. 発行された xxx-xx-xx-xx.ngrok.io 形式の URL をコピーする 
      $ 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://xxxx-xxx-xxx.ngrok   # Copy this url

Or

  1. mkcert を使い LIFF Inspector Sever を HTTPS 化する

HTTPS 化された URL を LIFF Inspector Plugin に設定する (1 または 2 の方法)

LIFF Inspector Server が HTTPS 化された後、その URL を LIFF Inspector Plugin に設定する必要があります。

  1. コールバック URL の URL サーチクエリに ?li.origin= を追加する

    LINE Developers Console から以下のようにコールバック URL の末尾に?li.origin=を追加し、LIFF Inspector Server の URL を設定します

    image

Or

  1. LIFF Inspector Plugin の origin 設定を使う

    // Default origin: ws://localhost:9222
liff.use(new LIFFInspectorPlugin({ origin: 'wss://xxx-xx-xx-xx.ngrok.io' }));

優先順位

LIFF Inspector Plugin li.originクエリ (1)、 origin 設定 (2)の優先順位で URL を使用します。

(疑似コード)

const originFromURL = new URLSearchParams(search).get('li.origin');
const originFromConfig = config.origin;
const defaultOrigin = 'ws://localhost:9222';
connect(originFromURL ?? originFromConfig ?? defaultOrigin);

Example

See https://github.com/cola119/liff-inspector-example

Roadmap

Contributions Welcome!

Elements Tab

  • To display Elements
  • To display overlays
  • To remove/add/edit Elements
  • To display styles

Console Tab

  • To display console logs
    • console.log
    • console.warn
    • console.error
    • console.info
    • others
  • To execute local scripts

Network Tab

  • To display simple network logs
    • Fetch/XHR
      • fetch()
      • XMLHttpRequest
      • sendBeacon()
      • others
    • Others(JS/CSS/Img/Media/Font...)
      • Technically difficult to intercept them...

Application Tab

  • LocalStorage
  • SessionStorage
  • Cookies
  • others

Contribution

See CONTRIBUTING.md