The Most Important Skill You Never Learned

Summary

This video script offers an in-depth guide on debugging for web developers, covering essential techniques from basic to advanced levels. The tutorial begins with understanding error messages and using console logs for simple bugs, then progresses to utilizing the Chrome DevTools for a more sophisticated debugging approach. It explores setting breakpoints, stepping through code, and leveraging the watch tab for monitoring variable values. Additionally, the script delves into using Visual Studio Code for debugging, examining network requests, and analyzing performance with the Lighthouse tab. The aim is to minimize bug-finding time and maximize coding efficiency, ultimately helping developers to master JavaScript and build robust projects.

Takeaways

• 😕 Debugging is a crucial skill often overlooked by developers, which can significantly reduce coding efficiency.
• 🔍 Learning advanced debugging techniques is essential for developers of all skill levels to minimize time spent finding bugs.
• 📚 The video offers a comprehensive guide on debugging, ranging from basic to advanced concepts.
• 💡 Understanding error messages and their locations is the first step in resolving coding issues.
• 👀 The 'Topline message' in an error provides insight into the nature of the error, while the script and line number indicate where it occurred.
• 🔧 Simple bugs can often be fixed by correcting variable names or function calls, as demonstrated in the video.
• 🔦 Console log statements are a basic but effective method for tracking variable values and code execution flow.
• 🛠️ The 'debugger' keyword in JavaScript serves as a built-in tool to pause code execution for inspection.
• 🔄 Step functions like 'step over', 'step in', and 'step out' are vital for navigating through code execution during debugging.
• 🔗 Breakpoints can be set in the code to pause execution at specific points, aiding in the investigation of complex issues.
• 🌐 The video also covers the use of Chrome's Developer Tools for advanced debugging, including the Network, Performance, and Application tabs.

Q & A

Why is learning to debug properly considered an important skill for developers?

Learning to debug properly is considered an important skill for developers because it allows them to minimize the time spent finding and fixing bugs, thus enabling them to spend more time writing code, which is often considered more enjoyable.

What is the first step a beginner should take when debugging code?

The first step a beginner should take when debugging code is to understand how to use the tools provided for debugging, such as utilizing console log statements to figure out what is happening inside the code and examining the error messages for clues about the problem.

What information does the 'uncaught reference error' provide about the code?

The 'uncaught reference error' indicates that a variable or function is being referenced in the code but has not been defined. It also provides additional information such as the specific line number in the script file where the error occurred.

How can console log statements assist in debugging?

Console log statements can assist in debugging by providing insights into the values of variables at different points in the code. They help developers track the execution flow and determine if variables contain the expected values, thus identifying where things might be going wrong.

What is the purpose of the 'debugger' keyword in JavaScript?

The 'debugger' keyword in JavaScript is used to pause the execution of the code at that point. It allows developers to inspect the call stack, scope, and variables at that particular moment, making it easier to understand the code's behavior and identify bugs.

What are the different functions of the buttons available in the debugger tool?

The buttons in the debugger tool allow developers to control the execution of the code. They can 'Resume' to continue execution, 'Step Over' to move to the next line, 'Step In' to go into a function call, 'Step Out' to exit the current function, and 'Step' to move through the code in execution order, which is particularly useful for asynchronous code.

How can breakpoints be used to debug code in the Chrome Developer Tools?

Breakpoints can be set at specific lines in the code to pause execution at those points. This allows developers to inspect the state of the application, including variable values and the call stack, to understand the flow and identify issues. Breakpoints can be set manually by clicking on the line number or by using the 'debugger' keyword.

What is the significance of the 'call stack' in debugging?

The 'call stack' in debugging shows the sequence of function calls up to the current point in the execution of the program. It helps developers understand the order in which functions are being called and the scope of variables at each level, which can be crucial for tracking down bugs related to function calls.

How can event listener breakpoints be used to debug event handling code?

Event listener breakpoints allow developers to pause execution whenever a specific event occurs. This is useful for debugging event handling code where it may be unclear which part of the code is being triggered by an event. By setting an event listener breakpoint, the debugger will pause at the exact line where the event is being handled.

What is the advantage of using the 'watch' tab in the debugger?

The 'watch' tab in the debugger allows developers to monitor the value of a specific variable or expression throughout the code execution. This can be particularly useful for tracking changes to a variable within a large function or for evaluating more complex expressions that involve multiple variables.

How can Visual Studio Code be used for debugging instead of the Chrome Developer Tools?

Visual Studio Code can be used for debugging by setting up a debugging configuration that launches the application in a browser and attaches the debugger. This allows developers to take advantage of the full code editor environment, set breakpoints, inspect variables, and step through the code, all within Visual Studio Code.

What is the purpose of the 'Network' tab in the Chrome Developer Tools?

The 'Network' tab in the Chrome Developer Tools allows developers to monitor and analyze the network activity of the page. It shows all the resources fetched, their types, sizes, timing, and other details. This is useful for debugging issues related to resource loading, such as slow-loading resources or failed requests.

What kind of performance issues can be identified using the 'Performance' tab in Chrome Developer Tools?

The 'Performance' tab in Chrome Developer Tools can be used to record and analyze the runtime performance of a page. It can help identify long-running scripts, layout thrashing, jank, and other performance bottlenecks by providing a detailed breakdown of the time taken for various processes and events during page load and interaction.

How can the 'Application' tab be used to debug issues related to storage and data?

The 'Application' tab in Chrome Developer Tools provides access to various storage and data interfaces used by the page, such as Local Storage, Session Storage, Cookies, and IndexedDB. Developers can use this tab to view, modify, and debug the data stored in these interfaces, which can be helpful for troubleshooting issues related to data persistence and state management.

What insights can the 'Lighthouse' tab provide for improving website performance and quality?

The 'Lighthouse' tab in Chrome Developer Tools runs a series of audits to provide insights and suggestions for improving the performance, accessibility, SEO, and best practices of a website. It generates a report with a score for each category and highlights specific issues and opportunities for optimization.

Outlines

00:00

🐛 The Essentials of Debugging in Coding

