Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process.

However, one major issue I encountered was the minuscule font size in the 'developer tools' window of atom. Despite attempting to install various CSS themes, including the 'dev tools theme' package for atom, none seemed to take effect. Although I have enabled "Allow custom UI themes," these themes work perfectly fine in the Chrome browser (version 60.0).

I'm wondering if it's possible to inspect the inspector within atom like in chrome, where you can undock the devtools window and press CTL SHIFT I. This would allow me to identify the specific classes that need customization and confirm whether they have been applied correctly.

Also, how can I determine which version of Chrome/Chromium atom is utilizing? It's conceivable that certain features have changed since Google's instructional guides were published.

Lastly, how do I go about manually installing a devtools theme into atom?

If you're facing similar challenges, check out this related question, which offers a solution that works in the browser but not in atom.

cssgoogle-chromeelectronatom-editor

Answer №1

Although I don't typically enjoy answering my own questions, I wanted to share this helpful information for anyone facing similar issues.

If you need to inspect the devTools window in Atom, there are three key steps to follow:

  1. To begin, launch atom via electron by executing the command 
    electron --remote-debugging-port=9222 /usr/lib/atom
    . The port number can vary, and the file paths might differ based on your operating system.
  2. Once Atom opens, toggle the developer tools window and undock it for easier access.
  3. Next, open a separate chrome (or possibly chromium) browser and go to chrome://inspect. Here, you should find 2 or 3 'Remote Target' entries. Clicking inspect will link the browser's devTools window to Atom.

When it comes to installing a theme, start by locating a suitable chrome extension. Test it in your browser before adding it to Atom. Personally, I recommend using Devtools Author, which offers various built-in themes and includes an easy font-size adjustment feature.

To proceed with installation, adhere to these instructions:

  1. Download and extract/build the sources. Store them in a designated location like ~/atom/devTools for organization. If utilizing the aforementioned package, install the required npm dependencies and execute grunt.
  2. In Atom, toggle the developer tools window and navigate to 'Settings -> Experiments -> Allow Custom UI Themes'. Ensure that the default dark theme is disabled as well.
  3. In the devTools window, access the 'console' tab and input the command 
    require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme')
    . A successful execution will display the theme name, or undefined if any issues arise.
  4. Relaunch the devTools window to witness the theme in action. It will persist even after closing/opening the main window and system reboots.

If you opt for the specified theme, it will introduce an 'Author Settings' tab in devTools where you can customize the theme and adjust the font size.

To remove the theme, utilize the command 

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

Regarding my inquiry about the version of chrome being utilized, unfortunately, I have yet to resolve that specific issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

javascriptcssreactjsbootstrap-4react-bootstrap

Issue with overlapping positioning of child components in React

I've come across multiple inquiries addressing this issue, yet none of them have provided a solution that fits my problem. In my scenario, there's a Parent component containing three Child components. import React, { Component } from 'react ...

cssreactjs

The absence of underlines for <a href> and <u> is causing an issue

Below is a snippet of code that I am working with: echo "<form> <div id=\"error\"align=\"center\">"; echo "You've either entered the incorrect <b>username</b> or incorrect <b>passwor ...

htmlcss

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Is there a way to remove background-color for a:focus?

When working with Twitter Bootstrap, I encountered a challenge. The background-color properties set for navigation items on the :focus state were causing an issue for a specific navigation element that needed have its own styling. Imagine a scenario where ...

csstwitter-bootstrap

Arrange three div elements beside each other with the middle column containing two

My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...

csshtml

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...

htmlcssgoogle-chromefirefox

Cannot see the box-shadow with :before and z-index in CSS

My main objective is to prevent the box-shadow from overlapping with adjacent elements by utilizing the :before pseudo-element and adjusting the z-index. However, I am facing an issue where the shadow appears beneath the container of the list item that is ...

htmlcssbox-shadow

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

cssreactjstypescriptreact-grid-layout

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

javascriptjqueryhtmlcssjquery-plugins

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...

javascripthtmljquerycssjquery-select2

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Is it possible to showcase D3 charts on an .epub file?

For my research project, I am exploring the possibilities of .epub files and experimenting with embedding JavaScript code to display data visualizations. I am currently using calibre to convert an HTML file containing D3 scatterplots into an .epub. The s ...

javascripthtmlcssd3.jsepub

Attempting to simulate a camera shutter effect using div elements

I've been attempting to create a circular camera shutter, but I'm facing difficulties in making it look accurate. This is the desired outcome: The first 'petal' should be positioned lower than the last one and higher than the next. Ho ...

htmlcsscss-shapes

Are there any tools available that can convert inline styles into CSS classes?

Can anyone recommend a package that will transform this text: <p style="width: 500px; height: 500px"> Hello World </p> into this format: <p class="foo"> Hello World </p> .foo { width: 500px; height: 500px; } ...

htmlcssnpm

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

javascripthtmljquerycssevents

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css