I was so intimidated by Chrome Developer Tool when I used it the very first time. I learned about this tool while studying web development on Udemy. I right clicked, chose the “Inspect” menu, and the tool popped up from the browser. I had no idea what to do with it. Lots of moving parts in this tool, I was scared that I might break it.
It took me a while to get more comfortable with it and know where to look for what I want. The more I use it, the more I understand how things on the page fit together and spend less time to solve problems.
Now, it’s one of the tools I use regularly when troubleshooting CSS or HTML and experimenting my ideas.
Chrome Developer Tool is the browser’s built-in tool for developers. In most cases, I use it for:
- Debugging CSS – when selecting an element on the page, its HTML will be highlighted, and on the right panel, we will see the styles that applied to that particular element, which helps inspecting things faster.
- Testing code on the fly – we can edit HTML or CSS within the developer tool. The result will reflect immediately on the page. This way of editing won’t affect the source code. It’s just the feature that allows us to test things on the page only.
- Visualizing responsive design – a related feature of the previous two. The tool helps me so much in editing responsive design by allowing me to select any device view I want to see and adjust elements as I wish.
How often do you use Chrome Developer Tool? What do you think about it?
This is day#24 post and a part of my commitment to spend 30 minutes a day for 30 days straight to write about software development tools that I love. My goal is to build my daily writing habit and connect to more people. This project is inspired by @dickiebush ’s “Ship 30 for 30” Atomic Essays.