The paragraph introduces the importance of debugging in software development, emphasizing it as a critical skill often overlooked by developers. It highlights the goal of the video to provide a comprehensive guide on debugging, ranging from basic to advanced techniques. The speaker, Kyle, aims to teach viewers how to efficiently find and fix bugs, thus spending more time on the enjoyable aspect of coding. The paragraph also mentions the structure of the video, including timestamps for different skill levels and a basic example of a debugging scenario involving a simple function with an error.

05:02

🔍 Understanding and Utilizing Debugging Tools

This section delves into the basics of debugging by demonstrating how to use built-in tools to identify and solve code problems. It explains the process of reading error messages, pinpointing the location of errors within the code, and understanding the significance of the error details provided. The paragraph walks through a practical example where a typo in a function call is corrected using these debugging techniques. It also touches on the challenge of debugging when no error message is displayed, illustrating how to use 'console.log' statements to track and understand the flow and values within the code.

10:02

🛠️ Advanced Debugging with the Debugger Keyword

The paragraph discusses the use of the 'debugger' keyword in JavaScript as a tool for advanced debugging. It explains how inserting the keyword into the code allows the program to pause its execution, providing an opportunity to inspect variable values and code execution. The speaker demonstrates the functionality of the debugger in Chrome's developer tools, showcasing features like 'step over', 'step in', and 'step out' which help navigate through the code line by line or into functions. Additionally, the difference between 'step' and 'step into' is clarified in the context of asynchronous code, and the paragraph concludes with a brief mention of other capabilities of the Chrome debugger.

15:04

📌 Mastering Breakpoints and Call Stacks

This section focuses on the advanced use of breakpoints and call stacks in debugging. Breakpoints can be set to pause execution at a specific line of code, and the paragraph explains different methods to set them, including using the Chrome debugger interface or clicking on the line number in the code. It also covers 'XHR fetch breakpoints' and 'event listener breakpoints', which allow developers to pause execution at specific events or fetch requests. The call stack is introduced as a tool to view the order of function calls and understand the scope of variables at each level. The paragraph concludes with a discussion on the practicality of breakpoints for identifying the source of errors and navigating complex code structures.

20:06

🌐 Exploring DOM and Global Breakpoints

The paragraph discusses various types of breakpoints related to DOM manipulation and global events. It explains how to set breakpoints for node removal, attribute modification, and subtree modifications within the DOM. The concept of 'Global listeners' and 'CSP violation breakpoints' is introduced, which allow developers to monitor and pause execution on specific global events or content security policy violations. The speaker also demonstrates how to use these breakpoints in practice by adding a class to an element and appending a child to the body, showing how the debugger pauses at the exact line where the change occurs.

25:07

🔧 Debugging with Watch Expressions and Visual Studio Code

This section introduces the 'Watch' tab in the debugger, which allows developers to monitor the value of a variable or a custom JavaScript expression throughout the code execution. The speaker then transitions to demonstrating how to use Visual Studio Code (VS Code) for a more integrated debugging experience. The paragraph explains how to set up a debugging configuration in VS Code to run a web application in Chrome, and it highlights the benefits of using VS Code for debugging, such as the ability to add breakpoints, watch variables, and view the call stack without leaving the editor. The paragraph also covers advanced breakpoint features in VS Code, such as conditional breakpoints and log points.

30:07

📡 Utilizing Network, Performance, and Other Chrome Developer Tools

The final paragraph covers additional features of the Chrome Developer Tools, starting with the 'Network' tab, which provides insights into all the resources fetched during page loading. The speaker explains how to use this tab to monitor network activity, disable cache, and throttle network speed to simulate different network conditions. The 'Performance' tab is also briefly introduced as a tool for profiling and identifying performance bottlenecks. The paragraph concludes with a mention of the 'Application' tab for inspecting and modifying storage and the 'Lighthouse' tab for auditing page performance, SEO, and accessibility, emphasizing the comprehensive nature of these tools for debugging and optimizing web applications.

Keywords

💡Debugging

Debugging is the process of finding and resolving bugs or defects in code. It is a fundamental skill for developers, as depicted in the video, where the presenter emphasizes its importance regardless of one's skill level. The video's theme revolves around teaching various debugging techniques, from basic to advanced, to minimize the time spent on finding bugs and maximize the time for writing code.

💡Error Messages

Error messages are notifications provided by programming environments that indicate something has gone wrong. In the context of the video, error messages are crucial for debugging as they provide information about what went wrong and where it occurred. An example from the script is the 'uncaught reference error' which helps identify that a variable is not defined.

💡Console Log

Console log is a tool used in debugging that outputs information to the browser's JavaScript console. It helps developers understand the flow of execution and the values of variables at different points in the code. The video script illustrates its use when the presenter adds 'console.log' statements to track the value of variables and determine the flow of execution within functions.

💡Debugger

The 'debugger' is a keyword in JavaScript that, when encountered during code execution, pauses the execution and allows the developer to inspect the call stack, scope, and variables. The video demonstrates the use of 'debugger' to pause code at a specific point and examine the state of the application, which is essential for understanding and fixing complex issues.

💡Breakpoints

Breakpoints are markers in the code that tell the debugger to pause execution at that point. They are used to halt the program at a specific line for inspection. The video explains how to set breakpoints in the Chrome debugger and in Visual Studio Code, and how they can be used to pause the execution of the program for further analysis.

💡Call Stack

The call stack is a data structure that tracks function calls in chronological order. It helps developers understand the order in which functions are called and is vital for debugging nested function calls. The video script describes how the call stack can be used to navigate through the different levels of function calls and inspect the scope of variables at each level.

💡Event Listener Breakpoints

Event listener breakpoints are a type of breakpoint that pauses code execution when a specific event occurs, such as a mouse click or key press. The video mentions how these breakpoints can be useful for debugging event-driven code, allowing developers to inspect the state of the application at the moment the event is triggered.

💡DOM Breakpoints

DOM breakpoints allow developers to set breakpoints on specific changes to the Document Object Model (DOM), such as when an element is added, removed, or modified. The script describes how these breakpoints can be used to pause execution when changes occur to the DOM, which is helpful for debugging dynamic web applications where the UI updates in response to user interactions.

