Google Chrome is a staple in the web development world. If you’re an aspiring developer, learning how to use this web browser is super helpful. Obviously, there are a lot of other browsers out there, like Safari, Firefox and even Internet Explorer (shudder!) But Chrome has a ton of awesome features that are just too good to pass up. 

Given that, I wrote about why every developer should become a power user of the Chrome browser. 

Google Chrome Developer Tools are exceptional.

Web pages are built up from HTML tags that are displayed on the screen. In Chrome, if you right-click an element on the page, it pulls up the specific HTML Element and shows you what it’s displaying. This can help you find the exact part of the HTML you’re trying to understand. On top of that, you can also test out making changes to the HTML in the browser. 

For example, if you want to change the Step 3 – Set up the Project to something else to see what it looks like, you can modify the HTML directly. If you right-click the HTML in the developer tools and choose “Edit as HTML,” you can put any HTML you want inline. These changes will be applied directly to the page. You can also add custom CSS to the HTML elements in the browser to quickly check to see what the page would look like. On the right, you can manually add the CSS of something like font-weight: bold to see what the headline would look like if it was set to be bold. 

You can do all of this within a single tab of the Chrome Developer Tools.  There are a lot more tabs too. 

Check this out. 

At the top left of Chrome Developer Tools, there is a little icon phone icon. If you click on the phone icon, you can see the view of exactly what your page would look like inside different phone devices. Clicking it takes me to the view of the page in an iPhone 6. This makes it remarkably easy to quickly check to see how a page would look on a mobile device, which can make it incredibly easy to optimize a web application for a mobile experience.

Here’s another thing that makes Google Chrome super useful. 

Many programming languages have what is known as a REPL, or a Read-Evaluate-Print-Loop tool. In short, a REPL is just a quick way to execute an arbitrary line of code in a programming language. If you click over to the Console tab, you’ll see Google Chrome has a JavaScript REPL built in. You can even run the JavaScript code in context to the page that’s being displayed. Check this out in action:

Even if the developer tools don’t have the functionality built in, you’re not at a loss.

With the Google Chrome Plugin Web Store, you can find custom add-ons that supercharge Chrome with even more developer awesomeness. For instance, if you’re working in React, you’ll be able to use the custom React Developer Tools Chrome Add-on. If you’re using a different framework, maybe Angular you’ll see there are plugins for Chrome for that too.

Google Chrome’s experience for web developers makes it better than ever to be building web applications.

Firefox has some up-and-coming developer tools, but Google Chrome has an established dominance as web developer’s go-to web browser since it makes so many things possible, intuitive and easy. Learning how to navigate the Google Chrome Developer Tools is a big part of learning web development in 2017 and beyond. So if you’re trying to become a developer, you probably should be using Chrome.