JavaScript performance and Debugging

A Seminar II report submitted in

Partial fulfillment of the requirements

For the Degree of

Bachelor of Technology
In

Computer Engineering
Submitted by

Pawara Pankaj Bansilal

DEPARTMENT OF COMPUTER ENGINEERING

S.S.V.P.S.’s B.S. DEORE COLLEGE OF ENGINEERING, DHULE
2022-23

I
JavaScript performance and Debugging
A Seminar II report submitted in

Partial fulfillment of the requirements

For the Degree of

Bachelor of Technology
In

Computer Engineering
Submitted by

Pawara Pankaj Bansilal

Guided by

Prof. P. P. Patil

DEPARTMENT OF COMPUTER ENGINEERING

S.S.V.P.S.’s B.S. DEORE COLLEGE OF ENGINEERING, DHULE
2022-23

II
 S.S.V.P.S.’s B.S. DEORE COLLEGE OF ENGINEERING,
DHULE
DEPARTMENT OF COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the Seminar II entitled ‘JavaScript performance and

Debugging’ has been carried out by

Pawara Pankaj Bansilal

Under my guidance in partial fulfillment of the degree of Bachelor of

Technology in Computer Engineering of Dr. Babasaheb Ambedkar
Technological University, Lonere during the academic year 2022-23. To the
best of my knowledge and belief this work has not been submitted
elsewhere for the award of any other degree.

Date:

Place: Dhule

Seminar Co-ordinator Guide

Prof. B. S. Parakh Prof. P. P. Patil

Head Principal
Prof. B. R. Mandre Prof. Dr. H. D. Patil

III
 ACKNOWLEDGEMENT

First of all, I am indebted to the GOD ALMIGHTY for giving me an

opportunity to excel in my efforts to complete this seminar on time.
I am extremely grateful to our Principal Prof. Dr. H. D. Patil, and
our College, S.S.V.P.S.’s B. S. Deore College of Engineering, Dhule and
our HOD Prof. B. R. Mandre, Head of Department of Computer
Engineering, for providing all the required resources for the successful
completion of my seminar.
My heartfelt gratitude to my seminar guide Prof. P. P. Patil, Senior
Lecturer, Computer Engineering, for her valuable suggestions and guidance
in the preparation of the seminar report.
I express my thanks to Teachers, all staff members and my Friends
for all the help and co-ordination extended in bringing out this seminar
successfully in time.
I will be failing in duty if I do not acknowledge with grateful thanks
to the authors of the references and other literatures referred to in this
seminar.
Last but not the least; I am very much thankful to my Parents who
guided me in every step which I took.

Thanking You
Pawara Pankaj Bansilal

IV
 ABBREVIATIONS

Seria
Abbreviations Details
l No.
1. HTML Hyper Text Markup Language

2. CSS Client Side Scripting

3. JS JavaScript

4. API Application Programming Interface

5. IoT Internet of Things

6. DOM Document Object Model

7. UI User Interface

Table of Contents
V
ABSTRACT........................................................................................................................1
Chapter 1 ............................................................................................................................2
1. INTRODUCTION........................................................................................................2
1.1 HISTORY OF JAVASCRIPT..................................................................................3
1.2 WHY JAVASCRIPT?..............................................................................................4
1.3 FEATURES OF JAVASCRIPT...............................................................................4
1.4 APPLICATIONS OF JAVASCRIPT.......................................................................5
1.5 WHAT IS JAVASCRIPT USED FOR?...................................................................5
Chapter 2 ............................................................................................................................7
2. OBJECTIVES...............................................................................................................7
Chapter 3 ............................................................................................................................8
3. LITERATURE REVIEW............................................................................................8
Chapter 4 ............................................................................................................................9
4. METHODOLOGY.......................................................................................................9
4.1 PERFORMANCE IN JAVASCRIPT.......................................................................9
4.1.1 Delay JavaScript Loading................................................................................10
4.2 JAVASCRIPT DEBUGGUING.............................................................................12
4.2.1 JavaScript Debugging Example.......................................................................12
Chapter 5 ..........................................................................................................................17
5. RESULTS AND DISCUSSIONS...............................................................................17
Chapter 6 ..........................................................................................................................24
6. ADVANTAGES, DISADVANTAGES AND FUTURE SCOPE.............................24
CONCLUSION.................................................................................................................26
BIBLIOGRAPHY............................................................................................................27