💡Conditional Breakpoints

Conditional breakpoints are a type of breakpoint that only triggers when a specific condition is met. They are useful for complex applications where you want to pause execution under certain circumstances. The video script explains how to set a conditional breakpoint based on the value of a variable, allowing for more targeted debugging.

💡Watch Tab

The watch tab is a feature in debuggers that allows developers to keep an eye on the values of specific variables or expressions. It helps in tracking changes to variable values throughout the code execution. The video demonstrates how to use the watch tab to monitor variable values, which can be particularly useful when dealing with complex logic or when a variable's value is hard to trace.

💡Network Tab

The network tab in developer tools shows all the network requests made by the page, including their timing, headers, and responses. It is instrumental for debugging issues related to fetching resources. The video script discusses how the network tab can be used to monitor and analyze network requests, which is essential for understanding performance bottlenecks or issues with external resources.

💡Performance Tab

The performance tab in developer tools allows developers to record and analyze the runtime performance of a page. It provides insights into where bottlenecks may occur during page load or execution. The video briefly touches on how this tab can be used to profile the performance of web applications and identify slow or inefficient processes.

💡Lighthouse Tab

The Lighthouse tab is a tool within Chrome DevTools that analyzes web pages and provides feedback on performance, accessibility, SEO, and more. It's a valuable debugging tool for auditing the overall quality of web pages. The video script mentions how Lighthouse can be used to identify and fix various issues, helping developers improve the quality of their web applications.

Highlights

Debugging is a crucial skill often overlooked by developers, which can significantly reduce coding time and increase efficiency.

The video provides a comprehensive guide on debugging from basics to advanced techniques.

Understanding error messages and their locations is fundamental for effective debugging.

Simple typos or reference errors can be quickly identified and resolved by examining the error message details.

The importance of using console log statements to track variable values and code execution flow.

Advanced debugging involves using the 'debugger' keyword to pause code execution for inspection.

The video demonstrates how to use the 'step over', 'step in', and 'step out' functions for detailed code inspection.

The difference between 'step into' and 'step' functions, especially in asynchronous code scenarios.

Utilizing breakpoints to pause code execution at specific points without modifying the code with 'debugger' statements.

The 'call stack' feature helps in understanding the order of function calls and variable scopes.

Breakpoints can be set on specific events, such as 'fetch' requests or DOM modifications, for targeted debugging.

The 'watch' tab allows developers to monitor variable values and expressions in real-time.

Integrating Chrome's debugging capabilities into Visual Studio Code (VS Code) for a more integrated development experience.

VS Code supports conditional breakpoints, log points, and triggered breakpoints for advanced debugging scenarios.

The 'Network' tab in Chrome is essential for monitoring and debugging network requests and responses.

The 'Performance' tab provides insights into the runtime performance of web applications.

The 'Application' tab helps in debugging and manipulating data stored in local storage, session storage, cookies, and IndexedDB.

Lighthouse tab offers a comprehensive analysis of web page performance, SEO, and accessibility.

Transcripts

the most frustrating part about coding

hands down is trying to find and fix

bugs in your code this is why learning

how to debug properly is an incredibly

important skill that most developers

completely skip over and it doesn't

matter what skill level you're currently

at learning how to properly debug using

Advanced Techniques is incredibly

important so in this crash course video

I'm going to teach you everything you

need to know about debugging from the

absolute Basics all the way to the most

advanced concepts you need to understand

in order to make sure that you can

minimize the amount of time you spend

finding bugs so you can spend more of

your time writing code which we all know

is way more

fun welcome back to web dev simplified

my name is Kyle and my job is to

simplify the web for you so you can

start building your dream project sooner

now since I'm going to be covering

everything from beginner to Advan

Concepts in this video I want to put

time stamps in the description so you

can jump around to the exact skill level

you're currently at now if you're an

absolute beginner when it comes to

debugging the first important thing to

understand is how you can actually use

the tools that are given to you to debug

bug certain problems that come up in

your code for example in this code I

have some really simple stuff going on I

have a function called print name takes

in a first name and a last name and it

just combines together the first name

and the last name and down here if I

just pass in for example Kyle and I pass

in cook that should print out Kyle cook

but when I save you can see we're

getting an error immediately uncaught

reference error fit name is not defined

and it gives me some other information

after that now we'll get that in just a

second I want to finish understanding

what the rest of the code does this next

function is called print end times all

it does is you pass in how many times

you want to print something and the

thing that you want to print and it

should print that thing that many times

so as you can see down here I'm calling

that pass it in in five and the value

high so it should print out high five

separate times and then finally I just

have a simple event listener on my

document so every time I click on it it

should print out clicked super

straightforward but for now you can see

we have this error so immediately when

you get an error like this the most

important thing to look at is going to

be this Topline message right here which

tells you what the error is in our case

it's an uncaught reference error and

here's a little bit more information on

What that particular reference error is

and then the next most important thing

to look at is going to be this section

right here which tells you exactly in

your code where this happened so in our

case it's saying this happened in our

script.js file on line two so if we go

into this file and we go down to line

two you can see this is where the error

is occurring now without any more

information it's kind of hard for us to

tell what's going on but if we look at

this uncaught reference there it says

fit name is not defined so that means

this fit name variable is not defined

but is trying to be used in this

particular case all I did is I

misspelled first name as fit name so if

I were to actually fix this by properly

spelling first name and I give it a save

you can see immediately that fixes that

particular error that we had so I bring

this back the most important thing to

look at anytime you get an error message

is going to be where that error message

occurred so this gives you the exact

line number and also looking at exactly

what the error message tells you is

happening also if that isn't enough

information it'll also give you more

information on exactly where it's called

if it's nested inside like seven

different functions so if you call like

print age then call Print name and then

call something something else after that

it'll tell you the exact order of all

these events in this section down here

in our case we're calling just one

function so that's why you can see it

has one line here for our function and

then one line for our main script file

and that's all that's happening as you

can see this is saying on line 17 which

as you can see is essentially where

we're calling that function and if we

had more nesting we would have more

entries inside of this telling us

exactly the order of all that nesting so

that gives you a high level information

of what to look for now let's go back

