Welcome to the Treehouse Community
Looking to learn something new?
How do I run and view the result of my code on my computer?
How do I run the code and view the result on the browser, so I can keep track of what I am doing right or wrong?
Emmanuel C10,635 Points
To test random Js stuff I created a folder to hold 2-3 files. One is a basic html file I called index.html with the following code
<!DOCTYPE html> <html> <head> <!--link rel="stylesheet" href="main.css"--> <body> <h1>Testing </h1> </body> <script src="script.js"></script> </html>
The second file is the js file called script.js, and thats where I put anything I want to test. notice how at the bottom of the html it calls the script.js file. In order to view and run it just double click and open the index.html, which should open in your browser.
This way you can test any html, js, and even css you want and use the browser devTools to see any errors or console output. Notice the commented out css link to test css also.
Hope this helps, and good luck.
To anyone else using Visual Studio Code, there's an extension called Live Server by Ritwick Dey. It allows you to view your project in a new tab via a quick development Live Server with live browser reload by opening an HTML file and clicking the Go Live icon on the toolbar.
Jazz Jones8,535 Points
You can add an html page with an external js file (or just add the js in script tags in the html file) and check out the Chrome Dev Tools debugger.
Mark WilkowskeTreehouse Moderator 17,494 Points
Hi Faith, this is basically my workflow here: for each video you can download the Project Files. Open a browser (I use FF or Chrome) and drop in index.html. You can edit index.html and app.js in a text editor like Notepad++. In the browser hit F12 for developer tools. Click Console when you want to experiment from there.
As I watch the videos and hear important stuff then I put down notes in the .js file like: // for in loops - only for Objects. I found that using the console and going slow and doing each activity, not skipping any, was the way to understanding. Hope this helps!
I also wanted to be able to lunch my app from the terminal so, similar to what Dave suggested, I installed node and then used npm to install "http-server" - a package which serves web pages. I find this an easier way to test my web apps locally.
[P.S I learnt about the "http-server" package after viewing the npm course on this platform. ]