VI
 Figure Index

Figure 1.1: JavaScript Logo.........................................................................................3

Figure 1.2: JavaScript Applications............................................................................5

Figure 4.1: Array Push Method.................................................................................11

Figure 4.2: Array Pop Method..................................................................................11

Figure 4.3: Array Shift Method.................................................................................12

Figure 4.4: Console Panel..........................................................................................13

Figure 4.5: Debugger source file...............................................................................14

Figure 4.6: Menu console...........................................................................................15

Figure 4.7: Output Console.......................................................................................16

Figure 5.1: Source panel.............................................................................................17

Figure 5.2: Tree File System......................................................................................18

Figure 5.3: Debugger Console....................................................................................18

Figure 5.4: Breakpoints..............................................................................................19

Figure 5.5: Paused Breakpoints.................................................................................20

Figure 5.6: Call Stack.................................................................................................21

VII
 ABSTRACT

Increased focus on JavaScript performance has resulted in vast performance

improvements for many benchmarks. However, for actual code used in websites, the
attained improvements often lag far behind those for popular benchmarks.
This paper shows that the main reason behind this short-fall is how the compiler
understands types. JavaScript has no concept of types, but the compiler assigns types to
objects anyway for ease of code generation. We examine the way that the Chrome V8
compiler defines types, and identify two design decisions that are the main reasons for
the lack of improvement: (1) the inherited prototype object is part of the current object's
type definition, and (2) method bindings are also part of the type definition. These
requirements make types very unpredictable, which hinders type specialization by the
compiler. Hence, we modify V8 to remove these requirements, and use it to compile the
JavaScript code assembled by JSBench from real websites. On average, we reduce the
execution time of JSBench by 36%, and the dynamic instruction count by 49%.

General Terms
JavaScript, JSBench, Chrome V8

Key Words: JavaScript, JSBench, Chrome V8

1
 Chapter 1

INTRODUCTION

JavaScript is an open-source programming language designed for creating web-centric

applications. It is lightweight and interpreted which makes it much faster than other
languages and is integrated with HTML making it easier to implement in web
applications.

JavaScript is a scripting language that is used to create and manage dynamic web pages,
basically anything that moves on your screen without requiring you to refresh your
browser. It can be anything from animated graphics to an automatically generated
Facebook timeline.

When most people get interested in web development, they start with good old HTML
and CSS. From there, they move on to JavaScript, which makes sense, because, these
three elements together form the backbone of web development.

 HTML is the structure of your page like the headers, the body text, any images you
want to include. It basically defines the contents of a web page.

 CSS controls how that page looks (it’s what you’ll use to customize fonts, background
colors, etc.).

 JavaScript is the third element. Once you’ve created your structure (HTML) and your
aesthetic vibe (CSS), JavaScript makes your site dynamic (automatically updateable).

JavaScript (JS) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses JS to provide several
forms of interactivity and simplicity.

2
Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the market.
In addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript
as their scripting and query language.

Figure 1.1 JavaScript Logo

1.1 History of JavaScript

In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed to
become more dynamic. Thus, a 'glue language' was believed to be provided to HTML to
make web designing easy for designers and part-time programmers. Consequently, in
1995, the company recruited Brendan Eich intending to implement and embed Scheme
programming language to the browser. But, before Brendan could start, the company
merged with Sun Microsystems for adding Java into its Navigator so that it could
compete with Microsoft over the web technologies and platforms. Now, two languages
were there: Java and the scripting language. Further, Netscape decided to give a similar
name to the scripting language as Java's. It led to 'Javascript'. Finally, in May 1995, Marc
Andreessen coined the first code of JavaScript named 'Mocha'. Later, the marketing team
replaced the name with 'LiveScript'. But, due to trademark reasons and certain other
reasons, in December 1995, the language was finally renamed to 'JavaScript'. From then,
JavaScript came into existence.[1]

