aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 22:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

align voice, routing, display, instructions, rm optional dep

Browse Source
This commit is contained in:
dmc
2024-01-30 22:52:33 +01:00
parent 30dda87d51
commit a7383cefb9
3 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
lib/developer-tooling.js → lib/devtools.js
View File

@@ -25,12 +25,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
display: none;
}
#code-installation {
white-space: pre-line;
padding-bottom: 1rem;
font-size: 10px;
}
.app {
display: flex;
align-items: center;
@@ -50,37 +44,75 @@ customElements.define('developer-tooling', class extends HTMLElement {
width: 1rem;
display: none;
}
#remote-inspect-explain {
float:left;
max-width:55%;
}
#remote-inspect {
float:right;
max-width:40%;
}
h2 { margin: 0 }
p {
margin-block-start: 0.75em;
margin-block-end: 0.75em;
}
input {
all: unset;
border: 1px ridge #B0D944;
background: #000;
color: #B0D944;
padding: .45rem;
font-family: monospace;
font-size: 1rem;
line-height: 1rem;
}
code {
background: #3a4816;
color: #efeaea;
padding: 0.25rem;
padding-top: 0.1rem;
padding-bottom: 0.15rem;
font-family: 'overpass-mono';
border-radius: 1px;
font-size: .9em;
}
pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 }
</style>
<h1>Inspector</h1>
<div>
Use DevTools to debug your Pear apps
</div>
<ol>
<li>npm install pear-inspect in your app</li>
<li>
Add this code to your app:
<div id="code-installation">
import inspector from 'inspector'
import { Inspector } from 'pear-inspect'
const pearInspector = await new Inspector({ inspector }).enable()
const inspectorKey = await pearInspector.enable()
console.log('Pear Inspector key:', inspectorKey.toString('hex'))
<h1>Developer Tooling</h1>
<div id=remote-inspect-explain>
<h2>Remotely inspect Pear applications.</h2>
<p> Some application setup is required to enable remote debugging </p>
<p> First install the <code>pear-inspect</code> module into the application </p>
<pre><code>npm install pear-inspect</code></pre>
<p> Then add the following JavaScript code to the application, at the top: </p>
<pre><code>if (Pear.config.dev) {
const { Inspector } = await import('pear-inspect')
const inpector = await new Inspector()
const key = await inpector.enable()
console.log('Pear Inspector key:', key.toString('hex'))
}</code></pre>
<p>When the application is opened in development mode the inspection key will be logged.</p>
<p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
</div>
</li>
<li>Running your program and the Pear Inspector key will be logged</li>
<li>Paste the logged key here</li>
<li>In Chrome, open chrome://inspect and the app should appear under Targets</li>
</ol>
<div>
<form id="add-key-form">
<input id="add-key-input" type="text" placeholder="Pear Inspector key"/>
<p id="add-key-error"></p>
</form>
</div>
<h2>Apps</h2>
<h3 id="no-apps">No apps added. Add a key above, to start debugging.</h3>
<div id="apps"></div>
<div id=remote-inspect>
<div>
<form id="add-key-form">
<input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
<p id="add-key-error"></p>
</form>
</div>
<h2>Apps</h2>
<h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
<div id="apps"></div>
</div>
</div>
`
this.root = this.attachShadow({ mode: 'open' })