: s p t t h ( We'd like to show you notifications for the latest

news and updates.

NO THANKS ALLOW

How to Fix JavaScript Errors

DON ROCHE | JANUARY 31, 2020 |
DEVELOPER TIPS, TRICKS & RESOURCES (HTTPS://STACKIFY.COM/DEVELOPERS/)
My computer programming teacher had always told me that 10% of
our time is spent developing 90% of our application, and the other
90% of our time finishing the last 10% of our project. Even with a good
project plan and a concept that makes logical sense, most of our time
will be consumed with fixing errors. Moreover, with JavaScript, our
application can run without obvious errors preventing it from being
run, so we have to employ several techniques
(https://stackify.com/javascript-logging-basic-tips/) to make sure
everything is running smoothly.

Understanding both the syntax and how JavaScript works will

eliminate most of our JavaScript errors in our web applications.
Furthermore, there are many online services that can help us catch
them all.

/
 Starting from basic to advanced, here are some methods to fix
: s p t t h ( We'd like to show you notifications for the latest
JavaScript errors in our applications.
news and updates.

NO THANKS ALLOW

Know the Different Types of JavaScript

Errors
We need to know what type of error we’re receiving to know what we
need to do to fix it. Namely, with JavaScript, most of our errors fit into
two categories: syntax errors and runtime errors.

A syntax error is a problem with the grammar in our code. Syntax

errors mostly come in the form of misspelled keywords, missing or
open brackets, or missing parentheses or punctuation. Certainly,
through time, our syntax errors will become fewer as we become
experts in JavaScript, but simple mistakes do happen a lot.

A runtime error prevents our application from actually running.

Sometimes there’s a problem with our logic flow and our program
breaks, like calling strings that aren’t there. Other times, our program
can run but the result isn’t as we planned it. Consequently, runtime
errors can be a bit trickier to fix than syntax errors.

/
 Since we know the two main types of JavaScript errors, we can swiftly
: s p t t h ( We'd like to show you notifications for the latest
move on to fixing them.
news and updates.

NO THANKS ALLOW
When in Doubt, Reload
Sometimes the simplest thing we can do is reload the web page. It’s the
classic IT crowd solution to everything—turn it on and off again. Maybe
we already solved this error and the file hasn’t uploaded yet or some
data was missing. It may also help to delete your browser history and
cache in case your browser is saving a bad version of your website or
application.

Google Chrome sometimes displays an “Aw, Snap!” error when it has

difficulty running our web page. This may or may not be caused by a
JavaScript error—either way, don’t panic and just reload the page.

Then we can move on to checking for JavaScript errors in further detail.

/
 Check If JavaScript Is Turned On
We'd like to show you notifications for the latest
: s p t t h (
news and updates.
We must keep in mind that JavaScript is set differently for each
browser. Furthermore, JavaScript reacts differently depending on each
browser and how each user’s settings NOare set for their
THANKS browsers. For
ALLOW

example, JavaScript has some security holes, and hackers may put
malicious code in some JavaScript; thus, for safety reasons, JavaScript is
often turned off in some browsers. So we must check our browser
settings to see if JavaScript is turned on.

Cross-site scripting (XSS) is one vulnerability in JavaScript that allows

hackers to inject malicious code into legitimate websites. For example,
Twitter was injected by malware called the “StalkDaily” worm. That
doesn’t sound good, does it? Hence, turning JavaScript off avoids
security issues but will obviously cause errors when you’re running an
application with JavaScript.

If you’re not sure, you can quickly check here

(https://www.whatismybrowser.com/detect/is-javascript-enabled) to
see if your browser’s JavaScript is turned on.

Similarly, we can check whether we have a pop-up blocker enabled

that’s preventing parts of our JavaScript from working, such as our use
of alert boxes. We can enable or disable pop-up boxes from either our
browser settings or an add-on that we’re using.

/
: s p t t h ( We'd like to show you notifications for the latest
news and updates.

NO THANKS ALLOW

Now that we’ve covered the basics, let’s move on to some things that
are more advanced.

Use In-Browser Developer Tools

By far the most useful tools at our disposal for fixing JavaScript errors
are the in-browser developer tools. Previously, when I was a young
developer, I would use Firefox separately to browse the web projects
that I was developing. Now I use whichever browser suits my needs at
the moment—Firefox, Chrome, Safari, Microsoft Edge, Opera, or Brave.

In 2019, Firefox and Chrome were the two most popular browsers with
developers.

/
 To get started, just open up your favorite browser with developer tools,
: s p t t h ( We'd like to show you notifications for the latest
then find the developer tools
news in the browser menu. Begin looking at the
and updates.
various elements or console tools to find some errors to fix.
NO THANKS ALLOW
Some developer tools also let us check if our web design is responsive
to mobile devices.

Developer tools are useful for checking JavaScript errors as well as:

Currently loaded HTML and CSS

DOM explorer
Layout
Animations
Memory use
Console logs
Debugger
File list
Source code

And many more, depending on the in-browser developer tool.

Check Cross-Browser Compatibility

/
 As I said before, each browser responds to JavaScript differently. This
: s p t t h ( We'd like to show you notifications for the latest
means that our application
news andmay not be compatible with all browsers,
updates.
and we’ll have errors to fix. Unfortunately, it’s not reasonable to prompt
a pop-up box to encourage users to download. Because of this, we have
NO THANKS ALLOW
to double- and triple-check that our websites are compatible with all
internet browsers.

JavaScript cross-browser compatibility issues usually revolve around

modern core JavaScript features and some libraries that are either
from third parties or native to JavaScript.

So, either download each of the major browsers and individually test
for browser compatibility, or try out a range of different software that
can test cross-browser compatibility.

Browsera (http://www.browsera.com/) is one tool that not only tests for

cross-browser compatibility but also detects JavaScript errors as well.

Use Console.log() to Display Anticipated Results

/
 Console.log() is a function that allows us to display messages in our
: s p t t h ( We'd like to show you notifications for the latest
browser console. Moreover,
news andwe also print strings and other variables so
updates.
we can see their values. This is indeed useful for us to check if our
functions are displaying the desired results.
NO THANKS ALLOW

These types of errors may not stop our applications from running, but
at the same time, they’re functional errors for us to fix.

For example, we can create an event listener that checks if a particular

button is clicked on. When the onClick event is triggered, a message
confirming that our function works appears in our console.

Ideally, we should use these tests only during the development stage of
our web project, and we should remove these console.log() events from
our final product.

document.addEventListener('buttonClick', function (event) {

console.log("Button Clicked!");

}, false);

Likewise, we can use JavaScript alert boxes with a similar method.

document.addEventListener('buttonClick', function (event) {

alert("I am in a box with a " str + "!");

}, false);

In the End

/
 Our basic knowledge of how JavaScript works and some simple coding
: s p t t h ( We'd like to show you notifications for the latest
practices should be enough
news andto fix our JavaScript errors. In addition to
updates.
these skills, we have hundreds of online services to choose from that
can help us catch those trickier errors.
NO THANKS ALLOW

Hopefully, through time, less than 90% of our time will be used up
fixing JavaScript if we use the above methods.

Check out Retrace real user monitoring. (https://stackify.com/retrace-

real-user-monitoring) It can monitor everything about your JavaScript
applications to catch errors and accelerate web performance, including
the following:

Integrate errors and logs

Consolidate alerts and notifications
Customize dashboards
Monitor JavaScript files and functions
Accelerate page load times
Improve user experience
Monitor front-end and back-end code together
Accurately locate and resolve bottlenecks faster

(https://stackify.com/application-performance-

management-solution/)

App Performance Management

(https://stackify.com/application-performance-
management-solution/)

/
: s p t t h ( We'd like to show you notifications for the latest
news and updates.

(https://stackify.com/log-management/)
NO THANKS ALLOW

Centralized Logging (https://stackify.com/log-

management/)

(https://stackify.com/what-is-code-profiling/)

Code Profiling (https://stackify.com/retrace-code-

profiling/)

(https://stackify.com/error-monitoring/)

Error Tracking (https://stackify.com/error-monitoring/)

/
: s p t t h ( We'd like to show you notifications for the latest
news and updates.

(https://stackify.com/application-metrics/)
NO THANKS ALLOW

App & Server Metrics (https://stackify.com/application-

metrics/)

(https://stackify.com/application-

metrics/)

Real User Monitoring (https://stackify.com/retrace-real-

user-monitoring/)

 About the Author  Latest Posts

About Don Roche

This post was written by Don Roche. Don has more than 13 years of
experience in software development, focused on JavaScript, Python, and
blockchain technology. He's also a daily user of audio and media
production software, with teaching qualifications besides.

/
: s p t t
(https://www.linkedin.com/in/donroche/)
h ( We'd like to show you notifications for the latest
news and updates.

Email
NO THANKS ALLOW
Sign Up Today

Search Stackify
 Search

Topics/Keywords
ASP.NET (https://stackify.com/?
Product Updates (https://stackify.com/stackify/)
tag=asp.net,net-core)

.NET Core App Monitoring (https://stackify.com/?

(https://stackify.com/content/net-core/) tag=monitoring,apm)

App Performance Tips (https://stackify.com/?

Java (https://stackify.com/content/java/)
tag=performance,profiler,apm)

Azure Error Handling (https://stackify.com/?

(https://stackify.com/content/azure/) tag=exception,exceptions,error,errors)

AWS
Logging Tips (https://stackify.com/?tag=logs,logging)
(https://stackify.com/content/AWS/)

Cloud (https://stackify.com/?
DevOps (https://stackify.com/content/DevOps/)
tag=cloud,azure,aws)

Popular Posts
How to Troubleshoot IIS Worker Process (w3wp) High CPU Usage

How to Monitor IIS Performance: From the Basics to Advanced IIS Performance Monitoring

SQL Performance Tuning: 7 Practical Tips for Developers

/
 Looking for New Relic Alternatives & Competitors? Learn Why Developers Pick Retrace
: s p t t h ( We'd like to show you notifications for the latest
news and updates.
5 Awesome Retrace Logging & Error Tracking Features

NO THANKS ALLOW

Recent Posts
Top 10
(https://stackify.com/top-10-must-have-vs-code-extensions-for-javascript-developers/)
Must-
have VS
Code Extensions for JavaScript Developers (https://stackify.com/top-10-must-have-vs-code-extensions-for-
javascript-developers/)

How to build a
(https://stackify.com/how-to-build-a-progressive-web-app-using-react/)
progressive web app
using React
(https://stackify.com/how-to-build-a-progressive-web-app-using-react/)

Everything you need to

(https://stackify.com/everything-you-need-to-know-about-net-5-0/)
know about .NET 5.0

(https://stackify.com/everything-you-need-to-know-about-net-5-0/)

Ways to Ensure App

(https://stackify.com/ways-to-ensure-app-security-with-java-features/)
Security With Java
Features
(https://stackify.com/ways-to-ensure-app-security-with-java-features/)

7
(https://stackify.com/7-essential-best-practices-to-follow-when-adopting-a-devops-model/)

Essential Best Practices to Follow When Adopting a DevOps Model (https://stackify.com/7-essential-best-

practices-to-follow-when-adopting-a-devops-model/)

/
: s p t t h ( We'd like to show you notifications for the latest
news and updates.

(/stackify-developer-ebooks/)
NO THANKS ALLOW

(https://stackify.com/guest-blogging-guidelines/)

Get In Touch Products Solutions Resources Company

Contact Us Retrace APM Application What is APM? About Us

(https://stackify.com (https://stackify.com Performance (https://stackify.com (https://stackify.com
us/) application- Management application- News
Request a Demo performance- (https://stackify.com performance- (https://stackify.com
(https://stackify.com management/) application- management/) press/)
request) Prefix (/prefix/) performance- Pricing (/pricing/) Careers
management/)
Start Free Trial Case Studies (https://stackify.com
.NET Monitoring Centralized
(https://stackify.com (/stackify-case- GDPR
(/retrace-apm- Logging
filter/) studies/) (https://stackify.com
dotnet/) (https://stackify.com
  Blog Security
Java Monitoring log-management/)
(https://stackify.com Information
8900 State Line (/retrace-apm- Code Profiling
Documentation (https://stackify.com
Rd #100 java/) (https://stackify.com
(https://docs.stackif security-
Leawood, KS code-profiling/)
information/)
/
 66206 PHP Monitoring Error Tracking Free eBooks Terms &
: s p816-888-5055
t t h ( We'd
(/retrace-apm- like to show you notifications for the latest
(https://stackify.com (https://stackify.com Conditions
(tel:18168885055) php/) news and error-monitoring/)
updates. developer-ebooks/) (https://stackify.com
Node.js Application & Free Webinars conditions/)
Monitoring Server (/stackify- Privacy Policy
NO THANKS ALLOW
(https://www.facebook.com/Stackify/)
(https://twitter.com/Stackify)
(https://www.linkedin.com/company/stackify)
(/retrace-apm- Monitoring webinars/) (https://stackify.com
nodejs/) (https://stackify.com Videos policy/)
(https://www.youtube.com/channel/UCnxYNQDtTr_ZYUnMjeACfCg)
Ruby Monitoring app-monitoring/) (https://www.youtub
(/retrace-apm- Real User Ideas Portal
ruby/) Monitoring (https://ideas.stackif
Python (https://stackify.com _ga=2.150793076.3
Monitoring real-user- 1540781610.15233
(https://stackify.com monitoring/) ROI Calculator
apm-python/) (https://stackify.com
For Developers
Retrace vs New stackify/#roi-
(https://stackify.com
Relic calculator)
application-
(https://stackify.com Support
improvement-for-
relic-alternatives- (https://stackify.com
developers/)
for-developers/)
For DevOps
Retrace vs
(https://stackify.com
Application
application-
Insights
improvement-for-
(https://stackify.com
devops/)
application-
insights-
alternative/)

© 2020 Stackify