and fix that error again and we'll

notice we have another bug but this one

doesn't actually show us an error and

these are by far the hardest to actually

debug because usually an error message

is good at telling you what's wrong but

if you don't get an error message it

means something's wrong with your code

most likely because of how you wrote it

so in our case here Kyle Cook is

printing out exactly like we expected to

but right here we're calling print n

times and it should print out the value

high five separate times but instead

it's printing out five five separate

times so clearly there's something going

on inside of our code now in our

particular case it's really easy to read

this function cuz it's only three lines

and figure out what the problem is in

our case you can see here that I'm

console loing n instead of console

logging our value if I were to swap this

out with value and I give it a save you

can now see it prints out high five

times instead of n five times so this

one was pretty easy to figure out just

by looking at exactly what's going on

but a lot of times your functions are

going to be more complicated maybe you

have a 100 lines of code you're trying

to read through with a bunch of

different if statements and variables

being created concatenated changed and

so on so it's hard to keep track of

exactly what the particular value of all

your different variable is throughout

the entire essentially function that's

running so instead what you can do is

you can put in console log statements to

try to figure out what's going on inside

your code so for example let's bring

this back to the broken code that we had

before and what I could do is I could

say you know what for some reason it's

printing out five I wonder if my value

is proper so I could say console.log and

I could say

value and I could print out my value so

now hopefully I can see if my value is

being passed in properly as you can see

here my value is high so at least I know

that is working and this is going to be

the most basic way of debugging a

problem we're going to get to more

Advanced versions later in the video so

you can see okay my value is obviously

correct so now I'm going to move on into

my function to make sure that that is

working properly so I can come inside of

here to see okay is my value High here

as you can see it's printing out High

every single time so my value is still

high and at that point I'm most likely

going to realize oh I just forgot to

change n to Value so that's where my

problem is I'm going to change this to

value and boom there's my problem

nothing else to worry about rather

straightforward so if you have a

relatively simple bug or maybe a simpler

function that you're having a hard time

debugging just by reading it and looking

at it throwing in a couple console log

statements or other type of console

statements in there to try to figure out

exactly what's going on with your

different variables is really important

this is also great if you have a lot of

if statements for example that are doing

certain logic inside of them it's really

great to put a console log inside of

these because you can see okay did I hit

this a lot of times I'll just put

console log here and if I see that in my

log okay I know that my code has made it

to this point and then what I do is I

take that console log and I move it down

a little bit further in my code and I

say okay am I getting to this point in

my code and I save and I say okay it's

printing out here so I'm getting to this

point so I'll maybe move it down a

little further and be like okay I'm

still getting to this point in my code

this is a great way to figure out how

far your code is actually getting at a

rather simple situation I use this all

the time when I'm doing really simple

debugging so using console log

statements to figure out where your code

is actually executing as well as

figuring out what the values of your

variables are is a great way to do

really simple debugging but obviously if

you get to more complicated problems

this console log system is not really

the best option because it really

clutters up your console and it can be

difficult to actually debug more

complicated problems and that's where it

comes in to start using an actual proper

debugger now this is something that's

really cool I'm going to show you

exactly what this does all you do is

anywhere inside of your code just type

in the word debugger just like that you

can see it turned blue because this is a

JavaScript keyword and now when I save

and rerun my code immediately I'll

expand this so it's a little bit easier

to see you can see I get this huge

section on the right hand side here if

you're inside of Chrome for the dev

tools you can see it opens up this

sources Tab and the sources tab shows

you exactly all your JavaScript code so

this is all the JavaScript code that

I've written over here on the left you

can see it's repeated on the right here

it's paused my code exactly on this

debugger line so I can see the value of

every variable I have for example I can

see the value of N I can see the value

of my value variable I can hover over

things inside of the code and it tells

me the exact value of those variables

and the really nice thing is you can see

right here I have these buttons that

allow me to actually do different things

with my code so this very first button

right here all it does is just resume

execution it essentially unpauses my

code and it'll run all the way until I

reach the next debugger statement or

until my program is done so if I click

this you can see nothing at all happens

my code just runs perfectly fine and

prints out everything just like it did

before now let's rerun our code by

Saving to get back to this point the

next thing that I have is going to be

called step over then we have step in

and we have step out these are kind of

really important things to look at so by

using step in it essentially allows me

to step into whatever thing I'm calling

it's going to be a function usually so

if I click on step in it's going to step

in to the thing that I'm doing so if I

keep clicking step in you can see it's

constantly stepping into what I have

right here I'm not actually running any

functions so there's not really anything

that's happening when I do step in but

if I were to move my debugger statement

I'm just going to expand this so I can

show you what I'm talking about I'm

going to move it right here before I

call these functions now if I move over

to here and I just resume my script you

can see we're now stuck at this debugger

statement if I use this step over

function what it does is it steps over

this function it does not actually step

into the function instead the next time

it pauses is going to be my next line of

code so you can see it pauses right here

for my next line of code while if I

click step into that's going to go into

the function and pause on the very first

line so you can see I click step into

and now I'm on the very first line of

that function and it's going to be

executing that code now you can see I

have quite a bit of stuff going on

inside here I would have to click this

step into function a lot of times to get

all the way through this whole Loop and

this whole function that's where the

step out function comes in if I click on

this it's just going to take me

essentially to the very next line after

that function is called this is a really

great way to be stepping into code and

as soon as you get to the point where

you're like okay I don't care anymore

about this function click step out and

it's going to bring you to the very next

line directly after that function is

called now the final option that we have

for these buttons is going to be this

button just called step and this works

almost identical to the step into

function but it works slightly

differently when you're dealing with

asynchronous code so let's go ahead and

actually change our code slightly to

show you what I'm talking about I'm just

going to go in here and I'm going to add

a set

timeout there we go this set timeout is

going to last 1 second and we'll just

say console. log time there we go super

straightforward stuff that's going on

here I have my debugger directly above

it so if I just resume and rerun my code

you can see I'm at that debugger right

there now if I use the step into

function my code is actually going to

wait when I'm on this set timeout it's

going to wait a full second and then

it's going to put my debugger directly

inside that set timeout because it's now

