A Simple Guide to Google DevTools
If you’re working on any form of a software development project and have never used Google DevTools before, then you could be really missing out.
Built directly into the Google Chrome browser in the form of a Chrome Extension, Google DevTools (often referred to as Chrome DevTools) is a beneficial set of development tools that could help you save time and money and improve quality on your next project.
Google DevTools could be a real game changer for any web developer. And if you’re not sure where to start with it, don’t worry. We’ve put together a straightforward guide to Google DevTools that will help you get the ball rolling! Stay tuned.
What is DOM?
Document Object Model often referred to as just ‘DOM’ for short, is an ‘object representation’ of a web page. Let’s break it down.
As you may already know, a web page is fundamentally a document, or a set of documents, that can be viewed through a web browser or as a set of HTML source code in a coding programme.
The DOM of that web page enables scripting languages, like Python or Javascript, to change the layout, the content, the style, and just about everything else within that code language. It kind of translates the HTML element in that sense.
This is super useful, but what exactly does it have to do with Google DevTools? Let’s take a look.
What is Google DevTools?
As we mentioned before, Google DevTools is a set of development tools that comes in the form of an extension for Google Chrome. It’s effectively a very effective way to view and change the DOM of your web page.
But that’s not all Google DevTools does. We’ll check out some of the app’s key features in a second, but let’s find out how to access it first.
How to Access Google DevTools
As is the case with the majority of software from Google, DevTools is simple to use and it looks great too, which really adds to the whole experience of using it. Just follow these simple steps and you will be using DevTools for your next project in no time:
- Open up Google Chrome and press the key combination command + option + J if you are a Mac OS user or shift + control + J if you are on a Windows device. This will load up the DevTools console onto the right-hand side of the browser. Another way to do this is right click on any element website element and choose ‘Inspect’.
- Select an element in the DOM tree to edit the CSS for that part and change its style. This includes background colours, font size and family and images, to name a few functions.
- Select an element to edit the HTML if you want to really go into the back end of the development. There is also an HTML panel of the DevTools main menu.
Key Features of Google DevTools
Besides being able to edit the DOM of a website, there are many really cool features of Google DevTools that you will want to get to know. Let’s check them out:
- It allows you to debug Javascript: anyone who has worked with Javascript to develop web apps or web pages before will be familiar with Javascript bugs. Fortunately, Google DevTools contains a set of debugging tools that can massively reduce the time of debugging in a more manual fashion.
- You can change a page’s style (CSS): it’s easy to maintain full control over the visual aesthetics of your Google DevTools development product thanks to the ease at which you can control the CSS.
- Easily view messages and run Javascript code in the console: Javascript is super easy to handle with Google DevTools. The way it presents messages and allows you to run code through its console is neat and effective.
- It helps you optimize your website’s speed: there is nothing unnecessary going on code-wise with Google DevTools. It just does all of the basics very well indeed. This means that your website will be speedy for users to engage with, regardless of how much content you put into it.
- You can inspect network activity: Google DevTools’ network panel is another really nice touch. This allows you to find out if any of your resources have failed to upload or download at any point. Plus, you can inspect the properties of any of those resources at the touch of a button.
By the way, you can check out any of these features by heading over to the Google DevTools homepage and taking a look at a demo there. It’s free to use and easy to sign up to try out. Plus, there are a bunch of great tutorial videos that can help you to get started.
DevTools Components
We just saw an overview of the most important features of Google DevTools, but what about the individual components that make it up? Knowing about these will really improve your understanding of DevTools as a concept and help you to be able to use it better.
Elements
One of the main components of Google DevTools is the Elements pane. During software development with DevTools, any creations or edits of HTML elements made via JavaScript as page loads will be reflected within the rendered HTML.
Elements help to demonstrate this clearly by showing the page’s code in terms of HTML and CSS. Some important parts of the Element panel to look out for are a follows:
- Computed: shows the settings of each element
- : hov: used to force the state of any given element. Because of this, we can preview the style for the state that we are looking for. Those states consist of:
- Active: fulfills the principle of the pseudoclass: active from the moment of holding the LPM (left mouse button) over the selected area until it is released.
- Hover: complies with the rule of the pseudo-class: hover, when the mouse cursor is over the area of the element at a given moment.
- Focus: meets the principle of the pseudo-class: focus, when at a given moment the user focused on a given element (e.g. using the TAB key).
- Visited: meets the principle of the pseudo-class: visited, when the element is a visited link by the user at a given moment.
Throughout the testing processes of web applications, the Elements panel helps with checking any textbox or image. Anything can be inspected, and a web developer can use this information to figure out the best way to access the element.
Using this tool is very helpful when writing automated tests and one has to know the ID element.
Furthermore, the Elements panel also allows us to edit HTML elements, which is great for security testing. Sometimes, buttons have to be hidden or removed altogether, which can be done in the Elements panel.
Console
Offering up something slightly different to Elements is the DevTools Console panel. Here, we can write code or see registered notifications that will assist us in building and troubleshooting our web applications.
This panel is particularly important for testing as it instantly shows us any error on the system and provides detail about it. With this information, web developers can quickly see, identify and fix any issues that may have arisen from the development process.
If the web page does not work correctly, we can see the reasons for this in the Console panel and log messages.
Even more excitingly, we can see when people visit the web page. This can help us build up an idea of what kind of hit rate we are getting, which is crucial to understanding how to build up a customer base.
The console has various options for displaying messages:
- console.info: differs from console log in that there is an icon in the listing.
- console.group: allows you to group messages, starts with console.group (‘info’) and ends with console.groupEnd (‘info’).
- console.groupCollapsed: allows grouped messages, at the same time it is presented using collapsed information.
- console.table: log listing view is represented by a table.
- console.time (‘start’): allows you to measure the time for the code being executed, console.time (‘test’) starts, and console.timeEnd (‘test’) ends.
Sources
The Sources panel is one of the most important of all of the elements of Google DevTools. We can use the Sources panel for any one of the following reasons:
- Editing CSS and JavaScript, the two main functions of DevTools.
- Viewing files.
- Creating and saving JavaScript ‘snippets’. These are similar to bookmarklets, and you can run them on any page.
- Debugging JavaScript (in this case, you’ll want to use the Sources tab closely with the Console tab)
- Setting up a workspace. That is to say, a place to make changes to DevTools that get saved to the code within your file system.
Network
Within the Network panel of DevTools, you can inspect the network activity. This will allow you to find and solve network issues to optimise websites.
Within the Network panel, you will be able to see all of the requests made to the server while using a web page with configurable columns.
Plus, when something doesn’t work the way that you planned, you can see every request’s response from the server. This could prove invaluable for troubleshooting and testing because the QA can report any bugs to developers, allowing them to be fixed more quickly.
Performance
The Performance panel shows ‘runtime performance’. This is how your page performs when it is running, as opposed to loading. This is a great way to test the versatility of your web application across a number of different devices and connection speeds.
Just because your web app looks good on your high-powered computer with superfast broadband, it does not mean it will work at all on a computer with less power and a weaker download speed.
Memory
With the Memory panel, you will be able to inspect JavaScript ArrayBuffer, just as long as you are using Chrome91 or later.
The two best things about the Memory panel are as follows:
- Open in multiple ways: to inspect the memory of an object or a web page or app, you can either go into the Memory panel through DevTools (More Tools > Memory Inspector) or during debugging by opening a page with JavaScript ArrayBuffer and loading a particular file from the Debugger pane.
- Inspect multiple objects at once: this is a great way to compare the memory of certain aspects of a page to see how they correspond to one another.
Application
View a variety of web metadata in the Application panel of DevTools, including the resources that your page is using. The data that you can interact within the Application panel includes:
- Editing and clearing of persistent storage
- Starting, updating and unregistering service workers
- Exporting images or copying an image as a Data URI
Toggle device toolbar
The main function of the Security panel is to simulate device frames. This is super useful in particular for testing apps on mobile, as you can run mobile simulators on websites.
Testing apps on a lot of devices is helpful, considering the variety of devices available to consumers these days. Just because your app works on one or two devices does not mean it’s going to be cross-compatible across many more. That’s where the Security panel comes in handy.
Lighthouse
Lighthouse is an open-source, automated tool used to improve the quality of web pages and put it simply.
With Lighthouse, we can see reports about any page that include the following super important criteria of a web page:
- Performance (how fast your web page runs)
- Accessibility (effectively how usable your web page is)
- Best practices (how closely your web page abides by the best rules to live by with running a web app)
- SEO (short for search engine optimization, determining basically how high up your web page will find itself in Google results)
When you run a report with Lighthouse, you will be able to see all of the parameters listed above as a percentage figure. This is a super neat, no-frills approach to summarise the quality of your web page, and here at Selleo, we are big fans of it!
AdBlock
The vast majority of us will have come into contact with Google Chrome’s famous browser extension, AdBlock. It can be the bane of ad managers’ and website owners’ lives, to name a few, but a great tool for the average browser.
AdBlock is incorporated into DevTools so that you can see what ads are and are not hidden by the extension. It will also help you prevent AdBlock from picking up content on your web page that is not supposed to be blocked.
Summary
Google’s DevTools could really be one of the most important developer tools you will ever come across in your career as a web developer, startup founder, or other creative or tech professional.
If you find yourself looking for a top team of DevTools developers that you can outsource your work to, then look no further than Selleo. We’ve got all of the skills and expertise you could need to implement DevTools into your next project in fine style.
Originally published at A Simple Guide To Google DevTools.