3
1.2 Why JavaScript?
JavaScript is an essential programming language, almost compulsory to learn for students
or software developers that are gravitated towards web development. Wondering why?
Here’s the answer:
 JavaScript is the most popular programming language in the world and that makes it a
default choice for web development. There are many frameworks available which you
can use to create web applications once you have learned JavaScript.
 JavaScript offers lots of flexibility. You can create stunning and fast web applications
with tons of customizations to provide users with the most relevant graphical user
interface.
 JavaScript is now also used in mobile app development, desktop app development,
and game development. This opens many possibilities for you as a JavaScript
developer.
 Due to the high demand in the industry, there are tons of job growth opportunities and
high pay for those who know JavaScript.
 The incredible thing about JavaScript is that you can find tons of frameworks and
libraries already developed, which can be used directly in web development. That
reduces the development time and enhances the graphical user interface.[2]

1.3 Features of JavaScript

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.

4
 7. JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
8. It provides good control to the users over the web browsers.

1.4 Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),
 Displaying clocks etc.

1.5 What is JavaScript Used For?

JavaScript is used in various fields from the web to servers, and here’s a quick list of the
significant areas it’s used in:

Figure 1.2 JavaScript Applications

 Web Applications: JavaScript is used for adding interactivity and automation to

websites. So, if you want your web application to be anything more than just a static
page of contents, you’ll probably need to do some “JavaScript’ing.”

 Mobile Applications: JavaScript isn’t just for developing web applications; it is also
used for developing applications for phones and tablets. With frameworks like React
Native, you can develop full-fledged mobile applications with all those fancy
animations.

5
 Web-based Games: If you’ve ever played a game directly on the web browser,
JavaScript was probably used to make that happen.

 Back-end Web Development: JavaScript has traditionally been used for developing
the front-end parts of a web application. However, with the introduction of NodeJS, a
prevalent back-end JavaScript framework, things have changed. And now, JavaScript
is used for developing the back-end structure also.

6
 Chapter 2
OBJECTIVES

 To Reduce Activity in Loops.

 To Reduce DOM Access.
 To Reduce DOM Size.
 To Avoid Unnecessary Variables.
 To Avoid the Delay JavaScript Loading.
 Placing script execution under control.
 To Avoid Using with.

A debugger is an application that places all aspects of script execution under the control
of the programmer. Debuggers provide fine-grained control over the state of the script
through an interface that allows you to examine and set values as well as control the flow
of execution.[3]

Built-in debuggers can be turned on and off, forcing errors to be reported to the user.
With a debugger, you can also set breakpoints (places where code execution can be
stopped), and examine variables while the code is executing.[4]

Debuggers provide fine-grained control over the state of the script through an interface
that allows you to examine and set values as well as control the flow of execution. Once
a script has been loaded into a debugger, it can be run one line at a time or instructed to
halt at certain breakpoints.

7
 Chapter 3
LITERATURE REVIEW

Whether you are cutting-and-pasting pre-written scripts, just starting out in writing your
own, or are a seasoned JavaScripter, you probably have to spend a lot of time
troubleshooting and debugging. I've found that this part of the scripting process can be
challenging regardless of your level of JavaScript experience. To make life easier, here
are some fundamentals of debugging and a few troubleshooting steps just for you.

There are three basic types of errors in JavaScript, or any other programming or scripting
language for that matter. They are Syntax errors, Runtime errors, and Logical errors.
Whenever you're troubleshooting a script, try to look for errors in that order, starting with
Syntax errors. It's also important to know what each of the error messages mean.[5]

 Syntax errors in client-side JavaScript are usually one of the following: typos,
spelling mistakes, missing quote marks, missing/unmatched brackets, or missing
object names or IDs. Remember that JavaScript is usually case-sensitive:
"someObj" is not the same as "someobj". The majority of script errors are caused
by incorrect syntax. Luckily, these are also the easiest to spot.
 Runtime errors are illogical or incorrect reasoning in your script. A very common
