My role as a Business Analyst is to get the best understanding of the client's business and its surroundings. Focusing on end-users' needs and pains along with analyzing the market trends allows me to help you with mitigating any related risks.

Maciej Hubert

As a QA engineer, I ensure that our final products meet the company’s quality standards while supporting programming teams throughout the development process.

Natalia Witek

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](https://www.w3.org/TR/WD-DOM/introduction.html)** 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](/blog/full-stack-javascript-development), 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:

1. 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’.
2. 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.
3. 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.

![Img](https://a.storyblok.com/f/86602/720x420/115bc63112/key-features-of-google-devtools.jpg)

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.

<Baner name={qa-landing} />

### 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:

1. Computed: shows the settings of each element
2. : 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.

![Img](https://a.storyblok.com/f/86602/633x821/6552f4de5c/devtoolscreen1png)

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.

![Img](https://a.storyblok.com/f/86602/720x420/f4433f4760/console.jpg)

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.

![Img](https://a.storyblok.com/f/86602/727x791/ac1f5f1ef4/devtoolscreen2.png)

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.

<Baner name={qa} />

### 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.

![Img](https://a.storyblok.com/f/86602/736x912/314909f2ab/devtool-screen3.png)

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

![Img](https://a.storyblok.com/f/86602/720x420/226f036901/performance.jpg)

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.

![Img](https://a.storyblok.com/f/86602/1290x865/a3dc36876d/screen5png)

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)

![Img](https://a.storyblok.com/f/86602/832x938/44a611d231/devtoolscreen4.png)

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.

[Reach out for a consultation today. See you soon!](https://selleo.com/contact)

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 very simple guide to Google DevTools that will help you get the ball rolling! Stay tuned.


A Simple Guide to Google DevTools

Do you know why [Mars Climate Orbiter Spacecraft](https://www.simscale.com/blog/2017/12/nasa-mars-climate-orbiter-metric/), which supposedly the most ground-breaking project, had failed so miserably? Just because someone failed to use the right units.

Seriously? Yes, this is what happens when small errors - that could have been easily avoided by quality testing - are neglected. Do you know, often these basic errors cause unbearable financial or reputation losses no matter whether the project is well documented, delivered on time, and following business requirements.

Think of the time when [Heathrow airport got into trouble](https://www.bbc.com/news/uk-england-london-24240169) when they opened a new Terminal 5.

So, if you want to avoid such expensive mistakes, think of hiring a Quality Assurance (QA) Engineer, whose main job is to prevent defects, ensuring the quality of your development process and its results.
This is how big ventures secure a sound position in the market. They know how to achieve an edge over their competitors, thanks to their dedicated QA efforts.

## What is Quality Assurance (QA)?

As the name refers, [Quality Assurance (QA)](https://searchsoftwarequality.techtarget.com/definition/quality-assurance) is a systematic process that determines whether a product or service follows the set of requirements. This is the essential element of quality management that focuses on providing confidence in how far the quality requirements have been fulfilled.

Software Quality Assurance aims to improve work processes and efficiency, enabling companies to win customer confidence and boost their credibility. Being preventive, a QA system identifies flaws, if any, in the approaches, methods, techniques, and processes that are designed to complete a project.

QA has two fundamentals:

1. To ensure the highest quality of a product by controlling its progress.
2. To test the hell out of every feature.

Being a part of your team, QA engineers should be involved in the product development process - right from the very beginning. They will identify risks, collect and adjust requirements by analyzing customers’ briefs; and yes, discuss with the developer if some solution will not be accepted.

## Who is a QA Engineer?

A Quality Assurance Engineer is a person who is responsible for the quality of the final product. It is his/her job to maximize the quality of the product by testing it throughout the development process.

The role is different in every company. You might find successful QA Engineers or QA Analysts who don't know anything about the coding or development process, but their work is to test the final product for bugs and fixes. On the other hand, you will find other companies that hire a mid to senior-level developer who also knows every step of the development process or coding. A QA Engineer looks at the quality mainly from a business perspective but mixed with a technical approach.

Let’s discuss in more detail the contribution of a QA Engineer in a Software Development Company.

## A QA Engineer’s Contribution to SDLC (Software Development Life Cycle)

In a perfect world example, a QA Engineer contributes a crucial part in the entire Software Development Life Cycle. An SDLC testing cycle is a frequency within which QA Engineers conduct five test stages – that is, each sprint.

Check out also my video ["Quality Assurance - test engineer - our way"](https://www.youtube.com/watch?v=JYk6p5it6dk&feature=youtu.be)

Here, you will see all the five phases a QA Engineer goes through with specific tasks. So, let’s begin:

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/720x646/1ed30b329e/qa-image.png)

### Phase # 1: Gathering Details – Determining Approach to QA on the Project

It is the first and most crucial stage in the entire SDLC.

In the first initial meeting, a client describes everything they want. They provide an outline of the functionality of the desired platform, may it be a web or app. The client will provide the list of all the things they will need in the platform, from technology to features.

Once the requirement from the client has been obtained, the next tasks include:

* Analyzing and deciding whether the requirements can be integrated into a single system.
* Which solutions will work and which won’t.
* Planning the required software development testing stages and techniques.

### Phase # 2: Validation - Verifying requirements of a planned project

Validation is a process of QA of the project earlier to its development starts. Finding out the project's capability if it will meet users’ expectations and if the idea is worth investing time and money into. During this process, the QA Engineers collaborate with the client and the project leader to research the market and users’ expectations.

The research aims to analyze if the product will make sense to the market and users. Gathering feedback from clients regarding design, features, and usability will help improve the user experience.

Validation is a critical stage, and without it, the product may never reach its audience. This stage also provides indications that the product will be profitable for the client. Otherwise, why bother in the first place?

<Baner name={software-development} />

### Phase # 3: Test Planning – Writing Test Cases

In this stage, a QA Engineer will create test cases or test scenarios. These test cases are basically users’ stories that define how the application will behave. We have listed an example of two such test cases or test scenarios below:

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/663x250/591a3a440e/qa2.png)

If this phase is not clear, the testing process would be full of unexpected obstacles and contingencies. To ensure further stages follow a strict sequence of action, the QA’s job is to make up and document the action plan. Otherwise, the process itself might be clumsy.

We at Selleo use Behavior-Driven (BDD) approach at this stage. BDD solves both of these agile problems beautifully through process efficiency.

### Phase # 4: Testing developed features manually

After the test plan is done, a QA engineer will move on to the next stage, creating a testing environment and executing test cases. It is good to perform various types of tests to ensure the maximum quality of the product. Some of these test examples are:

* **Exploratory Test** – It is a type of software testing in which test cases are not developed in advance, but testers check the system on the fly. Using this test case, a QA will write a list of things he needs to test in the software before execution. The focus of exploratory testing is more on testing as a "thinking" activity. Exploratory testing is all about discovery, investigation, and learning. In this test case, the tester has freedom of responsibility.
* **System Integration Test** – It is defined as a software testing method that took place in an integrated hardware and software environment to verify the behavior of the complete system. This type of software testing is conducted to evaluate the system's compliance with its specified requirement.
* **Regression Tests** – It is defined as a type of testing performed on a recent program or code change that has not adversely affected existing features. A Regression testing is a full or partial selection of already executed test cases which are re-executed to ensure the platform's existing functionalities. The motive of Regression testing to make sure that the old code is still working fine after the latest code changes are done.

### Phase # 5: Test automation

Automated tests are different from manual tests where a human is sitting in front of the computer, carefully executing the test steps. The most significant of automation testing is that test cases are executed automatically which saves a lot of time.

After executing all the tests on the software, if all the functions were working fine, we marked the test as Passed. In this way, we make sure that we are not missing any details, and the product is fine. But if a test case fails, it means the coding is not properly done, and the QA will fail the product and send the report to the developer to check and do the needful.

The QA report explains in detail what went wrong or not. If issues were detected, each of them must be well documented to ensure fast bug fixes without any misunderstandings from the developers’ side.
Now, let’s talk about the advantages you will get from having a QA Engineer in your team.

## Four Key Benefits of having a QA Engineer in your Team

There are thousands of products and services available in the market, so how companies differentiate their product from their competitors to ensure superior quality? This is where the Quality Assurance department, or QA for short, comes into play.

There are countless benefits of having a QA Engineer in your team, but we will talk about the four essential benefits.

### Save Time and Money

A highly-qualified and experienced QA Engineer contributes to building the application, which saves time and money for the company. Just take it this way, if inconsistencies and bugs are not reported at the earlier stage, it will cost the company more time and money to repeat the entire process.

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/612x408/80cc9e8425/5867.jpg)

If developing an extensive software system, miscommunication can easily happen between the developers. This miscommunication can lead to a buggy application. In the worst scenarios, the coding didn’t work at all. A QA Engineer will work throughout the process and keep the chain intact via a proper Test Plan.
Finding ambiguities and mistakes in stated requirements contributes to the biggest value. The sooner a bug is found, the less damage it does to the whole project.

If a QA engineer supports the [kick-off of the project](https://selleo.com/blog/how-good-kick-off-documentation-can-accelerate-your-project/), it can also speed up the whole process as the client knows what to provide from the very beginning.

### Improving the Quality of the Product/Service

If a project team doesn’t have QA Engineers, that means somebody else (developers, analysts, or even project managers) needs to perform tests of the application and may not do it correctly. A QA engineer focuses on approving delivered content instead of delivering the content itself. Because of that, he has a slightly different approach than a developer.

Both developers and testers have the same goal, but the perspective is different. A developer tests the application hoping that no issues are found as that would mean additional work for him or other developers.

A QA engineer is not involved in fixing issues (excluding retesting, which is usually not so time-consuming). That allows him not to be biased by concerns or fear while searching for further issues.

Moreover, as QA engineers spend more time on testing than developers, they know more techniques of how to find bugs and strange behaviors of the application. A QA Engineer spends time researching the market and customers’ demand, so they know what the right motive of the application is. Developers do not improve their skills in testing as much as in developing - this is QA engineers’ role. Some testers are eager to find issues, which is not a bad approach.

### A Proper Alignment of Duties within the Team

The presence of QA engineers in a project helps in dividing the right jobs to the right people. In theory, anybody can click through the application and test provided functionalities.

As a result, everybody happens to do it, so it consumes developers’, analysts’, and project managers’ time, which should be spent on other things. If there are people responsible for QA in the project, everybody can focus on their duties. Besides, the quality of the application gains appropriate attention from people dedicated to assuring it.

### QA Engineers Help Secure Company Reputation

What if the application you just released has many bugs? Well, you will lose your clients, and it will be forever. Repeat the same scenario, but this time, it is the app for a client you are dealing with. Not only will your client reputation be drastically damaged because of a buggy app you designed, but your reputation will be damaged too.

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/808x498/86b573157b/rep.png)

A QA Engineer provides better insight into the product or service. The analysis of a QA engineer can help determine the risk a company faces while launching the application in the market. Quality Assurance team ensures that the product or service introduced by the company is not only of high quality but also as per the expectations of the clients.

Believe it or not, a QA saves millions of rupees of a company from damages and even legal actions that the client might take in case of their loss. Plus, consider the cost of repairing the product or service that has already been launched in the market. Nowadays, QA testing isn’t a formality; it is a business analysis tool.

## Conclusion

A QA Engineer is the need for every company's hour, whether it be a product based or services based. Companies that deal with clients for developing software are more likely to have QA Analysts, QA Specialist, or QA Engineer for ensuring the overall quality of the product.

The development companies with having an impressive and competent QA program can attract more clients. The fact of having an experienced QA team reinforces its reputation as a high-quality supplier with its customers and strengthens employee commitment.

A good QA team helps establish a strong company reputation and ensures that it is successful by providing excellent products, which in turn provides more profit and customer loyalty.

if you want to work with an experienced QA engineer [contact us.](https://selleo.com/custom-software-development-company)

Wondering if you need a QA engineer in your software project? The answer is: yes. There are countless benefits of having a QA Engineer in your team, but we will talk about a few key advantages.

Read our articles on Selleo Blog

Business

Technology

A Simple Guide to Google DevTools

Why Do We Need QA Engineers?

Tell us about your project