Skip to content

Allow to use the Profiler when no client is connected in standalone DevTools #22551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bvaughn merged 3 commits into from
Oct 14, 2021
Merged

Allow to use the Profiler when no client is connected in standalone DevTools #22551

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
78f3efa
Allow Profiler to be used with no connected clients (#22127)
gabrieltrompiz Oct 13, 2021
d366b31
Stopped passing overrideTab as a prop to DevTools in the standalone ver.
gabrieltrompiz Oct 13, 2021
cd728ea
Modified the default tab key when opening DevTools in "Profiler" mode
gabrieltrompiz Oct 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/react-devtools-core/src/standalone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,14 @@ function onError({code, message}) {
}
}

function openProfiler() {
// Mocked up bridge and store to allow the DevTools to be rendered
bridge = new Bridge({listen: () => {}, send: () => {}});
store = new Store(bridge, {});

reload();
}

function initialize(socket: WebSocket) {
const listeners = [];
socket.onmessage = event => {
Expand Down Expand Up @@ -372,6 +380,7 @@ const DevtoolsUI = {
setProjectRoots,
setStatusListener,
startServer,
openProfiler,
};

export default DevtoolsUI;
19 changes: 19 additions & 0 deletions packages/react-devtools/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,16 @@
<strong>before</strong> importing React DOM.
</div>
</div>
<div class="box">
<div class="box-header">Profiler</div>
<div class="box-content">
Open the <a
id="profiler"
class="link"
href="#"
>Profiler tab</a> to inspect saved profiles.
</div>
</div>
<div id="loading-status">Starting the server…</div>
</div>
</div>
Expand Down Expand Up @@ -201,6 +211,12 @@
}
}

function openProfiler() {
window.devtools
.setContentDOMNode(document.getElementById("container"))
.openProfiler();
}

const link = $('#rn-help-link');
link.addEventListener('click', event => {
event.preventDefault();
Expand All @@ -217,6 +233,9 @@
$byIp.addEventListener('click', selectAllAndCopy);
$byIp.addEventListener('focus', selectAllAndCopy);

const $profiler = $("#profiler");
$profiler.addEventListener('click', openProfiler);

let devtools;
try {
devtools = require("react-devtools-core/standalone").default;
Expand Down