Remote Debugger

Inspired by the devtools-backend created by Christian Bromann. We hope this can help you on debugging on arbitrary web platforms and save your life.

A Node.JS implementation of the Chrome DevTools for debugging arbitrary web platforms (e.g. OTT device like FireTV, Vizio, etc). It is similar to weinre and we replace the web inspector with devtools-frontend. Also, we have added some useful features like network mock, redux view, etc.

Requirements

Node.js (v10 or higher)

Usage

Git clone this repo and then install.

$ yarn install

And then start the server.

$ yarn start

Now you can visit http://localhost:9222/ to get our inspectable page.

You can choose to open the demo page to play with it too.

Or you can inject our script in your web app to debug your app.

<script src="http://localhost:9222/scripts/launcher.js" data-origin="debugger"></script>

You can deploy this tool on your server so that you can visit it with a certain domain.

Feature

You will learn some features of the remote debugger in this part. For most features, it's almost the same as the Chrome DevTools. It's super easy for you to get familiar with our tools.

Elements

The Elements panel is the same as the Elements panel you used in the Chrome DevTools.

Console

The Console panel is also the same as the Console panel you used in the Chrome DevTools.

You can see the logs from your web app.

You can also run scripts through the remote debugger.

Network

The network panel is super handy.

We also have a panel to help you mock network requests. You can replace the network request with a mocky URL. As you can see, I add a rule to replace the request whose URL includes the demo string with a mocky URL. When I enable the rule, the network request has been replaced with the mocky URL. I can disable it easily if I don't need this anymore.

Jan-11-2021.21-54-03.mp4

You can also share your config with your teammates.

Hope this tool can save your life.

Redux

Redux is the most popular state management tool. Redux devTools is a super handy tool to help us debug. The remote debugger has built a relay to help us use Redux devtool on our web app.

Contribution

Installation

To run the server you need to first clone the repo and install all its dependencies:

$ cd remote-debugger
# install dependencies
$ yarn install
# run dev
$ yarn run dev

You now have started the server on localhost:9222. You can see a list of inspectable pages on http://localhost:9222 (also available as json).

Chrome Devtools Frontend

We use the Chrome Devtools Frontend as the UI of the remote debugger. As the Chrome Devtools Frontend is a very huge project, we haven't put it in the repo. You can find the Chrome Devtools Frontend in the node_modules folder.

How to modify the Chrome Devtools Frontend

You may notice that we have a chrome-devtools-frontend folder in the source too. That's where we modify the devtools frontend code.

We will sync the file from this folder to the chrome-devtools-frontend folder in the node_modules. You can see the scripts from scripts/debugExtension.js. We will run this script when you run yarn run dev.

Sync file is not a good option, we need to restore the change when we finish development. But I have not found out a good way to solve this, you can run yarn run restore to solve this problem.

How to upgrade the Chrome Devtools Frontend

Before you start to upgrade, remember to run yarn run dev to clear the change you made. Otherwise, you will meet some really strange problems.

It's pretty easy to upgrade the package, just install the latest version from npm or add the latest version from yarn. You can see the version list from here.

But not every version works well. Some of the versions may even break when we install the package. The newest version I try that can work is "1.0.734346".

When you run some of the version you may meet some problems, such as document.registerElement is not a function.

First of all, you should check that have you run the restore script at first.
If you have already run that, there may be something wrong with this version, I recommend you to install another version.
If you really want this version, you can install some polyfill as it is based on web components. You can use something like https://github.com/WebReflection/document-register-element.

This project was heavily based on devtools-backend by Christian Bromann.

Tubitv / remote-debugger