Add guide on terminal debugging (#43)

* Add guides on how to debug mobile/terminal apps

* Rename to Pear Desktop

* Cleanup

* Clean Pear.config.args explanation

* Fix incorrect renaming

* Remove mobile debugging guide

* Rename fix

* Rename back to Pear Runtime
This commit is contained in:
Tobias Baunbæk Christensen
2024-02-16 15:35:02 +01:00
committed by GitHub
parent 9fa999e0c8
commit af9d543015
6 changed files with 62 additions and 12 deletions

View File

@@ -17,6 +17,7 @@
* [Making a Pear Terminal Application](./guide/making-a-pear-terminal-app.md)
* [Sharing a Pear Application](./guide/sharing-a-pear-app.md)
* [Marking a Release](./guide/releasing-a-pear-app.md)
* [Debugging a Pear Terminal Application](./guide/debugging-a-pear-terminal-app.md)
### How-tos
@@ -37,7 +38,7 @@
* [Hyperswarm](./building-blocks/hyperswarm.md)
## Helpers
## Helpers
* [Corestore](./helpers/corestore.md)
* [Localdrive](./helpers/localdrive.md)

View File

@@ -0,0 +1,50 @@
# Debugging A Pear Terminal Application
Debugging Pear Terminal Applications is different than debugging Desktop Applications because they do not come with a UI. Instead a few steps are needed.
Use [Pear Inspect](https://github.com/holepunchto/pear-inspect) together with the Pear Runtime Desktop and use any tool that supports DevTools like Chrome.
## Step 1. Install pear-inspect
First install `pear-inspect`:
```
npm install pear-inspect
```
## Step 2. Add Code
This code should run as the first thing in the application:
``` js
if (Pear.config.dev) {
const { Inspector } = await import('pear-inspect')
const inpector = await new Inspector()
const key = await inpector.enable()
console.log(`Debug with pear://runtime/devtools/${key.toString('hex')}`)
}
```
## Step 3. Run In Dev Mode
As the code specifies, `pear-inspect` is only running when in dev mode, so start the app:
```
pear dev .
```
The application will output something similar to:
```
Debug with pear://runtime/devtools/a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2
```
## Step 4. Add to Pear Runtime Desktop
In Pear Desktop go to `Developer Tooling` and paste in the key.
Note that the key can also be sent to someone else and they can debug the app remotely.
## Step 5. Open in Chrome
Click on `Open in Chrome` or copy the link into a tool that support DevTools.

View File

@@ -10,7 +10,7 @@ Since `npm` (or equivalent package manager) is needed to install application dep
Pear runs on Windows, Mac and Linux.
The `pear` CLI can be installed from [npm](https://www.npmjs.com/), which comes with [`node`](https://nodejs.org/en/about).
The `pear` CLI can be installed from [npm](https://www.npmjs.com/), which comes with [`node`](https://nodejs.org/en/about).
The `npm` package manager can also be used to install application dependencies later on.
@@ -35,7 +35,7 @@ pear
```
If a Pear application, such as [Keet](https://keet.io), is already installed then the Pear platform is already available. In this case, running `pear` should show help output.
If not, the first run of `pear` will fetch the platform from peers, after which running `pear` again should output help information.
To check that Pear is fully working, try the following command:
@@ -50,4 +50,4 @@ Pear loads applications from peers, so this command should open [Keet](https://k
## Next
* [Starting a Pear Desktop Project](./starting-a-pear-desktop-project.md)
* [Starting a Pear Terminal Project](./starting-a-pear-terminal-project.md)
* [Starting a Pear Terminal Project](./starting-a-pear-terminal-project.md)

View File

@@ -32,7 +32,6 @@ const { teardown, config } = Pear
const key = config.args.pop()
const shouldCreateSwarm = !key
const swarm = new Hyperswarm()
const log = console.log
const rl = readline.createInterface({
input: new tty.ReadStream(0),
output: new tty.WriteStream(1)

View File

@@ -94,7 +94,7 @@ customElements.define('system-status', class extends HTMLElement {
#tip {
margin-top: 3rem;
}
h1 {
h1 {
padding: 0.5rem;
display: inline-block;
padding-right: 0.75em;

View File

@@ -9,9 +9,9 @@ as small as possible.
## `global.Pear`
The Pear Platform API is made available globally as `Pear`.
The Pear Platform API is made available globally as `Pear`.
The `Pear` API is designed to be small and immutable.
The `Pear` API is designed to be small and immutable.
Any future changes to the `Pear` API will be non-breaking additions.
@@ -83,7 +83,7 @@ Application storage path.
### `Pear.config.args <Array>`
Command-line application arguments passed after double dash `--`.
Command-line application arguments passed like `pear dev . --some arg`.
### `Pear.config.release <Number>`
@@ -363,9 +363,9 @@ Restart the application.
The `listener` function is called for every incoming update with an `update` object of the form:
```js
{
type: 'pear/updates',
version: { fork <Integer>, length <Integer>, key <String(hex)>, } | null,
{
type: 'pear/updates',
version: { fork <Integer>, length <Integer>, key <String(hex)>, } | null,
app <Boolean>,
diff <Array <String> >,
}