(upbeat music)
- Browser developer tools also include
the JavaScript console for debugging.
While you want any call to actions to be visible
and eye-catching, you'll also want to make sure
that your website visitors have a way to close the modal
if they're not interested.
There's currently some JavaScript
targeting the X icon to close it,
but it's not working right now.
Let's use the JavaScript console to figure out why.
So open your dev tools.
And if you have it in the default view
showing the HTML and CSS,
you can either press Escape to open the console
as a panel at the bottom of the other panels.
I prefer a dedicated view, press Escape, again, to close it
and select the console tab up here to get a dedicated view.
You can also use the view menu to get directly
to this console view.
Under developer, Javascript console
or use keyboard shortcuts shown on the right.
This console is often used for logging
and outputting diagnostic info.
For example,
we can see that there's an error message already
just to give us a little info about what is wrong
with our JavaScript program for closing this modal.
If I don't understand what the error message means,
I usually just copy and paste the phrase into a search.
Surely someone else has had the problem before.
I like checking out stack overflow for answers.
It's a popular program or QA site.
It's generally a good resource
because users can upvote or downvote the answers.
So, you can reasonably rely on it to be correct.
Plus, there are usually discussions around the answer
which help to provide context and further understanding.
But let's say you're unable to figure out the error message.
How can you tell if it's the click that's not working?
Or maybe something else.
Let's go back and look at the program.
Scroll all the way to the bottom
to see the JavaScript program for the close.
So here's the click function,
in this statement right here closes the box.
So right now we can't tell
if it's the click that's not working
or if it's the display none that's not working.
We can use this method called console log,
to isolate this issue.
This method will output whatever argument you pass into it
and log it into the console.
So let's add it within the function.
I'm going to put it just above the display none statement.
Whatever argument you pass into the log,
it will be outputted as a message
into the browser JavaScript console.
So I just like to say a little message like, it works!
Or anything that you'd like to indicate that it works.
By adding this console log right after the click function,
I can isolate the issue.
If the click works, then it'll move on to the next line
and log my message into the browser.
If the click doesn't work,
then it won't be able to get to the next line.
So let's save this file and refresh the page in the browser
and test the click again.
Okay, now we know that it's the click that's not working,
because we were unable to get to the next line,
which the console log
and it did not log its message in here.
So now we know we can go back to the code
and take a closer look at the click.
So checking out this click function right here,
the syntax looks correct
but this close object right here is being pulled in
from this variable.
So, let me take a closer look at this one.
When using this query selector method,
it's looking for an element called close,
which doesn't exist.
We actually need a close ID shown right here.
So, to correctly target the ID of close,
we need to add in the number sign.
So let's update that and test again back into the browser.
Refreshed page.
As you can see, the error message is gone.
So, we've most likely fixed it
but let's just click on the button again to double check.
There is my console log message,
the modal has closed,
we fixed the problem.
Just don't forget to delete the console log test
after you're finished testing.
Using the console log to output values
or messages is useful
but there's more you can do with the dev tools
to test larger programs or more specific scenarios.
(upbeat music)