error in JavaScript is mismatched data types—something like trying to perform a
mathematical calculation on a data string. (The ubiquitous "...is NaN" message
signifies this type of error.)

 Logical errors are errors which won't show up as error messages, but are
nevertheless not what you want from the script. For example, if you mouseover
one button that you want highlighted, but instead another one changes color,
that's a logical error.

Chapter 4
8
 METHODOLOGY

4.1 Performance in Javascript

JavaScript is an essential part of almost every web app and web-based software.
JavaScript’s client-side scripting capabilities can make applications more dynamic and
interactive, but it also increases the chance of inefficiencies in code. Thus, poorly written
JavaScript can make it difficult to ensure a consistent and healthy experience for all
users.[6]

Guide below will enlighten you about the causes of JavaScript performance issues and
provide some of the best practices for optimizing JavaScript code.

Use fast DOM traversal with document.getElementById().

Given the availability of jQuery, it is much easier to produce highly specific selectors
based on a combination of tag names, classes, and CSS3. You need to be aware that this
approach involves several iterations while jQuery loops through each of DOM elements
and tries to find a match. You can improve DOM traversal speeds by picking a specific
element by ID.

Example:

// jQuery will need to iterate until it finds the right element

let button = jQuery('body div.dialog > div.close-button:nth-child(4)')

[0];

The above code makes use of JQuery to manipulate the DOM which is not the best
option as instead of doing it this way we can make use of the getElementById method
which the document object provides us.

// A far more optimized way is to use document.getElementById.

let button = document.getElementById('dialog-close-button');

4.1.1 Delay JavaScript Loading

9
Where we load our style sheets and JavaScript files can have an effect on the perceived
speed of a page if the user can see some content even before the JavaScript takes in it’s a
much better experience when a browser encounters a script tag it stops what it’s doing
completely to download and run the script if we put our scripts at the top of the page that
means it’s downloading our JavaScript files first and then later getting down to parse our
HTML body this means while our scripts are downloading there is no content for the user
to see now if we put our scripts at the bottom of the page instead by the time, our script
starts loading there’s at least some content on the page making the page seem to have
loaded faster.

An alternative is to use defer in the script tag. The defer attribute specifies that the script
should be executed after the page has finished parsing, but it only works for external
scripts.

Example:

// placing script at the end:

<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
<script type="text/javascript" src="my-script.js"></script>
</body>
</html>

// using defer:
<script type="text/javascript" src="path/to/script2.js" defer></script>

Use ‘switch’ instead of lengthy ‘if-then-else’ statements.

When your code base gets bigger a switch statement is usually more efficient than a set
of nested ifs. This is because ‘switch’ statements can be optimized more easily during
compilation.

Get rid of unnecessary loops and calls made inside loops.

10
Array push() pop() and shift() instructions have minimal processing overhead due to
being language constructs closely related to their low-level assembly language
counterparts.

Example:

// push() method
let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
Animals.push("Zebra");
console.log(Animals);

// pop() method
let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
Animals.pop();
console.log(Animals);

Figure 4.1 Array push method

Figure 4.2 Array pop method

// shift() method
let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
Animals.shift();
console.log(Animals);
11
 Figure 4.3 Array shift method

4.2 JavaScript Debugging

Sometimes a code may contain certain mistakes. Being a scripting language, JavaScript
didn't show any error message in a browser. But these mistakes can affect the output.

The best practice to find out the error is to debug the code. The code can be debugged
easily by using web browsers like Google Chrome, Mozilla Firebox.[7]

4.2.1 JavaScript Debugging Example

Here, we will find out errors using built-in web browser debugger. To perform
debugging, we can use any of the following approaches:

 Using console.log() method

 Using debugger keyword

Using console.log() method

The console.log() method displays the result in the console of the browser. If there is any
mistake in the code, it generates the error message.

Let's see the simple example to print the result on console.

1. <script>
2. x = 10;
3. 4.3
y =Ignition
15; Locking
4. z = x + y;
If both the license verification and driver face verification processes become successful,
5. console.log(z);
6. the ignition locking iswill
console.log(a);//a notlift off. Failure of either one the verification will result in
intialized
7. </script>

