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

chrome-remote-multiplex

v0.1.9

Published

Allows multiple Chrome DevTools Clients to connect to a single Remote Debugger (ie Chrome Headless) instance

Downloads

18

Readme

chrome-remote-multiplex

Proxy Server application which allows multiple Chrome DevTools Clients to simultaneously connect to a single Remote Debugger (ie Chrome Headless) instance.

Google Chrome Headless (or any other Devtools Protocol implementation) only allows one client to control it at any particular time; this means that if you have an application which uses chrome-remote-interface to operate the web page, you cannot debug that web page while it is being controlled by your application.

By using chrome-remote-multiplex you can work around this restriction, by connecting your app and your debugger(s) to chrome-remote-multiplex and allowing it to handle the single connection to Chrome Headless.

Getting started

google-chrome-canary --headless --remote-debugging-port=9222 --disable-gpu https://chromium.org

npm install -g chrome-remote-multiplex
chrome-remote-multiplex

And then open a browser and go to http://localhost:9223.

You can change the ports that chrome-remote-multiplex uses via the command line, this command line has exactly the same effect as above:

chrome-remote-multiplex --connect-to=localhost:9222 server-port=9223

Managing Lifecycle - automatically closing Chrome Tabs

When instrumenting Chrome Headless, you will often create and close instances - for example, chrome-remote-interface has this example use of the command line to create a instance (i.e. a tab or window) and then close it again:

$ chrome-remote-interface new 'http://example.com'
{
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "id": "b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "thumbnailUrl": "/thumb/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "title": "",
    "type": "page",
    "url": "http://example.com/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01"
}
$ chrome-remote-interface close 'b049bb56-de7d-424c-a331-6ae44cf7ae01'

Or as http requests, try this in your browser:

  • localhost:9222/json/new -- output the new instance information
  • localhost:9222/json/close/{id} -- where {id} is taken from the output of /json/new

If your application is running in a server environment, you obviously need to make sure that you keep track of all of the instances that you create via the new command and make sure that you close them when they're no longer needed.

While this is straightforward to do in ideal circumstances, in a complex server application it can become tricky to manage those instances, especially if you want to recover gracefully from application crashes or occasionally want to sneak in with a separate connection and keep the the instance open while you debug it.

chrome-remote-multiplex adds an automatic close function that tracks connections and when the last one has disconnected from an instance, the instance itself is closed down. This means that even if your application crashes, the tab is cleaned up properly because the operating system will close the socket which will disconnect from the MultiplexServer and then cause the tab to be removed also - this is garbage collection for your browser tabs.

To make a tab automatically close, use the new /json/auto-close/{id} API, for example:

$ chrome-remote-interface -p 9223 new 'http://www.google.co.uk'
  # Let's say the output from the above command has an "id" of "b049bb56-de7d-424c-a331-6ae44cf7ae01"

$ # use the REST API to make the new tab auto-close 
$ wget -O- http://localhost:9223/json/auto-close/b049bb56-de7d-424c-a331-6ae44cf7ae01

Now browse to http://localhost:9223 and click on the link to start debugging your new tab; when you close that debugger and go back to the http://localhost:9223 you will see that the tab you just finished debugging has gone.

Note that if the instance has never been connected to, then it will only be closed once you have connected a DevTools client(s) to it and the last client has disconnected; if you have previously connected and closed a DevTools client, the instance will close immmediately.

Embedding in your application

You can embed the multiplex proxy server in your own application:

var MultiplexServer = require("chrome-remote-multiplex").MultiplexServer;
var ChromeRemoteInterface = require('chrome-remote-interface');

var server = new MultiplexServer({
  logging: "debug"
});

server.listen()
  .then(() => {
    // Use chrome-remote-interface to connect back to the server we've just created
    return ChromeRemoteInterface({ port: server.options.listenPort });
  });

There is a full example in example/embed.js

Contributing

Please feel free to raise issues, pull requests, and questions.