Toggling developer tools: JS console and DOM tree for my page only


Hello, new to Atom. I’m a d3 developer, so focused on html, css, js and have been asked by a client to use Atom for a project to create an online course.

There are three tools I use all the time from my current editor: the DOM tree, the javascript console and the html preview. I’ve installed and found the html preview for atom, so great. From googling, I can find the other two by going View > Developer > Toggle developer tools.

Let’s say I have index.html open to edit and as a preview. I want to see the DOM tree and console for this page only. But when I look at the DOM tree, I get a load of < atom-workspace > tags describing my entire workspace. I have to drill down several levels to find my page, index.html, and even then it is part of < atom-pane > tags, within which there is an < object > browser plug-in but nothing further.

Similarly, the console logs the output from the atom workspace rather than from index.html. Console.log(‘emma’); just produced no output at all.

Is there any way to get the console or DOM tree to focus on index.html rather than on my whole workspace?



No, there isn’t a way to do this built-in to Atom. The developer tools you are opening are Atom’s Developer Tools and, as such, they are intended to help in the development of Atom. You may want to contact the maintainers of the package you’re using to preview your web page inside Atom. The Atom FAQ has information on how to contact the maintainers of any Atom community package or theme.