The Neon Developer Tools
Google Chrome features a robust set of Developer Tools (DevTools) used by web developers to inspect HTML, CSS, and JavaScript. When viewing source code within the ‘Elements’ or ‘Sources’ panels of DevTools, Chrome automatically applies syntax highlighting. This means it colors different parts of the code—tags might be purple, strings blue, and attributes red—to make it easier to read. However, if you have a visual impairment like color blindness, or if you simply prefer a high-contrast monochrome environment, this automated rainbow of colors can actually make the raw code significantly harder to parse and read.
Disabling Syntax Coloring
To create a uniform reading environment and stop Google Chrome from automatically highlighting syntax in the Developer Tools, you must dive into the specific DevTools settings menu.
First, open the Developer Tools (press F12 or Ctrl+Shift+I). Once the DevTools panel is open (usually docked to the right or bottom of your screen), do not use the main Chrome settings. Instead, look for the gear icon (Settings) located specifically in the top right corner of the DevTools panel itself (next to the close ‘X’). Click this gear icon. In the left-hand menu of the new settings window, ensure you are in the Preferences section. Scroll down the right side until you find the section labelled Sources. Look for the checkbox named Enable syntax highlighting. Click this to uncheck it. Close the settings. All code within the DevTools will now be displayed in standard, uncolored text.