trying to step into that asynchronous

set timeout code so if I use step into

it's going to wait and then step into

that set timeout function now if I

resume and refresh my code back at that

breakpoint and I use the step function

instead that's going to go in the normal

chronological order so my set timeout is

not done yet so if I click this you can

see it's going to print name click it

again and it's stepping into my print

name function let's step out of that

here we're on print end times we can

step over and so on so the only

difference between these two is how it

works with asynchronous code if you use

step it's going to just execute in the

normal execution order while if you step

into your code's going to wait for that

asynchronous code to finish before it

jumps inside of it to look at that code

this this is a fairly Niche thing that

you don't have to worry about too much

but it's nice to know the difference

between the two now that's the basics of

using this debugger command but there's

a lot of other stuff you can do with the

Chrome debugger and we're going to later

show you how you can actually do this

directly in vs code which is my

preferred way to do more advanced

debugging setups but as you can see here

on this left hand panel besides all

these buttons that I have at the top

this last button here just disables all

the break points that I have we don't

really have to worry about that too much

but as you can see here I have this

breakpoint section so for example I can

pause on any uncaught exception this is

a really powerful thing if you have

certain errors in your code but you're

not really sure where they're happening

for example if I were to spell first

name incorrectly again and I Sav my code

I'm going to get rid of this debugger

statement and just refresh our code to

exactly what we had before give it a

quick save and you notice since I have

pause on uncaught exception checked that

means anytime I have an error in my code

that I don't explicitly handle it's

going to stop my code execution right

where that error is show me what the

error is show me the line where the

error code the exact place where the

error occurred this is a really easy way

to track down specific error messages

that you have and you can see inside

this section that has the scope that

tells me all the different variables

that I have you can see I have my first

name my last name my entire Global scope

here which doesn't really matter too

much as well as all the information on

the actual error that is occurring tons

of really useful information inside of

there so I love having this checked

pretty much anytime that I'm working

inside a code where I have errors that

are happening and I'm not really sure

where they're coming from now there's

also an additional checkbox for pause on

cot exceptions this essentially just

means anytime you properly handle an

error with like a a try catch statement

or a catch for a promise then it's going

to also pause your execution in those

scenarios I recommend generally not

turning this on because it's going to

give you so many false positives of

errors that are properly handled by

things like Library code you use and so

on that it's just overwhelming with

errors and stuff that's pausing that you

don't actually care about and doesn't

usually help you with your debugging

code but I do recommend keeping pause on

uncut exception on in many cases because

it makes it easy to find where there's

errors inside of your code now if I just

continue the execution of my code make

this a little bit larger so it's easier

to see everything you can see the next

section is this call stack now all the

call stack is is just going to show you

all the functions that are currently

being called in the order that they are

called in so in our particular code

let's modify it a little bit so we have

a function called Main and inside that

function that's called main we're going

to call Print name and maybe inside of

here we're also going to call another

function so we're going to say function

test just like that and inside this

function we're going to call Print n

times we're going to print out two times

the text of by sure and in here will

call test as well so we have all these

different functions in this particular

order so I'm going to give that a quick

save and what I want to do is I want to

load up my debugger inside my print end

times so I'm just going to come in here

debugger just like that give it a quick

save and now we'll move over here now in

my particular code I'm calling this

function twice I'm calling it once right

here and once inside test so it can be

kind of hard to tell which particular

scenario I've run into where have I

actually called this code that's where

the call Stat comes in you can see here

it has print end times and then if I

click the next level it is anonymous and

it actually shows me the exact line of

code where this has been called now the

reason this is labeled as Anonymous is

just because it's something that's in

the main portion of my file as you can

see on my actual code it's just at the

top level of my file so it's essentially

inside of an anonymous function you'll

also see this anytime you use functions

that don't have names so most of the

time you're going to see those with

arrow functions now if we continue our

execution to the next time that print

end times is going to be called you'll

see that our script actually finished

that's cuz I should make sure that I

call Main that it actually works so now

here we're on our first time we called

it if I click next you can now see that

it's throwing an error on first name so

let me fix that first there we go so now

I can continue the execution we're

inside of the print name the first time

now we're inside print name the second

time or print end time sorry and you can

see here our call stack is much larger

we have our print end times function we

have our test function so if I bring

this down a little bit and click you can

see we're inside that test function

right here if I click on Main you can

see that this is where we called it

inside of our main function and if I

click Anonymous you can see that that's

where we called our main function

so being able to go through the call

stack level by level is really great CU

not only can you tell where you've

actually called this function but also

it'll tell you the exact scoping of all

your different variables at each level

of the call stack so inside my test

function this is all the different scope

that I have inside main you can see I

have a separate level of scope inside my

Anonymous another level of scope and

inside print end times another level of

scope it tells me exactly what each of

the different variables are inside of

every single section which is really

nice now if we can continue on from here

the next thing I'm going to be talking

about are break points as you can see

every single one of these categories is

breakpoints the most simple form of

breakpoint actually falls under this

breakpoints category and that's because

anywhere in your code you can add a

breakpoint and to do that inside of the

Chrome debugger all you do is just click

on the line number what that's going to

do is add a breakpoint so let's say I

want to add a breakpoint right here on

line number nine you can see in this

breakpoint section it's telling me the

exact script file where this is what the

line is and what the code is and now I

can even remove this debugger statement

completely give this a save and I can

move around exactly where my breakpoint

is going to be so it's on that four

statement and you can see essentially

when I run my code it's going to stop

right where I specified this particular

breakpoint so again if I save my code

you can see it stopping right there so

this is a really easy way to actually be

able to put a breakpoint directly in

your code and stop where you want to

without adding the debugger statement

into your source code this is really

great if you have code you can't easily

change for example you're on a

production version of your site and you

want to test a particular problem why

it's happening you want to debug it

adding in these different break points

is a really great way to do that another

nice thing about breakpoints is you can

really easily disable them or you can

completely remove them by clicking on

the line number again now let's just let

our code finish out and we'll talk about

this xhr fetch breakpoints essentially

this works anytime that you have a fetch

request inside your code that's fetching

out to another URL for example anytime I

