You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Note that these shortcut keys should only be implemented for the standalone DevTools since (1) the browser already uses these shortcut keys and (2) the "Component" and "Profiler" tabs are only part of DevTools in the standalone version anyway.
I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
for the past two hours, I have been trying to get started with building the package from source as mentioned.
I did yarn build-for-devtools but it throws the following error
➜ yarn build-for-devtools
yarn run v1.22.0
$ cross-env RELEASE_CHANNEL=experimental yarn build -- react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ node ./scripts/rollup/build.js react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE
BUILDING react.development.js (node_dev)
COMPLETE react.development.js (node_dev)
BUILDING react.production.min.js (node_prod)
OH NOES! react.production.min.js (node_prod)
-- PLUGIN_ERROR (scripts/rollup/plugins/closure-plugin) --
Error: Picked up _JAVA_OPTIONS: -Dawt.useSystemAAFontSettings=on -Dswing.aatext=true
at /home/kerolloz/react/scripts/rollup/plugins/closure-plugin.js:16:16
at ChildProcess.<anonymous> (/home/kerolloz/react/node_modules/google-closure-compiler/lib/node/closure-compiler.js:103:9)
at ChildProcess.emit (events.js:321:20)
at maybeClose (internal/child_process.js:1026:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
for the sake of documenting the errors I face, when I try to run yarn start at react/packages/react-devtools nothing happens. I tried running the electron executable at node_modules dir and the following error was given
➜ ./node_modules/.bin/electron
[112941:0306/004904.433464:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /home/kerolloz/react/node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.
Hi @bvaughn
I have been playing around the devtools packages codebase the whole night. I'm a little bit confused, I should implement the tab switching shortcut feature in the rect-devtools dir. I don't really get to understand how the standalone devtools is connected to the frontend part. I see frontend bridge. what is the right approach to get started implementing the shortcuts feature only for the standalone version. According to Electron documentation, the keyboard shortcuts suggests 3 approaches, I see that the first approach might be a good choice (Local Shortcuts). but how can I manage the frontend part and switch tab from the electron part?
packages/react-devtools: Small wrapper around core package that launches an Electron shell with the DevTools UI embedded into it.
Working on this feature will mean you'll want to test the following packages:
packages/react-devtools-core: This is the standalone UI with built-in tabs.
packages/react-devtools-inline: This UI has built-in tabs too.
packages/react-devtools-shell: This UI has tabs too and also allows you to test the change more quickly when you're initially working on it.
You will also likely end up needing to work with packages/react-devtools-shared since it's where most of the code lives. 🙂 Specifically, you may end up adding code to:
DevTools to remember the last selected tab, set the right default, and wire up the shortcut keys. (Although please be sure to only do this if showTabBar is true.)
TabBar since this is where the Tabs live. (You may not need to do anything here though.)
I do not expected that you would end up needing to do anything in either packages/react-devtools or packages/react-devtools-extensions.
Activity
kerolloz commentedon Mar 5, 2020
Hello @bvaughn, I want to get started with this issue, I am not sure which one is the "standalone DevTools".
I think https://github.com/facebook/react/tree/master/packages/react-devtools is what you mean, right?
bvaughn commentedon Mar 5, 2020
Yes, that's the one.
bvaughn commentedon Mar 5, 2020
This issue is all yours! 😄
I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
Cheers!
kerolloz commentedon Mar 5, 2020
Thank you @bvaughn 😄
for the past two hours, I have been trying to get started with building the package from source as mentioned.

I did
yarn build-for-devtools
but it throws the following errormore info:

is this a problem with Java?
bvaughn commentedon Mar 5, 2020
You'll need Java to build React source, because of the Closure Compiler, but I suggest just using the download script instead.
Should only take a few seconds.
kerolloz commentedon Mar 5, 2020
Thank you @bvaughn 😄
I tried using the script but it depends on some packages that didn't exist despite running
yarn
in the main root directory.back to the
yarn build-for-devtools
commandI followed the stack trace of the error and I managed to fix it.
react/scripts/rollup/plugins/closure-plugin.js
Lines 9 to 20 in 024a764
I changed line 13 to be
if (!exitCode)
instead ofif (!stdErr)
and the issue was fixed and I managed to compile it.kerolloz commentedon Mar 5, 2020
oh my bad
I should have run
yarn
first inside thescripts/release
dir. Sorry.kerolloz commentedon Mar 5, 2020
for the sake of documenting the errors I face, when I try to run
yarn start
atreact/packages/react-devtools
nothing happens. I tried running the electron executable atnode_modules
dir and the following error was givenThat is how I managed to solve it.
refer to: electron/electron#17972
kerolloz commentedon Mar 6, 2020
Hi @bvaughn
I have been playing around the devtools packages codebase the whole night. I'm a little bit confused, I should implement the tab switching shortcut feature in the
rect-devtools
dir. I don't really get to understand how the standalone devtools is connected to the frontend part. I see frontend bridge. what is the right approach to get started implementing the shortcuts feature only for the standalone version. According to Electron documentation, the keyboard shortcuts suggests 3 approaches, I see that the first approach might be a good choice (Local Shortcuts). but how can I manage the frontend part and switch tab from the electron part?bvaughn commentedon Mar 6, 2020
@kerolloz In case the READMEs aren't clear, here's a high level overview of the DevTools packages:
packages/react-devtools-core
: Lower level package used by the standalone shell, React Native, and some other dev tooling.packages/react-devtools-extensions
: Browser-specific code for extensions.packages/react-devtools-inline
: Embed friendly version of DevTools used by Code Sandbox.packages/react-devtools-shared
: Code shared between all of the other packages.packages/react-devtools-shell
: Test harness used for local development.packages/react-devtools
: Small wrapper around core package that launches an Electron shell with the DevTools UI embedded into it.Working on this feature will mean you'll want to test the following packages:
packages/react-devtools-core
: This is the standalone UI with built-in tabs.packages/react-devtools-inline
: This UI has built-in tabs too.packages/react-devtools-shell
: This UI has tabs too and also allows you to test the change more quickly when you're initially working on it.You will also likely end up needing to work with
packages/react-devtools-shared
since it's where most of the code lives. 🙂 Specifically, you may end up adding code to:DevTools
to remember the last selected tab, set the right default, and wire up the shortcut keys. (Although please be sure to only do this ifshowTabBar
is true.)TabBar
since this is where the Tabs live. (You may not need to do anything here though.)I do not expected that you would end up needing to do anything in either
packages/react-devtools
orpackages/react-devtools-extensions
.[DevTools] Add shortcut keys for tab switching (#18248)