HTML coding is used to display webpages on the screens. 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. A good feature for those of use trying to build those aesthetically beautiful webpage experiences. Chrome has a ton of awesome features that are just too good to pass up.
To set up the Project to something else to see what it may look 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.
0 comments, (608 reads) All Articles by, GabbyGirl