have example.com inside of a URL it's

going to break inside of that fetch

statement for me this is a great way to

be able to say hey you know what I know

I'm fetching a particular URL I don't

know where the code is for that fetch

statement but I want to add a breakpoint

so that anytime I make a fetch statement

to example.com it's going to put a

breakpoint directly inside that fetch

statement it's a really handy way to do

that for now we're just going to remove

that cuz we don't have any fetch

statements another thing you can see

here I'm going to skip a little bit down

is the event listener breakpoints as you

can see I can go through and I can do

any particular event that I want I can

actually make sure I do exactly what I

want for example in my mouse I can say

anytime I have a click event listener I

want to actually pause inside that click

event listener whenever I do the click

so if I open up my Google Chrome and I

just click inside of here immediately in

my debugger you can see it's gone inside

of that document. add event listener

this is my click event listener and it

stopped on the very first line and

that's how these event listener break

points work you can essentially say

anytime a particular event occurs I want

to break inside the exact code that's

listening for that event which is a

great way to be like you know what I

think something's happening on Mouse

click but I don't know which particular

event it is or where the event is in my

code I can just come in here and say you

know what every single click event in my

code it's going to throw a breakpoint

directly into them for me automatically

and we can close out of that let our

code continue on and we can look at this

Dom breakpoints section this Dom

breakpoints is actually something you

set inside the elements tab here so for

example inside of my body I could write

click this and I can come to the section

for adding a breakpoint where it says

break on and there's three options

there's going to be node removal so

essentially when this thing is removed

attribute modification for example if I

change the class name if I change other

things like the title element or I

change the actual attribute for like a

data set property and then finally we

have subtree modification that means we

added children modified the children

removed children Essen changed anything

inside the element so we can actually do

a breakpoint on these different things

which is great to say you know what I

want to do something whenever this

particular element is removed and now

anywhere in my code as soon as this

element is removed it's going to pause

me on the exact line of code that

removed that element or if I wanted to

have a breakpoint that's happening

anytime things are modified it's going

to pause directly anytime I try to

modify this body so we can actually see

that really easily I can come into my

code

document.body do

classlist do add and I'm just going to

add the class of High super

straightforward and simple and since we

have inside of here that we're breaking

on that attribute modification and the

subre modification we actually can make

this a little bit easier by just

appending a child so we can just say

we'll just append the text High to the

very end here inside of our body you can

see that's being appended right there

and to make sure that we're able to link

this up properly let's just move that

inside of our click event listener so

inside of our click event listener we're

going to pending directly into our body

element so now what we can do is we can

open up our Chrome browser and I can

just click inside of here and you can

see immediately my code has paused and

gone to the exact line where I changed

my body and you can see paused on sube

modification for me appending something

into that body element this is a really

cool thing that I absolutely love about

debugging inside of Chrome or Firefox or

any other debugger is it makes it really

easy to check when things are changing

inside of the Dom so let's just let that

code finish out as you can see here all

of our different Dom breakpoints are

being listed the next thing we have is

going to be Global listeners we don't

really have to worry too much about what

these Global listeners are but these are

ESS enally listeners that are set up on

the window object or other Global

objects I can actually see this a little

bit more in action if I just come in

here and I add an event listener on my

window so we'll just add a resize event

listener for example doesn't even matter

what the code inside of here does now

you can see we have that resize event

listener and I can click on it and

brings me to the exact line where that

is so it's an easy way to see things

that are happening on the exact Global

scope then finally we have this CSP

violation breakpoints now this one is a

little bit interesting it stands for

Content security policy and essentially

if you have a Content security policy

set up for your site this is going to be

able to detect the errors that are being

thrown and you can actually break on

those particular errors inside your code

to see exactly what lines they are I

don't have any content security policy

set up for this it's something that

you're going to see a lot more in like

larger sites and larger teams so for the

most part you probably don't need to

worry about this particular option but

the other options inside here are all

incredibly useful now the final thing I

want to talk about with this particular

page of the Chrome debugger is the watch

tab so right next to scope we have this

watch Tab and inside here I can click

the plus button and just typee in any

variable name that I want for example I

can type in first name just like that

and now what's going to happen I'll just

move my camera out of the way real quick

you can see that essentially it's going

to give me the value of the first name

variable anywhere inside of my code

wherever I am so if I put a debugger

statement for example inside of here

there we go got a debugger come over to

here and I refresh my code you can see

make sure I get rid of that pause on COD

exception that first name right here if

I hover over this is set to Kyle because

inside this code first name is Kyle now

this watch section I don't use super

often but it's really useful if you want

to kind of track a variable through an

entire set of code like maybe you have a

really large function and you have one

variable that's changing a lot this is a

great way to write out what that

variable is but you don't have to just

write out a single variable for example

I can write out my own JavaScript

expressions for example first name and

last name combined together and you can

see it's printing out Kyle Cook as the

value for that particular code so this

is a really great way if you want to

have more complicated things where you

check the value of certain variables or

check like certain if statement values

things like that are really good for

this watch section but I generally find

myself I don't use it too much because I

can just use this scoping section to get

all the exact same information now I'm

going to come back to this chrome

debugger in a little bit because I want

to talk about some of the other tabs

like the network tab which is incredibly

useful but I also want to show you how

you can actually take all these powers

that you have in the Chrome debugger and

get them directly inside a visual studio

code I'm going to completely exit out of

that we're going to open up full screen

for visual studio code and I want to

show you how you can debug everything

directly inside of here which is a much

nicer debugging experience because you

have your full code editor work with and

all the code is showing up directly

inside of here so the very first thing

that we need to do is we need to go to

this tab right here called run and debug

it should be the option essentially

almost at the very bottom so if we open

up run and debug you can see I have this

run and debug Command right here and I

want to click on that and for my

particular use case I'm using Chrome so

I'm going to click web app in Chrome

because I'm creating a web application

for Chrome if you're doing node.js

choose node.js and so on and you can

even create your own custom scripts but

in our case this is going to do pretty

much all the work for us now the first

thing you need to put inside of here is

the URL for where your actual site is

running now in my particular case I'm

using an extension called live server

this live server sension just

