JavaScript for QA Frontender teaches to debug code through Devtools

JavaScript for QA Frontender teaches to debug code through Devtools

Hello everyone, my name is Ivan, I am a testing engineer (Manual and Automation). In the trade for more than 2 years. In this article, we’ll look at black-box, gray-box, and white-box methods, as well as how JavaScript can be used to transition from black-box to gray-and-white.

With me today senior front-end developer, Oleksiy – a specialist with extensive experience, he will teach you how to debug code in Devtools and set a breakpoint. Will give advice to QA how to become more independent and identify errors in code with basic knowledge of JavaScript. Link to Oleksiy’s channel “Frontender’s Tales”

Why do we need a breakpoint and how does it relate to testing methods?

What is a testing method? This is a method of approach to testing: you can approach testing with your eyes closed with the “Experimental Testing” test design, and you can learn what’s going on under the hood and how to drip a mechanic in the dirt in someone else’s code. A breakpoint is one of the wrenches that will help you check the code and its implementation in the project.

THEORY (1 min)

QA approaches testing in three ways:

Black box method – software testing without knowledge of its internal structure and implementation.

  • Independence from internal implementation: QA professionals can test software without knowing the details of its implementation. This allows them to focus on testing functionality and user experience.

Gray box method – testing with some insight into the internal structure of the software.

  • Deeper testing: QA professionals can use knowledge of the software’s internal structure for deeper testing, including database validation, API interaction, and application state validation.

White box method – testing of the internal structure and implementation of the software.

  • Full code coverage: QA specialists can check every line of software code, which allows you to detect hidden errors and improve the quality of the software.

In order to move from the black box to the gray box, we need to familiarize ourselves with Devtools, and more precisely with some tabs that a test engineer needs.

Elements – a tab that allows you to view and edit the HTML structure of the page, as well as change the styles of the elements.

Console – provides the ability to interact with the JavaScript interpreter, display errors and output debugging messages.

Network – displays all network requests sent and received by the page, as well as information about the time resources are loaded.

Sources – allows you to view and debug JavaScript files (images, css files, etc.), as well as set breakpoints in the source code for debugging the js script.

PRACTICE (20 min)

New functionality has been added to the web page for the occasion of the holiday. The thematic update brought falling snowflakes ❄️ to the site when the page is loaded. In the requirements, there are parameters for the speed and rotation of snowflakes for a more realistic picture. Using the black box method, i.e. by eye with a stopwatch, you will not be able to test, even if you really want to.

Variables are included in the new functionality speed and rotate, which are important. It is necessary to compare the expected result (requirements) with the actual one. is a tested site where you can follow the instructions below yourself. I recommend using Chrome Browser.

Go to the site and open the developer tool (devtools) – the Sources tab.

Sources – Page – – main.js

main.js is a JavaScript file that usually contains the basic code and logic for making a website work. It can include functions, event handlers, interactions with page elements, and other operations necessary for the site to function.

A website usually consists of three main components:

HTML (HyperText Markup Language) is a markup language used to create the structure and content of a web page.

CSS (Cascading Style Sheets) is a style language that defines the appearance and design of a web page.

JavaScript is a programming language that allows you to add interactivity and dynamic behavior to a web page.

The legend of the screenshot is indicated below in the corresponding color

🟠 JavaScript code is in the orange area. For ease of understanding the code, we have left comments for each function block of our snowflakes.

🟢 In green – line numbers, when clicking on a line, we activate a breakpoint.

🟣 In purple – breakpoint control. Skip a point, step through a function, display the value of a variable, etc.


The speed of the snowflakes should be different for realism, approximately speed (2-3 sec) and is set by a random number. Turn rotate (right and left) the snowflakes by the same random number, but not too fast. Snowflakes should also not overwhelm the website interface. Test the number of snowflakes when staying on the site for more than 5 minutes.

A breakpoint is a debugging tool that allows us to select a specific line of code where we want to stop to analyze the data and state of the program at that point. Breakpoint = Stop point

A breakpoint cannot be set on the initialization of a function:

🔴function createSnowflake() {

Function initialization createSnowflake() is a function declaration and definition of its body. It only creates a function in memory, but the execution of the code inside the function only happens when that function is called.

The legend of the screenshot is indicated below in the corresponding color

After activating the breakpoint, you need to start debugging the code with any click on the website. (After clicking, the function is activated and, accordingly, the break point)

By setting a breakpoint, we stop the execution of the function at this line. This allows us to continue executing the code inline to track changes to our variable.

🟤 The main commands for managing breakpoints are highlighted in brown. Click on the arc-shaped arrow and step by function

🟢 Values ​​for each line of code and values ​​of variables are highlighted in green.

🔵 The section marked in blue Watch, in which you can add variable names and see their values. Also, these values ​​can be seen in the green area.

It’s time to understand the meaning of variables (FR) and compare with requirements (BP)

randomSize – An arbitrary value of the size of snowflakes in the range from 20px to 80px.

startX – Random value of the appearance of a snowflake from the left edge.

speed – Random speed, but not falling, but turning snowflakes.

The legend of the screenshot is indicated below in the corresponding color

🔵 The variable is indicated in blue speed it is used in turning snowflakes rotate ${speed}s linear infinite

🟠 The value of the speed of snowflakes is indicated in orange – 3 seconds, snowfall 3s linear infinite – this means rejection of requirements. The speed of the snowflakes is the same, but should depend on the random number of the variable speed.

You can already start a Jira task and attach the OP and FR.

In addition to the speed of the snowflakes, we also need to test their number and how they affect the performance of the site when staying on it for more than 5 minutes.

❄️ Write in the comments what happens on the site if the user is there for more than 5 minutes, and what can be changed in the code to fix the error.


Thanks to our front-end developer, Oleksiy, for transitioning from the black box method to the gray one, through a great browser tool – Devtools (Breakpoint).

❄️ Link to Oleksiy’s channel, where he helps to understand JavaScript “The story of the frontender”

❄️ Ivan’s QA contact – tg for contact @evanovnew

Related posts