Chrome DevTools - Still the King at Opening the Hood of your Front-End
January 26, 2019
Chrome DevTools - Still the King at Opening the Hood of your Front-End
Score 10 out of 10
Vetted Review
Verified User
Overall Satisfaction with Chrome DevTools
Web application testing and troubleshooting are one of the most time-consuming areas of a software engineer's tasks and the availability of reliable and comprehensive tools to facilitate this important job is critical. Chrome DevTools is an important tool in any developer's arsenal and it has been one of my long-time go-tos for this purpose. DevTools can reveal important information to you about errors your code is throwing, the state of your document model (the elements of your web page and how they are laid out) and the factors that are affecting the performance of your application. In my organization, we use Chrome DevTools across our engineering team to troubleshoot and test all of our front-end application code.
- Excellent DOM inspection tool that gives you important insights into your styles and element behavior, and allows you to make changes in-line that can show you what impact they will have if applied to your code.
- Outstanding tools for observing network and application performance, including throttling to simulate varying network speeds.
- A fantastic device emulator that allows you to view how your pages and application views will appear when viewed on a wide array of mobile devices such as tablets and smartphones.
- Debugging tools that give you the power to insert breakpoints to pause code execution and view the value of your code variables.
- It could really use an easier way to separate the kind of errors being logged to the console, such as network, security and CSS errors. This becomes a more acute problem when you consider that Firefox does have this feature.
- Unlike the Firefox and Edge dev tools, it forces you to click into a line item for network request in order to view the details of that request.
- Its performance measuring tool could stand to catch up to that of Microsoft Edge, which currently displays visualizations that are a bit easier to review.
- It has saved us vast amounts of time in debugging by offering a quick and easy way to peer under the hood of our applications in browser.
- The ability to immediately apply styling changes to your front-end view in-browser and see what changes and how it a massive help and easily reverted by a simple page refresh.
- It may be relied on exclusively a bit too much by some developers and it is important not to let your engineers get into the mindset that they should only test your front-end in Chrome.
Chrome DevTools stacks up well against similar browser tools like those offered by Microsoft Edge and Firefox. It has plenty of strengths and while it may not stand out strongly from the crowd amongst its peers it has built a strong user base around it due to its constant improvement and the popularity of the Chrome browser. It is an easy pick for us to lean on for the majority of our front-end development needs.