essentially lets me host HTML files so I

can open them up and actually view them

and it works on Port 5,500 so here I'm

going to change Local Host to Local Host

5500 just like that and now it's going

to listen for that 5500 port and then

all you need to do once you have that

done is just go to that tab you can now

see I have this play button right here

I'm going to click that play button you

can see on my screen it's actually

opened up this chrome window right here

and you can see at the top I have this

little bar that I can use to pause I can

step over step into step out of all

those same things that we're used to and

I can even restart my program from the

beginning and then I can end this if I

want to now this is really great because

I can go into my script for example and

I can add in a debugger

statement oops debugger just like that

if I can spell properly there we go give

that a quick save and now immediately it

has paused me on that line because my

program automatically restarts when I

save that's part of live server and on

the left hand side it's a little bit

small font unfortunately I'll zoom in a

little bit so it might be slightly

easier to see but you can see here I

have all of my scoping all my different

variables my Global scoping everything

that I could possibly want to see about

everything I have a watch section where

I could for example watch particular

variable names when I can even do

expressions for example I can just copy

this expression paste it into here and

now you can see I get the combination of

first name and last name I get the

entire call stack showing up right here

and I can jump to the exact lines where

all those different things are being

called if I minimize these values down a

little bit you can see I have my whoops

not my call stack my loaded scripts

these are all the different scripts that

are being currently loaded you can see I

have all my break points with the exact

same checkboxes and if I wanted to add a

breakpoint all you need to do is just

click off to the side here you can see

this little red dot is going to appear

off to the side just click on that and

boom now we have a break point being

added and we even have our event

listener break points this is all pretty

much identical to what we had when we

were working inside of chrome I'm going

to move my camera back to the corner

just to keep it out of the way so you

don't have to actually see it and what

we can do a little bit fancier here than

some of the other stuff that we could do

in Chrome is if I just let this continue

all the way through is we can actually

add in fancy or debug breakpoints for

example I can do a breakpoint like this

and if I restart my program boom it's

going to be right on that line pretty

self-explanatory but I can also put in

slightly more customized break points

for example if I right click on this you

can see I add a normal break point I can

add a conditional breakpoint a log point

which essentially just log something out

in my console and then I have a

triggered breakpoint which does

something based on when other break

points happen

so for example let me add in a

conditional break point and I can just

say when I is equal to 2 so now this

breako is only going to occur when I is

equal to the value of two and if I

restart my program and I check the value

of I at this breakpoint you can see it

is two and if I click to go to the next

one the next one there is no next one

because I'm only calling this function

one particular time and actually I am

calling this function twice you can see

I'm calling print name with five print

name with two but when I call it with

two I never actually reaches the value

of two it only reaches the value of 0

and one and never gets the value of two

which is why this break point is never

hit a second time now you will notice

one downside that it appears at first is

that I can't see what my console output

is but if I open up this section here

that has your terminal you can go to the

debug console and boom I get the exact

same console output that I get inside of

chrome but since I'm using my debugger

nvs code I have that exact same

information I can jump to the line

numbers of where all this stuff is

occurring so I get the exact same output

that I would get inside of chrome but

now I'm getting it directly inside of vs

code which is really great for debugging

now I'm going to minimize that just so

it's not taking up a bunch of screen

space and I want to show you what that

log Point looks like if I just come in

here I can just say that I want to log

the value of I for example and now it's

going to log me the value of I every

single time this runs so if I do a

refresh and I just expand past this open

up the debug console you can see it's

printing out I a bunch of times

obviously I want this to print out the

value of I so if I just put it in

Brackets like this it'll actually use

the variable itself so now if I refresh

this and I make sure that I move that

debugger to the correct point so I'm

going to just remove this one I'm going

to put on this line in particular so I'm

going to just remove the break point

that we have here add in a log Point

logging out the value of I inside of

here and now if I just let this continue

all the way through you can see it's

printing out zero one up here it's

printing out all the way up to four it's

essentially just counting all the way up

for me I'm going to be honest I don't

use this particularly often just because

I can throw in a console log statement

relatively easily but this is nice if

you need to add in a particular thing

inside your code to log something

without mudding it up with a bunch of

console log statements so now I want to

talk about this triggered breakpoint

section so again I'm going to minimize

this so what I'm going to do real quick

inside of my code to demo this is I'm

going to add an if statement if n is

greater than three then I just want to

console log big doesn't really matter

what I'm doing here I'm going to add a

breakpoint on that line now you notice

this breakpoints hollowed out

essentially it's saying that this is

unverified my file has been modified I

need to restart my debugging session so

if I just save this and I make sure I

restart it'll make sure that that actual

debug statement works properly now here

I'm going to add a triggered breakpoint

I'm going to say I want to wait for a

particular break point I want to wait

for the break point on this particular

line script line 8 and I'm going to

click okay so now this line of code will

wait for this particular break point to

be hit before it actually runs this

breakpoint here so if I restart you can

see this breakpoint has been hit which

means I'm also hitting my breakpoint

here all of that is working perfectly

fine now I'm going to remove both of

these break points just so I can get my

code back to a state that I had before

and now what I'm going to do is I'm

going to change this to be greater than

30 this is never going to get hit so I'm

going to add this break point in I'm

going to add a conditional or not

conditional I'm sorry I'm going to add a

weit for breakpoint here for that

particular line click okay and now if I

restart my code you'll notice that I'm

never hitting this breakpoint and that's

because I never have an n greater than

30 which means this breakpoint never

actually executes and since this

breakpoint never executes it never

executes this breakpoint down here now

this is a rather Niche thing that you

may want to use but it's really nice

where if you have an if statement then

you only want to check for certain

things happening if that if statement

evaluates to true or if certain code

runs this is a great way to make sure

you stop your execution of your program

only if certain prerequisites are met

inside of your code this is essentially

also how those triggered breakpoints

work if we were to edit this and do a

hit count for example like only do this

when I've hit this a certain amount of

times so like for example two I have to

hit this breakpoint twice before it

actually finishes or based on when a

certain expression evaluates the true we

kind of already looked at that as well

so these are really great ways to only

breako on certain particular situations

now pretty much the only thing that you

