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

tweaks

Browse Source
This commit is contained in:
dmc
2024-01-30 23:03:46 +01:00
parent 94cfe65a8c
commit d3335cfb02
1 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
lib/devtools.js
View File

@@ -80,38 +80,48 @@ customElements.define('developer-tooling', class extends HTMLElement {
font-size: .9em;
}
pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
h5 { font-size: .8rem; }
h6 { font-size: .7rem; }
h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
</style>
<div>
<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>
<div>
<div id=remote-inspect-explain>
<h2>Remotely inspect Pear applications.</h2>
<p> Some application setup is required to enable remote debugging </p>
<p> Install the <code>pear-inspect</code> module into the application </p>
<pre><code>npm install pear-inspect</code></pre>
<p> Add the following code to the application, before any other code: </p>
<pre><code>if (Pear.config.dev) {
<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>
<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>
<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 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>
`