12
 locking the ignition of the engine. To start an engine of a vehicle, the starter motor
requires a spark of electricity. Initiation of ignition locking will block the electric flow

Output:

To open the console on browser, press F12 key.

Figure 4.4 Console Panel

Using debugger keyword

In debugging, generally we set breakpoints to examine each line of code step by step.
There is no requirement to perform this task manually in JavaScript.

JavaScript provides debugger keyword to set the breakpoint through the code itself.
The debugger stops the execution of the program at the position it is applied. Now, we
can start the flow of execution manually. If an exception occurs, the execution will stop
again on that particular line.

1. <script>
2. x = 10;
3. y = 15;
4. z = x + y;
5. debugger;
6. document.write(z);
7. document.write(a);
8. </script>
13
 Figure 4.5 Debugger source file

Setting Break Points:

The console.log() is a good way to debug errors but setting breakpoints is a faster, more
efficient, and better method. In this method, Breakpoints are set in code which stops the
execution of code at that point so that the values of variables can be examined at that
time. Here are some advantages of using Breakpoints over the console.log() method:

 In the console.log() method user has to understand the code and manually put
console.log() at points in the code. But in the breakpoints method, we can set
breakpoints through the Developer tool anywhere in the code without even
knowing it.[8]
 In the console.log() method we have to manually print values of different
variables but at a certain breakpoint, all the values of all variables are displayed
automatically in the Developers tool. Enter the Developers tool section by
pressing F12 key and go to sources. In the source section, select a JavaScript file
and set breakpoints by either selecting from the provided list like DOM

14
breakpoints or Event listener breakpoints which stop the execution of code
whenever an event occurs

Figure 4.6 Menu console

15
Figure 4.7 Output Console

16
 Chapter 5
RESULTS AND DISCUSSIONS

RESULTS AND DISCUSSIONS

Debugging in the browser

Debugging is the process of finding and fixing errors within a script. All modern
browsers and most other environments support debugging tools – a special UI in
developer tools that makes debugging much easier. It also allows to trace the code step
by step to see what exactly is going on.[9]

We’ll be using Chrome here, because it has enough features, most other browsers have a
similar process.

The “Sources” panel

Your Chrome version may look a little bit different, but it still should be obvious what’s
there.

 Open the example page in Chrome.

 Turn on developer tools with F12 (Mac: Cmd+Opt+I).
 Select the Sources panel.

Here’s what you should see if you are doing it for the first time:

Figure 5.1 Source panel

17
The toggler button opens the tab with files.

Let’s click it and select hello.js in the tree view. Here’s what should show up:

Figure 5.2 Tree File system

The Sources panel has 3 parts:

 The File Navigator pane lists HTML, JavaScript, CSS and other files, including
images that are attached to the page. Chrome extensions may appear here too.
 The Code Editor pane shows the source code.
 The JavaScript Debugging pane is for debugging, we’ll explore it soon.
Now you could click the same toggler again to hide the resources list and give the code
some space.

Console

If we press Esc, then a console opens below. We can type commands there and press
Enter to execute.
After a statement is executed, its result is shown below.

For example, here 1+2 results in 3, while the function call hello("debugger") returns
nothing, so the result is undefined:

Figure 5.3 Debugger Console

18
Breakpoints

Let’s examine what’s going on within the code of the example page. In hello.js, click at
line number 4. Yes, right on the 4 digit, not on the code.
Congratulations! You’ve set a breakpoint. Please also click on the number for line 8.

It should look like this (blue is where you should click):

Figure 5.4 Breakpoints

A breakpoint is a point of code where the debugger will automatically pause the
JavaScript execution.
While the code is paused, we can examine current variables, execute commands in the
console etc. In other words, we can debug it.
We can always find a list of breakpoints in the right panel. That’s useful when we have
many breakpoints in various files. It allows us to:
 Quickly jump to the breakpoint in the code (by clicking on it in the right panel).
 Temporarily disable the breakpoint by unchecking it.
 Remove the breakpoint by right-clicking and selecting Remove.
 …And so on.

The command “debugger”

