Loading the TodoIt code and checking the browser console

For now, our todo-it.ts program only has a log statement: console.log("TodoIt");.

Keep it like that for a minute and compile the file using your preferred approach; you should now have a todo-it.js file available.

Now, open the index.html file and add a script tag inside it, right before the closing </body> tag:<script type="text/javascript" src="todo-it.js"></script>.

This is the classic way to load scripts within a web page. Once this script is in place, refresh the page in your web browser.

Did you notice anything? That's normal—it's all under the hood!

Press F12 in the web browser to open up the developer tools. If you then go to the Console tab, you should see the TodoIt message that we've added in our TypeScript code.

Here's what it looks like in Google Chrome:

We'll discover a bit more about the Chrome Developer Tools throughout the book as we'll be using those as a reference, but note that Mozilla Firefox, Microsoft Edge, and other modern web browsers also offer great developer tools.

From now on, make sure that you have tsc running in watch mode; that way, you'll only have to refresh the page in your web browser to see the results of your changes. And if you have Browsersync (or a similar tool) taking care of live reloading, then you can concentrate on writing TypeScript code and contemplating the updated results.