Do you support installing extra DevTools into Electron?

[sebinsua]

I see no mention within the openfin documentation of tools like React DevTools and Redux DevTools. These types of tools are extremely useful for debugging modern applications. Has there been any thought into first-class support for them to improve the developer experience?

You could look into an approach like the one found in electron-devtools-installer as this might help you in coming up with a good approach for the feature.

As it stands I have to build/use standalone versions of the tools which isn't ideal.

Sorry, if I'm not meant to ask this here, but you've open-sourced so it felt like fair game! :)

[dcchuck]

Hey Seb,

Definitely the right place to ask! We currently don't support these devtools extensions out of the box. While it is on our radar, it's not on our short term roadmap. I'll loop back if this moves to a sprint.

Chuck Danielsson

[sebinsua]

Not saying this is going to happen but do you accept contributions?

I'm tempted to fork the repo to see if I can get it to work... :)

[dcchuck]

Absolutely!

[sebinsua]

Hey.

I forked and played around. I can install the extensions but the extra tabs don't appear.

I think this could either be because of an older version of Electron or because of some security feature or disabled logic within Openfin. What version of Electron was openfin forked from - was it before 1.2.1? I don't believe Electron had support before then. Can you think of anything beside this which could stop it from working?

Is it possible to attach a debugger to openfin itself? I have low visibility on what Election does to load its devtools extensions.

[sebinsua]

@dcchuck Can anybody expand on how to use node inspector to debug the interaction between openfin and Electron?

As I managed to get the extensions to install correctly, I would like to try to work out what stops the tabs from appearing. It could be a lower version of Electron, but it could also be an internal setting which stops them from running.

[dcchuck]

Hey Seb,

V7 was forked off of 1.4.15. You can set the port for the debugger in the runtime arguments with --debug=PORT_NUMER.

As for using node-inspector, here's a wiki that covers how to set it up. In summary you:

1. Install node-inspector
2. Launch an OpenFin app & set --debug=5858 in the runtime arguments
3. Run node-inspector from your command line with ELECTRON_RUN_AS_NODE=true your/path/to/runtime/openfin.exe node_modules/node-inspector/bin/inspector.js

Step 3 assumes you've installed node-inspector to your local directory

After that follow the instructions in your console & navigate to 127.0.0.1:8080/?port=5858 where you should see the inspector

[sebinsua]

Thanks for your help.

I got the debugger to work however I'm not able to work out why the installed devtools are not working. I might not understand the codebase well enough to work this out tbh.

I've noticed that renderer/chrome-api doesn't appear within the debugger and therefore never gets executed. However I unpacked openfin.asar and it's within this package, so I know it exists alongside the other Electron code. My understanding is that the DevTools extensions require various Chrome APIs to be available and it looks like the JavaScript for the tab is never executed, however the question I have is what is meant to emit CHROME_TABS_EXECUTESCRIPT and what creates the DevTools tab. The Electron code is a bit of a maze to me at the moment though...

Edit: Hm, I found out that the extensions are probably not being loaded using their manifest.json#background.scripts[] and now I've just noticed the following error message, which might explain why stuff isn't being run:

[ERROR:CONSOLE(457)] "Uncaught Error: Cannot find module '/Users/sebinsua/OpenFin/Runtime/7.53.21.6/OpenFin.app/Contents/Resources/openfin.asar/renderer/init.js'", source: module.js (457)

Need to confirm it's not due to some bad code I wrote a few weeks ago by rolling back. I already know that file exists. (It also could be environmental, since I'm on OSX at home...)