How to open the Inspector on Mac version of Atom


Am on following Hendrickson’s videos…he seems to be working on a PC. Can’t figure out how to open the Inspector…Anyone know?

What is the name of this font?

According to the source code, the default Mac keymap for the command window:toggle-dev-tools is alt-cmd-i.


Thank you. I am a relative newbie…looked at the video very closely and realized…the instructor was opening the Inspector of FireFox not the code in Atom. So am on to the next step.

Thank you very much for responding. Had already accessed the Atom dev-tools easily enough but looking at the video several times, couldn’t figure out why none of the code or the preview behaviors being discussed were the same as what was seen in dev-tools. The ahah moment was, realizing he’s talking about the code seen in the browser directly not what is seen in the code developer program. Accessed the Inspector in FireFox and Yae! Got what I needed to go on. Another step on that journey of a thousand steps.


Well, now you have more information about a potential fork of that journey: Atom is entirely built on web technology. It’s basically Chrome with a lot of JavaScript to make it work like a code editor. This means that its internal functions are largely out in the open for those who know how to find them, and it can be made to do things that no other editor allows, and that the skills you are currently learning will allow you to understand the software better and customize it more to your preference.


Very interesting. Defining terms, web history and differing code languages at the same time is a bit of a curve for me at the moment…Atom is a code editor (as far as I know) but it is "working LIKE(?) a code editor? OK I am going to set your words of wisdom on the side table for a bit and circle back when I understand more. But definitely, thank you again for responding.


Atom is a code editor, but it can also be a browser (very easily, and there are multiple packages that make use of this). If you want to spend a lot of time, you can literally do anything in Atom that you could in the included version of Chromium plus the included version of Node. In fact, early on in Atom’s development, the team decided that they could spin off the Chromium/Node bundle from the main Atom project, so that other people could make use of it. This became Electron, which has been used to develop cross-platform desktop apps for Slack, Discord, Wordpress, and League of Legends, among many others.


Dear DS,
I really appreciate your information which, I’m guessing, is sourced from focused attention on the subject for some time and morkly bread and butter source as well. Mine is a mostly non-code background, so free-fall is my current mind set.

Last night figured out how to access the color picker program, downloaded, found the install pallet, installed it, but Atom has not adopted the software yet. I’m guessing I need to reboot to have it work which I am loath to do…will I get back to my home at the base of the tree? or will I fall down another hole in the ice. (Hey, so my English instructor is on a lunch break and mixed metaphors are not going to be flagged right now.)

Have been exploring the GitHub site and noticed the open source developer opportunities…

Would you be willing to give me advice on options or directions?

Back story:
• Have an educational product for university students to pass the GMAT and the GRE.
• Right now it is only in print form, student workbooks, instructor training guide.
• Slides are available for class instruction.
• It’s been used since 2012 in extension programs.

Here is the gauntlet laid down in front of me:
• The slides are very colorful, everyone likes them, but they are just jpgs on HTML pages.
• The new rules of Accessibility and Disability have been laid down and mandated by the university for all curriculum that have an electronic component.
• Any slide component must now be a fully responsive website.
• Many are struggling to comply with the new guidelines.

What would you suggest under this kind of circumstance?

Was interested in the open source direction, because if there could be a shell created that others could use for this kind of purpose then maybe I could help others in my process?

But also would like to just develop 2 simple master pages, the main one being nav(logo + 3 links), 5 lines of text, image, and footer that fit the guidelines, have them approved by the university and then finish out the slides.

Have many more goals in learning the code for my product, I know many possibilities open up by education online etc. but am held captive by low code knowledge base at the moment.

What do you think?
Thank you for your time reading this content.


That doesn’t seem correct to me. Atom activates packages when it installs them. It’s possible that something went wrong with activation, in which case you can reload Atom in place with the window:reload command (ctrl-shift-f5 on Windows). Which package are you talking about, exactly?

What would you suggest under this kind of circumstance?

Are you able to share the slides?

A basic level of accomplishing what you want would just be to write an HTML page for each slide based on the content, using the existing slides as a design mockup, and using semantic HTML so that screen readers can easily interpret it. If you want to stretch your brain and learn something and contribute back to open source in the process, there are a mountain of tools in both JavaScript and Python that can be used to create data stores, modular components, and novel ways of interacting with the data. None of that is essential for you, but it could be fun.

Recently, I’ve been experimenting with Gatsby, which is a React-based tool for creating static web sites. You write a bunch of JSX templates and components and Gatsby will take your content, which can be in the same folder like I have, or it can be on Wordpress or Google Docs or literally anywhere if someone has written a plugin for it, and then it outputs plain HTML files. I’m telling you about Gatsby not because I think it’s definitely what you should use, but as an example of what can be accomplished. Personally, I’m much better at diving down rabbit holes of information than accomplishing anything, so I’m not going to overwhelm you by mentioning too many new tools at once.


Thank you for your information. Really appreciate it.

Am exploring the simpler route today as per your suggestion of a basic HTML page to get within the compliant rules and be able to finish off the slides to get past this stage. There are over 2500 slides to revise so I want to get past this road block so that my code education can progress without swallowing the ocean first.

The original design will need to be abandoned as it is way too complex and will not allow for changing the text size on the user end.

I am borderline rabbit hole kind of personality which in this case it is getting in my way and it’s time to get real. The Gatsby approach sounds very good except that it is another cross road of new info and advanced skill level right now.

Will take a look at your recent info. Thank you for your time and expertise.