Github Atom Interface - How do I know what classes elements have in the interface

Question

I'm looking to customize a bit of the atom interface, I'm wondering though, is there a way to "inspect element" or similar so I can know what classes are on there. I haven't been able to find anything, but it's new and it might just not be well documented yet.

Does anyone know how to know what the different classes are of the elements on the interface? or a way to get the "html"?

Answer 1

Sure! First of all, if you launch Atom in development mode (with the -d argument on the command line), you'll actually have an "Inspect Element" in your context menu that does exactly what you describe. Even outside of development mode, though, just open the developer console with cmd-option-i (or View -> Developer -> Toggle Developer Tools from the menu) and click on the "Elements" tab to view the full DOM:

You might also find the Styleguide useful, since it documents the built-in CSS classes and interface elements. Launch it from the command palette with Styleguide: Show.