A developer has to have the right tools and the knowledge on how to use them to be successful. My top most utilized tool as a Front End Developer is Chrome DevTools. So start by right clicking on your browser and selecting Inspect or using the hotkeys commands: Command + Option + I for Mac or F12 for Windows/Linux.
Creation
There are several tabs within DevTools, but we want to focus on the Elements tab for creating UI. To the left of the tabs there are two icons, one for selecting elements on the screen and the other for the responsive screen guide. Click the arrow icon and use it to select an element on the page.
Within Elements, you can view the selected HTML element as well as the styles applied to it in the subtab called Styles. Elements > Styles allows you to disable styles by clicking on the checkboxes and many of the properties and their values are editable if you click on them. I use these features when I’m building out something new to see if I like it before I make the changes to my css file. All changes made within this feature are temporary and will disappear as soon as you refresh the page. If you scroll down you can also get a visual of the padding and margin being applied to the element. Hover over it to see where they are on the screen.
Also within the Elements > Styles tab you can find at the top right a button titled :hov. This will open a menu for you to enable pseudo selectors such as :focus, :active, and :hover. This feature is especially important when writing styles for and testing buttons and links.
Investigation
There are several great features in Chrome that help us investigate bugs in both the UI and in logic. If I am reviewing a pull request with UI features, the first thing that I will open is the Elements > Computed tab. While the Styles tab will give you all of the classes and their styles, the Computed tab will show you the properties in alphabetical order and which one is truly being applied. I will have the design file open next to the page I’m reviewing and will compare font-size, font-weight, line-height, and colors to the Computed properties. When you click on a property, it will list all of the classes on that property in a hierarchy. I have had many moments of finding out that a different class is overwriting the class I wanted to apply to the element. With that information, I can write a class of higher specificity to achieve the desired result.
For debugging React props, state, and hooks, I recommend installing React Developer Tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). Once installed, you will have new tabs at the Elements and Console level called Components and Profiler. Components allows you to manually manipulate state variables as well as see them changing in real time. It also gives a visualization of the parent to child component tree.
Optimization
If optimization is something that interests you, then Chrome DevTools is once again here to help you. As part of the React Developer Tools installation, you will have a new tab added called Profiler. Simply click the Record icon and interact with elements on the page then click the icon again to stop. The Profiler offers insight into what React is rendering, why it rendered, and how long it took to render that component. This can be great if you want to dive deeper in your understanding of what causes react re-rendering and point you to which components could be refactored.
For reports on accessibility, performance, best practices, SEO, as well as whether or not the application meets Progressive Web App criteria, the Lighthouse tab has it all. I used this tool when working on a PWA because it showed me very clearly that I needed the proper icons in a manifest.json in order to pass the standards. There is so much available within the Lighthouse feature to make code cleaner and more available to consumers.
There are so many more features in Chrome DevTools than I could capture in one article (https://developer.chrome.com/docs/devtools/). Try out the ones that I have mentioned but explore beyond. Let it become an assistant that helps you create, debug, and optimize your code to new levels.