We can also pause the code by using the debugger command in it, like this:
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- the debugger stops here
say(phrase); Figure 5.1: Eye Status

19
Such command works only when the development tools are open, otherwise the browser
ignores it.

Pause and look around

In our example, hello() is called during the page load, so the easiest way to activate the
debugger (after we’ve set the breakpoints) is to reload the page. So let’s press F5
(Windows, Linux) or Cmd+R (Mac).

As the breakpoint is set, the execution pauses at the 4th line:

Figure 5.5 Paused breakpoint

Please open the informational dropdowns to the right (labeled with arrows). They allow
you to examine the current code state:

 Watch – shows current values for any expressions.

You can click the plus + and input an expression. The debugger will show its
value, automatically recalculating it in the process of execution.
 Call Stack – shows the nested calls chain.
At the current moment the debugger is inside hello() call, called by a script in
index.html (no function there, so it’s called “anonymous”).
If you click on a stack item (e.g. “anonymous”), the debugger jumps to the
corresponding code, and all its variables can be examined as well.
 Scope – current variables.
Local shows local function variables. You can also see their values highlighted
right over the source.

20
 Global has global variables (out of any functions).
There’s also this keyword there that we didn’t study yet, but we’ll do that soon.

Tracing the execution

Now it’s time to trace the script.

There are buttons for it at the top of the right panel. Let’s engage them.

– “Resume”: continue the execution, hotkey F8.

Resumes the execution. If there are no additional breakpoints, then the execution just
continues and the debugger loses control.

Here’s what we can see after a click on it:

Figure 5.6 Call Stack

The execution has resumed, reached another breakpoint inside say() and paused there.
Take a look at the “Call Stack” at the right. It has increased by one more call. We’re
inside say() now.

– “Step”: run the next command, hotkey F9.

Run the next statement. If we click it now, alert will be shown.

Clicking this again and again will step through all script statements one by one.

– “Step over”: run the next command, but don’t go into a function, hotkey F10.

21
Similar to the previous “Step” command, but behaves differently if the next statement is
a function call (not a built-in, like alert, but a function of our own).

If we compare them, the “Step” command goes into a nested function call and pauses the
execution at its first line, while “Step over” executes the nested function call invisibly to
us, skipping the function internals.

The execution is then paused immediately after that function call.

That’s good if we’re not interested to see what happens inside the function call.

– “Step into”, hotkey F11.

That’s similar to “Step”, but behaves differently in case of asynchronous function calls.
If you’re only starting to learn JavaScript, then you can ignore the difference, as we don’t
have asynchronous calls yet.

For the future, just note that “Step” command ignores async actions, such as setTimeout
(scheduled function call), that execute later. The “Step into” goes into their code, waiting
for them if necessary. See DevTools manual for more details.

– “Step out”: continue the execution till the end of the current function, hotkey
Shift+F11.

Continue the execution and stop it at the very last line of the current function. That’s
handy when we accidentally entered a nested call using , but it does not interest us, and
we want to continue to its end as soon as possible.

– enable/disable all breakpoints.

That button does not move the execution. Just a mass on/off for breakpoints.

– enable/disable automatic pause in case of an error.

When enabled, if the developer tools is open, an error during the script execution
automatically pauses it. Then we can analyze variables in the debugger to see what went
wrong. So if our script dies with an error, we can open debugger, enable this option and
reload the page to see where it dies and what’s the context at that moment.

22
Logging

To output something to console from our code, there’s console.log function.

For instance, this outputs values from 0 to 4 to console:

// open console to see
for (let i = 0; i < 5; i++) {
console.log("value,", i);
}

Regular users don’t see that output, it is in the console. To see it, either open the Console
panel of developer tools or press Esc while in another panel: that opens the console at the
bottom.

If we have enough logging in our code, then we can see what’s going on from the
records, without the debugger.

Summary

As we can see, there are three main ways to pause a script:

 A breakpoint.
 The debugger statements.
 An error (if dev tools are open and the button is “on”).

When paused, we can debug: examine variables and trace the code to see where the
execution goes wrong.

