1. Home
  2. Debugging Tools
  3. Chrome DevTools Reviews
  4. User Review of Chrome DevTools
King of Web Development and Debugging Tools
February 01, 2019

King of Web Development and Debugging Tools

Taylor Morgan | TrustRadius Reviewer
Score 10 out of 10
Vetted Review
Verified User

Overall Satisfaction with Chrome DevTools

Our entire web development team uses Chrome DevTools on a daily basis. It complements similar tools by other major browsers but is the go-to tool of choice for looking under the front-end hood of a website under development. In the hands of a knowledgeable user, DevTools opens the door to a wealth of helpful information, debugging tools, and even skill-building.
  • Provides clear, easy to understand, and actionable intelligence on how the browser is retrieving, parsing and rendering the page.
  • Covers a wide gamut of front-end development tasks, from manipulating CSS rules to line-by-line debugging of JavaScript to helpful page and server insights.
  • Continuously incorporates new tools and helpful features. With nearly every major Chrome release there is a "What's new" update with at least one or two useful items.
  • As one delves into DevTools, one encounters a gradually steeper learning curve. You can do a lot very quickly, but to fully utilize DevTools takes time as one explores what it can do.
  • With many new updates, tools and items are moved, and a comfortable workflow becomes a frustrating search. This often happens when following only slightly outdated tutorials on a given feature, even in Google's own documentation.
  • The experimental flags, settings, and options are scattered about and a little clunky to configure when one has to make changes in multiple places.
  • Decreases development time for paid projects.
  • Increases customer satisfaction as we are able to deliver quick fixes to reported issues.
  • Increases quality of paid projects as we are able to better test sites in a variety of circumstances.
Chrome DevTools is our team's go-to solution for development and debugging, but most major browsers include similar tools. Firefox and Edge include tools that do just about every major item DevTools does, but Chrome's implementation is at least as polished as Firefox's and significantly more user-friendly than Edge's. Chrome is also constantly pushing updates with new helpful features. For instance, a few versions ago Chrome added an optional "Changes" tab that keeps track of all CSS changes made while experimenting on a page. So helpful!
We utilize DevTools heavily while developing the front-end of a website. By default, it provides a helpful hierarchical view of the Document Object Model (DOM) alongside a linked pane of applicable CSS rules. It is by far the easiest way to try out combinations of HTML and CSS while developing an existing site, and even rivals dedicated environments and sandboxes for isolated experimentation (i.e. when not developing a full website). It gives the developer complete control over everything client-side (i.e. HTML, CSS, and JavaScript). Would these CSS rules I'm tinkering with work better if they were nested under another <div>? I'll just modify the DOM, add the rules to it, and find out -- all within DevTools.

DevTools is also irreplaceable helpful for debugging issues -- whether HTML/CSS related, JavaScript, or even in the loading process of a page. You have to know how to use it, but if you do DevTools gives you all of the tools you need.