Atom/Electron developer tools theming

1
votes

I've recently migrated from using the netbeans IDE to githubs atom. It doesn't have some of the features I need and I cannot find a suitable package, so I am attempting to do it myself. This is also giving me a great insight into how the editor works.

One massive problem though, is the font size in the 'developer tools' window. It is tiny (I'm guessing about 11px). Google has told me that I need to install a css theme, and there are a few out there. There is even a 'dev tools theme' package for atom. But nothing I have tried seems to be applied. Yes, "Allow custom UI themes" has been set. The same themes, however, do work in the chrome browser (ver 60.0).

Can I inspect the inspector within atom, like I can do in chrome? (undock the devtools window and hit CTL SHIFT I again). This will help me discover exactly which classes I need to configure and if they have been applied correctly.

How can I tell which version of chrome/chromium atom is using? It's possible some features have changed after googles 'how to' guides were written.

How do I manually install a devtools theme into atom?

Here is a related question which works in the browser but not in atom.

1
cssgoogle-chromeelectronatom-editor
If this is just about the font size, you can press Ctrl++ (on macOS that's Cmd++) in the Developer Tools — just like in the main window. – idleberg
@idleberg Thanks for that tip. That, and the built in, although ugly, dark theme will get me along for now, but I'm determined to hack this hackable editor. – Twifty

1 Answers

1
votes

I don't really like answering my own questions, but I'll post this here for anybody else having problems.

Inspecting the devTools window in atom involves three steps.

  1. Launch atom via electron by running the command electron --remote-debugging-port=9222 /usr/lib/atom. The port can be any valid port number and the paths may differ depending on the OS.
  2. Once atom opens, toggle the developer tools window and undock it.
  3. Open a separate chrome (may also work with chromium) browser and navigate to chrome://inspect. There should be listed 2 or 3 'Remote Target' entries. Clicking inspect will attach the browsers devTools window to atom.

To install a theme, first find a chrome extension, and test it in your browser before adding to atom. Personally, I used Devtools Author which has many built in themes and an easy font-size slider.

To actually install, follow these steps:

  1. Download and extract/build the sources. I placed them in ~/atom/devTools to keep everything together. If using the above package, you will need to install the npm dependencies and run grunt.
  2. Open atom and toggle the developer tools window. In the devTools window check 'Settings -> Experiments -> Allow Custom UI Themes`. Also make sure the built in dark theme is disabled.
  3. In the devTools window click 'console' and enter the command require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme'). If successful, it should print the name of the theme, or undefined if something went wrong.
  4. Relaunch the devTools window to see the theme in action. It will persist when the main window is closed/opened and system reboots.

If using the above theme, it will add an 'Author Settings' tab to devTools from which you can select a theme and font-size.

To remove the theme run require('remote').require('browser-window').removeDevToolsExtension('theme name'). To view theme names run require('remote').require('browser-window').getDevToolsExtensions().

As for my question about the chrome version being used, I didn't figure it out yet.