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.
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, (275 reads) All Articles by, GabbyGirl