There are many more options in developer tools than covered here. The full manual is at
https://developers.google.com/web/tools/chrome-devtools.

The information from this chapter is enough to begin debugging, but later, especially if
you do a lot of browser stuff, please go there and look through more advanced
capabilities of developer tools.

Oh, and also you can click at various places of dev tools and just see what’s showing up.
That’s probably the fastest route to learn dev tools. Don’t forget about the right click and
context menus!

23
 Chapter 6
ADVANTAGES, DISADVANTAGES AND
FUTURE SCOPE

ADVANTAGES
• The identification of the bugs at an earlier stage helps in saving the time of the
developers.

• This identification and fixing of bugs also save money in the long run.

• This process of debugging helps in improving the code quality of the software.

• Debugging can result in better code optimization of the software/product.

• This process ensures that the software is working fine as per the expectations and
plans.

DISADVANTAGES
• The process of debugging is time-consuming.

• It can be stressful for developers if they are working hard to find bugs or errors.

• In some cases, Debugging may result in the introduction of new bugs in the
software.

• The process of debugging requires specialized tools, which might not be directly
available in the market.

• Developers might get distracted by debugging from other important tasks such as
implementing a new feature.

FUTURE SCOPE
Overall, we feel that the workshop achieved various goals in terms of research
dissemination and manpower enhancement. From the research point of view, we had
engaging discussions on emerging trends in software debugging. Symbolic execution and

24
constraint solving techniques were found to have an increasing presence in modern-day
debugging methods. The importance of dynamic specification mining to drive testing and
debugging came up several times during the presentations. Last but not the least, the
importance of software repair and workaround generation was emphasized by several
presentations, including the keynote by Zeller. From manpower training point of view,
we note that several PhD students from IISc and other Indian institutions attended the
workshop. Several of them also made brief presentations on their ongoing PhD research
and actively sought feedback from the workshop attendees – not only during their talks,
but also during the coffee breaks, lunches, and through informal conversations. We
believe this is an extremely important component of holding such a workshop.

25
 CONCLUSION

In this study, an innovative method for detecting, preventing, and reporting errors,
mistakes, syntax etc.in the web program has been tested utilizing a Chrome V8. The
JavaScript performance and debugging is ensures that the web program is must perform
its task freely and efficiently. In order to archive that performance of the website or the
web application and keep the program error free and bug free debugging is used.
JavaScript uses different inbuilt debugging methods. In JavaScript console.log() method
is used to debug the program in various browsers. There is debugger keyword is also
used to debug the program. JavaScript also provides breakpoints to debug the web page
or the JavaScript program line by line. All this methods are provided by JavaScript.
Using all this methods and keywords we can debug the whole JavaScript program line by
line to find the bugs errors and make the program more effective, more efficient and fast
in order to provide good service to the end user of the program.

26
 BIBLOGRAPHY

[1] History of JavaScript

Available: https://www.javatpoint.com/javascript-tutorial

[2] Why JavaScript?

Available:https://www.simplilearn.com/tutorials/javascript-tutorial/introduction-to-
javascript#:~:text=JavaScript%20is%20an%20open%2Dsource,to%20implement%20in
%20web%20applications

[3] JavaScript Debugger

Available:https://www.tutorialspoint.com/javascript/
javascript_debugging.htm#:~:text=Use%20a%20JavaScript%20Debugger,control%20the
%20flow%20of%20execution

[4] JavaScript Debugger

Available:https://www.w3schools.com/js/js_debugging.asp#:~:text=JavaScript
%20Debuggers&text=Built%2Din%20debuggers%20can%20be,while%20the%20code
%20is%20executing

[5] Web Review

Available:https://people.apache.org/~jim/NewArchitect/webrevu/2000/10_06/webauthors/
10_06_00_1.html

[6] JavaScript Performance

Available: https://www.geeksforgeeks.org/javascript-performance/

[7] JavaScript Debugger

Available: https://www.javatpoint.com/javascript-debugging

[8] Breakpoints

27
Available: https://www.geeksforgeeks.org/debugging-in-javascript/

[9] Debugging in the browser

Available: https://javascript.info/debugging-chrome

28