To open this tool all one has to do is open the browser menuAll you have to do is open the menu which for chrome are the three dots at the top right corner, proceed to more tools, and head to developer tools.
There are two ways of utilizing this option;
- Console tool;
To type multiple lines of code, create a new snippet which is basically a .js file, and once done, proceed to write all the code you need on the right editor and run it by clicking the enter button at the bottom of the snippet.
2. Running in node.js;
To run your code, from the console, ensure you are located inside the directory containing your .js file, type node followed by the filename example;
3. Running in node.js console;
4. Live server - Vs code Extension;
*live server * is an amazing and very effective tool for developers I dare say one of the best I've ever come across when building web projects because it ensures I don't have to keep reloading web projects. the only point to this is that as much as it works great, it just seems overkill and complicated to run simple code snippets with it.
Basically, all you have to do is;
Install the extension on vs-code (live server),
Create two files, a.html and .js file,
Create the HTML boilerplate( The basic HTML layout) in the HTML file,
Link the two files with the tag
While on the .html file, click on the live server extension at the bottom of your vs code editor or right-click your >HTML file and select the option open with live server to automatically launch the page on the browser.
Go to developer tools and open the console tab if the code in the .js file has console.log outputs.
Write all your code in the .js file from your vs-code and results will be automatically be updated in the console of the developer tools upon saving the file. As previously stated, it's a process and also means you have to run both vs code and the browser concurrently to work. On the bright side, the extension automatically runs the code on save.
Whichever method you choose, they all produce results and my advice would be to select the one that makes you more productive because that's the ultimate goal.
Thank you so much for the time, and patience to go through the entire article and if possible please share it on your social media platforms, show some support by following me on Twitter and if it's not too much trouble please follow me on this platform for better and more insightful articles to come. until then, *Happy coding!