npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@line/liff-inspector

v1.0.2

Published

<div align="center"> <h1>LIFF Inspector 🔬</h1> <strong>The universal DevTools for LIFF (WebView) browser</strong> </div> <br>

Downloads

13,863

Readme

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 | | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | image | image |


日本語版

TOC

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
});

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

  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
  2. Running LIFF Inspector Server with HTTPS using mkcert

Set HTTPS URL to LIFF Inspector Plugin

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.

    image

  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

  • [x] To display Elements
  • [x] To display overlays
  • [ ] To remove/add/edit Elements
  • [ ] To display styles

Console Tab

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

Network Tab

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

Application Tab

  • [ ] LocalStorage
  • [ ] SessionStorage
  • [ ] Cookies
  • [ ] others

Contribution

See CONTRIBUTING.md