line / liff-inspector

The universal DevTools for LIFF (WebView) browser

LIFF Inspector 🔬

The universal DevTools for LIFF (WebView) browser

LIFF Inspector is the official DevTools for LIFF(LNE Frontend Framework) that is integrated with the latest ChromeDevTools and built on top of the ChromeDevTools Protocol.

LIFF browser	ChromeDevTools

---

日本語版

TOC

• Features
• Getting Started
• Example
• Roadmap
• Contribution

Features

📱 Enable debugging LIFF Browser and WebView with debugging options disabled

🌍 Remote debug

🔬 Support Elements, Console and NetWork tabs of ChromeDevTools

Getting Started

LIFF Inspector consists of two components:

• LIFF Inspector Server
• LIFF Inspector Plugin

LIFF Inspector Server is a server program that mediates communication between LIFF app and ChromeDevTools. LIFF Inspector Plugin is a LIFF Plugin. LIFF Plugin is available in LIFF SDK v2.19.0 or later.

1. Start LIFF Inspector Server

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

2. Install LIFF Inspector Plugin to your LIFF App

$ npm install @line/liff-inspector

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

liff.use(new LIFFInspectorPlugin());

3. Connect LIFF App and LIFF Inspector Server

Before the actual liff.init process, LIFF Inspector Plugin will try to connect LIFF Inspector Server. Debugging with LIFF Inspector is available immediately after liff.init call.

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

4. Open ChromeDevTools

After liff.init, LIFF Inspector Server shows the devtools URL for your LIFF App in console.

$ 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

Open the URL starts with devtools://devtools/ and enjoy debugging!

Important: LIFF Inspector Server need to be served over SSL/TLS

By default, LIFF Inspector Server starts a local server on ws://localhost:9222, and your LIFF App is served over HTTPS (https://liff.line.me/xxx-yyy). LIFF Inspector Plugin will try to connect to ws://localhost:9222 from https://liff.line.me/xxx-yyy but this will fail due to mixed content.

To eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (wss://). We have two recommended ways:

Serve local server over HTTPS via 1 or 2

1. Using ngrok to make LIFF Inspector Server public
   1. Run ngrok

      $ ngrok http 9222

   2. Copy the published 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

2. Running LIFF Inspector Server with HTTPS using mkcert
   • See the detail explanation: How to use HTTPS for local development - web.dev

Set HTTPS URL to LIFF Inspector Plugin via 1 or 2

Once LIFF Inspector Server runs over HTTPS, you need to specify its origin to LIFF Inspector Plugin.

1. Use URL Search Parameter: ?li.origin=

   Add ?li.origin= query to the Endpoint URL of your LIFF App in LINE Developers Console.

   

Or

2. Use origin config of LIFF Inspector Plugin

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

Priority

LIFF Inspector Plugin attempts to connect to given origin in the order li.origin (1), origin config (2).

(Pseudo code)

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

liff-inspector's Issues

Critical Vulnerability in Webpack

I discovered vulnerability in npm packages used in this project.
I attempted to fix this, but it was not easily resolved. I am reporting this as a matter of urgency.

liff-inspector % npm install

changed 1 package, and audited 644 packages in 2s

65 packages are looking for funding
  run `npm fund` for details

10 vulnerabilities (4 moderate, 4 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

# npm audit report

webpack  5.0.0 - 5.75.0
Severity: critical
Cross-realm object access in Webpack 5 - https://github.com/advisories/GHSA-hc6q-2mpp-qw7j
fix available via `npm audit fix --force`
Will install [email protected], which is outside the stated dependency range
node_modules/webpack

1 critical severity vulnerability

To address all issues, run:
  npm audit fix --force

support "TrustProxies" option

When running inspector server behind a proxy like a load balancer, both app client and inspector client access to inspector server with SSL, but the proxy access to inspector server without SSL.

inspector server shows:
DevTools URL: devtools://devtools/bundled/inspector.html?ws=****

correct url is:
DevTools URL: devtools://devtools/bundled/inspector.html?wss=****

Switching display url option is needed like Laravel TrustProxies middleware.

Support liff-inspector via using CDN

Hope you could support this package by using CDN.
Because we are building an LIFF App on Flutter Web. It couldn't include npm module.

liff-inspector depends on vulnerable version of Webpack

https://github.com/line/liff-inspector/blob/main/packages/liff-inspector/package.json#L21

@line/liff-inspector 1.0.2 depends on "webpack": "5.72.0", but this version of Webpack has high severity vulnerability ( GHSA-hc6q-2mpp-qw7j ). You need to update Webpack to v5.76.0 or later.

https://github.com/webpack/webpack/releases/tag/v5.76.0

☔️ Support Console API

Currently liff-inspector supports four console APIs: console.(log|warn|error|info) but there are still a lot methods in Console instance.
We welcome PRs that implements APIs not yet supported.

Remaining APIs

• console.log
• console.warn
• console.error
• console.info
• console.assert
• console.clear
• console.count
• console.countReset
• console.debug
• console.dir
• console.dirxml
• console.exception
• console.group
• console.groupCollapsed
• console.groupEnd
• console.profile
• console.profileEnd
• console.table
• console.time
• console.timeEnd
• console.timeLog
• console.timeStamp
• console.trace

https://developer.mozilla.org/en-US/docs/Web/API/console#methods