may notice that is slightly different

inside VSS code versus Chrome is I can't

add a debugger state on fetch statements

but that's actually something I can do

there's just no UI for it so if I hit

control shift p and I search for fetch

you can see I have edit add and remove

for a fetch breakpoint if I click on

that I can type in a URL and any URL

that I fetch that is contained inside

here for example if I did example.com

and I hit enter that's going to

essentially set up a particular fetch

breakpoint for anytime I fetch

example.com so you have all that

functionality that's built into Chrome

directly built into vs code and this is

my preferred way to debug especially on

larger projects now the final thing that

I want to talk about is going to be a

few more tabs inside of chrome so let's

just open up that Chrome debugger that

we had

before there we go got that open I'm

just going to remove all these different

break points I don't actually need all

these break points so let's just make

sure we get rid of all of

these there we go just so we don't have

weird break points showing up so and

we're going to go to the network tab

here this is probably the next most

powerful tab after the console the

sources Tab and the elements tab because

this allows you to see exactly what's

being fetched every single time you

actually fetch from your page so what we

can do I'm just going to put this off to

one side and on the other side I'm going

to have my document so I'm going to

bring up my network tab make it as large

as possible and in my sources section

I'm just going to make sure I remove all

break points I'm going to click this to

remove all the break points this

essentially just disables all my break

points so now we're on the network Tab

and you can see inside of here when I

refresh my page it shows me everything

that's fetched so I'm going to clear

this click refresh and now you can see

exactly every single thing on my page

that is being fetched this is really

simple for me I have an HTML page I have

a script page and since I'm using live

server there's a wed so connection so

when I save a file it automatically

refreshes also you can see here I get

this like waterfall that shows me

exactly what's going on how long every

single request takes and so on I get all

the different headers response timings

previews and so on which is really

important to debug exactly what's

happening for certain things now it can

be hard to narrow down exactly what you

need because large sites are going to be

downloading hundreds and hundreds of

different files which is why you can

come in here and do only fetch request

for example or only things that are

documents maybe you only want to check

things that are CSS JS fonts images so

on media you know you can pretty much

click around here to get exactly what

you want to be narrowing down your

search too also if I just do a refresh

again on this you can search for certain

things so if I go back to all and I

search for

script.js you can see essentially it's

giving me only the things that match

that script.js now unfortunately this

isn't being super accurate right now

with the actual things that are being

showing up inside of this when I like

for example search for script.js there's

just a little bit of bugginess going on

inside here I think it's because of how

zoomed in I have my browser and other

stuff that's going on but normally these

different elements for index HTML and

websocket those actually wouldn't show

up now another really great thing about

this tab that I absolutely love we just

bring it back to essentially normal is

we have the ability to disable and

enable in caching I recommend having

disable cache always checked when you're

doing this that way you can really test

everything at the most optimal state to

make sure you don't have any caching

problems giving you issues it's going to

make sure it always fetches everything

for you also you can throttle to make

your page slower for example fast 3G if

I were to refresh it's not going to take

much longer to actually download all the

different files that I need my page is

relatively small I mean it's almost

completely empty but still if you had a

larger page you can see that this is

going to drastically slow things down

for those different testing purposes now

the next tab I want to take a look at

real quickly is the performance tab I'm

not going to go super in-depth into

everything inside of here but

essentially the main thing is you just

want to click this record button right

here this is going to start profiling do

whatever you want to do click some

buttons whatever it is I'm just going to

do a full refresh my page doesn't really

matter and then you just click stop and

what's going to happen is it's going to

break down exactly how long every single

step of your entire process took for

every single thing that happened so this

is a great way for you to be like okay

what are the different things that are

slowing me down for example scripting

was by far the slowest thing in my

application obviously in my particular

application there's almost nothing going

on so that's why there's pretty much no

values showing up inside of here but if

you had a more complicated application

you can look at okay how long is certain

things like the Dom content loaded event

happening how long does it take for on

load how long does each frame take to

load like how long is every single

function inside of my thing taking it

gives you a bunch of different

information I get like a call tree and

show on it's really really useful for

the most part though I don't mess with

this page too much unless I have

particular performance issues and I'm

having a hard time figuring out exactly

where they are this can give you some

Clues to look into the right places now

the next few tabs I want to talk about

this application tab this one's really

useful for figuring out what values you

have in local storage for example maybe

things inside a session storage and

inside of your cookies it's a great way

to kind of debug that information even

the index DB you can look at all that

stuff you can change things delete

things for example I can add a new value

inside of here if I wanted to it really

doesn't matter it's really great to be

able to just kind of go in and figure

out okay what's happening inside of all

this information the final thing I want

to kind of talk about is this Lighthouse

tab this is a really great tab for just

being able to check different

performance categories so I can like

toggle on performance best practice SEO

whatever I want to toggle click analyze

page load and that's going to go through

it's going to load up my page and a

bunch of different things and it's going

to tell me hey what were the slowest

things to load what are things that are

within acceptable parameters where are

some accessibility things that I could

fix and so on it's just going to give me

a bunch of information on different

things that I could fix inside of my

site now it takes a little while to run

and for my particular site we're pretty

much going to get no useful information

just because my site is completely blank

and has nothing on it but if you have a

larger site it's going to really help

you with seeing what the different

problems inside of your site are and

this is a really great way so for

example if you have like a lot of images

that are taking a long time to load it's

going to let you know about that and

other things for example on my page you

can see this page doesn't have anything

on it it literally says right here

there's nothing on your page so

obviously there's nothing to actually

talk about but if your page had more

information it would give you a score

between 0 and 100 telling you how good

you were at these things and then it's

going to give you a bunch of different

warnings and errors down here for the

the exact things that you're missing

inside of it that you can fix and that

is literally everything you need to know

about debugging if you enjoyed this

video I highly recommend checking out my

JavaScript simplified course because I

take complicated JavaScript Concepts

like this and simplify them down into

ways that are really easy to understand

no matter what skill level you're at so

if you want to really Master JavaScript

and be able to build projects on your

own I highly recommend checking out that

course I'll link it down in the

description for you with that said thank

you very much for watching and have a

good day