5 reasons why designers should use Chrome’s developer tools What it is, where to find it, and reasons why designers should use it Chrome developer tools are essential for building websites and apps on the web. They help developers troubleshoot all kinds of issues. However, DevTools are jam-packed with useful features for designers as well. The DevTools lets you view and edit the content (HTML) and styling (CSS) on the fly, as well as the functionality (JavaScript) of a page. Reasons why designers should use DevTools Let’s get started. 1. Quick inspection The quick inspection tool allows you to quickly check which fonts are being used, as well as their properties. Additionally, you’ll be able to look at sizing, spacing, and layout. 2. Make changes to the page With DevTools, we can easily update any content on the page. This can be useful when testing whether UI elements are breakproof to content changes. For instance, trying to break an element with a longer copy. 3. Device mode There’s an easy way to see how the page looks on different devices without resizing Chrome’s window manually. To enter device mode, press Ctrl+ Shift + I, followed by Ctrl + Shift + M in DevTools. You can choose which device you want to emulate, define its orientation, and even simulate a weak network connection under the Throttling dropdown. 4. Color picker There’s a pretty fancy color picker in DevTools, especially considering it’s hidden inside a tool made primarily for developers. You can toggle between RGBA, HSL, and Hexadecimal formatting, and it shows you the site’s color palette. You’ll find the website’s color palette at the bottom of the color picker. 5. Toggle element state With Toggle Element State, you can easily inspect the state of an element on the page, like a button. As a first step, select an element using the shortcut Ctrl + Shift + C, click on the :hov, and then choose the state. Once you have chosen the state, you can view its styles (CSS). Comment down your favorite tool: Follow Tushar Verma for more related content #css #webdesign #webdesigner #webdevelopment #developertools #chrome #softwaredevelopment