{"id":14914502,"url":"https://github.com/line/liff-inspector","last_synced_at":"2025-09-23T06:31:42.160Z","repository":{"id":38269510,"uuid":"481430000","full_name":"line/liff-inspector","owner":"line","description":"The universal DevTools for LIFF (WebView) browser","archived":false,"fork":false,"pushed_at":"2025-03-19T09:18:25.000Z","size":144,"stargazers_count":65,"open_issues_count":4,"forks_count":4,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-09-18T09:05:09.135Z","etag":null,"topics":["chrome-devtools","chrome-devtools-protocol","devtools","liff","liff-plugin","line"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@line/liff-inspector","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/line.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-14T01:42:57.000Z","updated_at":"2025-09-09T06:23:55.000Z","dependencies_parsed_at":"2024-02-06T05:25:09.210Z","dependency_job_id":"9246c050-666e-422a-9706-bbc10e368354","html_url":"https://github.com/line/liff-inspector","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"16e90ec2ec95f9985d32ebf6601a04a2d60bad17"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/line/liff-inspector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fliff-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fliff-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fliff-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fliff-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/line","download_url":"https://codeload.github.com/line/liff-inspector/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fliff-inspector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275807252,"owners_count":25532156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-devtools","chrome-devtools-protocol","devtools","liff","liff-plugin","line"],"created_at":"2024-09-22T22:01:06.268Z","updated_at":"2025-09-23T06:31:41.832Z","avatar_url":"https://github.com/line.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Check code health](https://github.com/line/liff-inspector/actions/workflows/code-check.yml/badge.svg)](https://github.com/line/liff-inspector/actions/workflows/code-check.yml)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eLIFF Inspector 🔬\u003c/h1\u003e\n  \u003cstrong\u003eThe universal DevTools for LIFF (WebView) browser\u003c/strong\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\nLIFF 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.\n\n| LIFF browser                                                                                                    | ChromeDevTools                                                                                                  |\n| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |\n| ![image](https://user-images.githubusercontent.com/22386678/164411108-526320d6-75f3-42a7-93a1-737c3deb23ff.png) | ![image](https://user-images.githubusercontent.com/22386678/164409862-ed739dec-fe6a-4ecc-98af-fc433c5ba5d1.png) |\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n[日本語版](./README_ja.md)\n\n## TOC\n\n- [Features](#features)\n- [Getting Started](#getting-started)\n- [Example](#example)\n- [Roadmap](#roadmap)\n- [Contribution](#contribution)\n\n## Features\n\n📱 Enable debugging LIFF Browser and WebView with debugging options disabled\n\n🌍 Remote debug\n\n🔬 Support `Elements`, `Console` and `NetWork` tabs of ChromeDevTools\n\n## Getting Started\n\nLIFF Inspector consists of two components:\n\n- LIFF Inspector Server\n- LIFF Inspector Plugin\n\nLIFF Inspector Server is a server program that mediates communication between LIFF app and ChromeDevTools.\nLIFF Inspector Plugin is a [LIFF Plugin](https://developers.line.biz/en/docs/liff/liff-plugin/). LIFF Plugin is available in LIFF SDK v2.19.0 or later.\n\n### 1. Start LIFF Inspector Server\n\n```sh\n$ npx @line/liff-inspector\nDebugger listening on ws://{IP Address}:9222\n```\n\n### 2. Install LIFF Inspector Plugin to your LIFF App\n\n```sh\n$ npm install @line/liff-inspector\n```\n\n```ts\nimport liff from '@line/liff';\nimport LIFFInspectorPlugin from '@line/liff-inspector';\n\nliff.use(new LIFFInspectorPlugin());\n```\n\n### 3. Connect LIFF App and LIFF Inspector Server\n\nBefore the actual `liff.init` process, LIFF Inspector Plugin will try to connect LIFF Inspector Server.\nDebugging with LIFF Inspector is available immediately after `liff.init` call.\n\n```ts\nliff.init({ liffId: 'liff-xxxx' }).then(() =\u003e {\n  // LIFF Inspector has been enabled\n});\n```\n\n### 4. Open ChromeDevTools\n\nAfter `liff.init`, LIFF Inspector Server shows the devtools URL for your LIFF App in console.\n\n```diff\n$ npx @line/liff-inspector\nDebugger listening on ws://{IP Address}:9222\n\n+ connection from client, id: xxx\n+ DevTools URL: devtools://devtools/bundled/inspector.html?wss=8a6f-113-35-87-12.ngrok.io/?hi_id=xxx\n```\n\nOpen the URL starts with `devtools://devtools/` and enjoy debugging!\n\n## Important: LIFF Inspector Server need to be served over SSL/TLS\n\nBy 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](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content).\n\nTo eliminate mixed content, you need to serve LIFF Inspector Server over HTTPS (`wss://`). We have two recommended ways:\n\n### Serve local server over HTTPS via 1 or 2\n\n1. Using [ngrok](https://ngrok.com/) to make LIFF Inspector Server public\n   1. Run ngrok\n      ```sh\n      $ ngrok http 9222\n      ```\n   2. Copy the published URL\n      ```sh\n      $ 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);\"\n      wss://xxxx-xxx-xxx.ngrok   # Copy this url\n      ```\n\nOr\n\n2. Running LIFF Inspector Server with HTTPS using mkcert\n   - See the detail explanation: [How to use HTTPS for local development - web.dev](https://web.dev/how-to-use-local-https/)\n\n### Set HTTPS URL to LIFF Inspector Plugin via 1 or 2\n\nOnce LIFF Inspector Server runs over HTTPS, you need to specify its origin to LIFF Inspector Plugin.\n\n1. Use URL Search Parameter: `?li.origin=`\n\n   Add `?li.origin=` query to the Endpoint URL of your LIFF App in [LINE Developers Console](https://developers.line.biz/console).\n\n   ![image](https://user-images.githubusercontent.com/22386678/164425138-43c5bdcb-01b9-4107-9b8a-cc86cb65015f.png)\n\nOr\n\n2. Use `origin` config of LIFF Inspector Plugin\n\n   ```ts\n   // Default origin: ws://localhost:9222\n   liff.use(new LIFFInspectorPlugin({ origin: 'wss://xxx-xx-xx-xx.ngrok.io' }));\n   ```\n\n### Priority\n\nLIFF Inspector Plugin attempts to connect to given origin in the order `li.origin` (1), `origin` config (2).\n\n(Pseudo code)\n\n```ts\nconst originFromURL = new URLSearchParams(search).get('li.origin');\nconst originFromConfig = config.origin;\nconst defaultOrigin = 'ws://localhost:9222';\nconnect(originFromURL ?? originFromConfig ?? defaultOrigin);\n```\n\n## Example\n\nSee https://github.com/cola119/liff-inspector-example\n\n## Roadmap\n\n**Contributions Welcome!**\n\n### Elements Tab\n\n- [x] To display Elements\n- [x] To display overlays\n- [ ] To remove/add/edit Elements\n- [ ] To display styles\n\n### Console Tab\n\n- To display console logs\n  - [x] `console.log`\n  - [x] `console.warn`\n  - [x] `console.error`\n  - [x] `console.info`\n  - [ ] others\n- [ ] To execute local scripts\n\n### Network Tab\n\n- To display simple network logs\n  - Fetch/XHR\n    - [x] `fetch()`\n    - [x] `XMLHttpRequest`\n    - [ ] `sendBeacon()`\n    - [ ] others\n  - Others(JS/CSS/Img/Media/Font...)\n    - Technically difficult to intercept them...\n\n### Application Tab\n\n- [ ] LocalStorage\n- [ ] SessionStorage\n- [ ] Cookies\n- [ ] others\n\n## Contribution\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fline%2Fliff-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fline%2Fliff-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fline%2Fliff-inspector/lists"}