Atom/Electron developer tools theming - css

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.

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.
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.
Once atom opens, toggle the developer tools window and undock it.
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:
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.
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.
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.
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.

Related

How can i use CVS version control in QT

Hey I am trying to connect my Qt creator to my CVS. At the moment i am using it separated but i have seen version control options for it.
Now i have looked but no clear answer/or answer that worked has shown up.
Every one revers to the option Tools-->CVS, but this option in not in my list. The plugin is installed.
I am working on a Windows 10 computer and the information in the top shows my Qt and CVS versions.
My question is how can i use my CVS version control in QT?
First, make sur the CVS plugin is actually loaded. Go to Help > About Plugins... and ensure the CSV plugin has a green check icon.
Then ensure the CVS plugin is configured properly. Go to Tools > Options, under "Version Control" you should have a CVS tab with multiple options.
If it still does not work, you might want to report a bug in: https://bugreports.qt.io/

Webstorm: is it possible to debug a Meteor application directly in Chrome DevTools' console, instead of Webstorm GUI?

As the title says,
I see it is possible to debug a Meteor application in Webstorm but I can't figure out how to do the debug directly on Chrome DevTools
You can debug the client code using Chrome DevTools by just opening Chrome DevTools while viewing localhost:3000.
I'm not aware of a way to use Chrome DevTools for server-side debugging, but you can debug from Chrome via Node Inspector. For details, type meteor help debug and follow the directions.
To get into CDT, mash F12 in the browser window.
Then, you can select the "Sources" tab, followed by the .js file you want to inspect, and at a breakpoint by clicking on the line of code you're currently interested in. e.g., this screamshot shows a breakpoint in a template's "events" section:
As you can see, there are many other tools CDT allows you; poke around, experiment, research, and you will find a wealth of valuable insight.
Besides Chrome, Firefox also has good debugging tools, and probably most other browsers, too, including Microsoft's new Edge browser. AFAIK, they are all invoked via F12.

How to enable support for sass in chrome

I use codekit to compile sass, on the configuration I added "full debug info". I also enambled "support for sass" in the experiments settings on chrome and also enabled source maps.
Still it does not work
I watched a video where Paul Irish talks about this and on this "experiments" tab he enables "sass stylesheet debugging", I dont have that in my tab.
Am I doing something wrong?
You need to activate the experiments. To do so, open chrome://flags/ and activate Developer Tools Experiments.
After restarting Chrome you should have the Experiments tab as well.
In case anyone else ends up here after struggling to make Chrome work with Sass, you need to run a different command to generate source maps via command line: sass --watch --sourcemap sass/styles.scss:styles.css instead of --debug-info.
More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

Xrefresh alternative

i am using Netbeans PHP + Firefox 4 on Windows for my web development.
I've used a common firebug extension called Xrefresh. It was automaticlly refreshing my opened firefox tab everytime change in my projects directory occured, so pressing ctrl+s in netbeans was triggering auto-refresh in the browser. Very comfort way to work with css, almost live preview.
But now since new Firefox and Firebug versions Xrefresh doesn't work anymore and the question is - are therey any good alternatives, or does someone know how to configure Xrefresh now?
Without live preview my development is somehow slower.
https://github.com/NV/auto_update_stylesheets
This could help you. It refreshes the page via ajax on css save.
There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free.
Not an add-on to IE, but more of an "adjunct". It does not change the IE install, does not install a BHO or anything like that. So very low-impact installation.
You choose a URL that you'd like to auto-reload, and specify one or more directory paths to monitor for changes. Press F12 to start monitoring.
After you set it, minimize it. Then edit your content files. When you save, the page gets reloaded. like this:
I've managed to keep using xrefresh up until Firefox 9 however I'm not having any luck with version 10.
I've now switched to livereload, they've had a decent Mac version out for a while and a very experimental Windows version has recently been released.

VIM Key bindings for Adobe Flash Builder 4

I was curious if anyone knew of a way to get VI/VIM key bindings in Flash Builder 4. I know that I can just edit the files in VIM directly, but as I am just getting started in Flex - I would prefer to use the IDE until I get my feet about me.
I am running Flash Builder 4 on OSX Snow Leopard.
Any help would be greatly appreciated.
I haven't used Flash Builder 4, but I am under the impression it is basically a plugin for the Eclipse IDE. If this is the case, then the easiest way to get Vim key bindings might be to install the Vrapper plugin. The site for the plugin is: http://vrapper.sourceforge.net/home/
The site provides links that can be
used within Eclipse to install the
plugin. I'd probably start with this
one:
http://vrapper.sourceforge.net/update-site/stable
To install the plugin from within the
IDE, click the Help menu, then
"Install New Software..."
In the "Work with:" text box, insert
the link provided by the site.
In the table presented below the
text box Vrapper should appear
which a checkbox next to it.
Check the checkbox and click next.
You should now be able to click the
Finish button and the plugin should
be installed. You will probably be
prompted to restart the IDE. I would
do so.
Upon restart, there will probably be
a vim icon on the toolbar that you
can use to enable/disable the Vrapper
plugin. If there isn't, you should
still be able to enable/disable it
through Edit->Toggle Vrapper.
You may also want to check out http://eclim.org/ which rather than emulate Vim, allows it to be used directly with Eclipse in several ways. I think Vrapper is probably closer to what you are looking for at the moment, but eclim might be useful to you in the future.
Hope this helps.

Resources