02 - How to test JavaScript in the browser using the browser console.

The important bits

1. Every browser has developer tools where you can run JavaScript in a REPL (Read-Eval-Print-Loop).
2. In Chrome you open that via View->Developer->Developer Tools.
3. You can enter and execute any JavaScript in that window.
4. The console will execute the JS you entered in the context of the page you are on. That means you have access to any variables and files the page has loaded.
5. The console will print the result, and you can inspect the output and any errors.

Exercise - Now you try it

Transcript

0:00 In this episode I will demonstrate how to run and test small snippets of Javascript in the browser console in Chrome. There are two easy ways to pull up the console. The First way is to go to the view menu here than to developer Javascript console.

0:20 The other way is to right, click on any page. Click inspect, and then navigate to the console Tab.

0:28 What we have here is called a rebel that stands for read email print loop. You can find a rebel in almost any programming language is incredibly useful in testing small snippets of Javascript and see how the language works read means that it'll read. Annie Javascript that type typing.

0:54 Email means it'll try to evaluate that code, and then it'll print out the result. So this expression results in undefined It doesn't return anything, and then loop means that loops back to the report. Now if we try to evaluate test, It prints out that the result of tests is hello, so that just read evaluated and printed out, and now we've looked back to the beginning can also use the console here, too. Floor, what functionality is available to us here in the browser window is the name of the global object that has a lot of functionality tied to it. So when a dot alert, when a doppler, let's try when a dot alert

1:36 cause like that's tied to some native browser code

1:40 window dot alert

1:43 Hulu

1:45 that fires a up with the text Hello great.

1:51 It's important to note that window, because it's the global object. It is assumed, which means you don't have to call window dot as a prefix. For all this functionality, just call alert.

2:08 And that worked great. We can also tremor complicated things, like what if you have a bug in a function of years, but you're not really sure how to debug it.

2:23 Here we've defined a what color function where you can pass in a color parameter that will return a string. My color is plus the parameter that you've entered what color green. Because this is a rebel. It'll automatically show the response. My color is green

2:42 and we don't have a space here. Why we had a space we can redefine it

2:48 my colors green. If you have some simple function, some simple code, this can be an easy way to quickly step through it and see what the problems are to see what the output is and fix your problems. You can even use the rebel to try more complicated functionality. One of the Apia is that people often struggle with. Is the fetch A. I say we want to make an Ajax call to Google. Using the fetch a P. I call Fetch and worried done this before, So here here we get a corps air. Maybe Yoda's running in your coding. Likewise is breaking. You can pull this up out here and just isolate this one piece and you can see that there's a course air which is causing this to fail. Let's go to Dot Com.

3:29 Turnaround That from here,

3:31 Okay that returns a promise to see fulfilled of who want a process that the easiest ways to await that promise, So use the await keyword here For now we get the proper response. We get the body which we can process fantastic. The console in the browser can be incredibly useful for testing out small javascript snippets. It can be useful for pulling out isolated pieces of your code when you're not quite sure what his feeling. You'd put the whole function or input something like just this fetch peace in See why is not working. Let me test this piece in isolation. And that really makes things a lot easier. I use the console almost every single day. That's it.

END