Most programming languages require special actions by programmers to test scripts. One of the options for this is in using an IDE - special programs that compile projects, check syntax, give tips and other. Depending on the IDE level, you can test your script as a standalone or as part of your project.
JavaScript is used primarily in web development, so all modern web browsers support it. They don't provide all the conveniences of a typical IDE, but they have JavaScript interpreters which is quite enough. Thankfully these modules browsers can independently execute any JavaScript code passed to the browser or webpage.
Using a browser to run JavaScript code is the easiest and fastest way to test your own scripts for beginners and those who work with websites' front-end parts. In this regard, they support several options for running JavaScript inside itself. JavaScript can also be run in the online compilers and in specialised IDEs, but the last one can be difficult for novices in JavaScript.
Executing JavaScript with HTML
Link to the script (HTML)
This way can be used in HTML scripts thanks to the script src attribute. To avoid multiple calls to a frequently repeated code fragment, HTML can call (load) JavaScript scripts from third-party resources by link. Accordingly, each time when the page will be loaded, it will automatically request and execute the target script. Many sites use this attribute to request third-party services (captcha, fonts, etc.).
Syntax
<script type='text/javascript' script src="Address">To use this for your scripts, specify the path to it instead of Address. Note, that you must specify the full name of the script and its extension (.js). Also for each script you must create a new tag.
Calling script from the server:
<script type='text/javascript' script src="https://randomsite.site/scripts/myScript.js">;Calling script from local storage:
<script type='text/javascript' src="../Users/User/Scripts/myScript.js"></script>In both cases, the path in src must be replaced with the one that matches your script. In the HTML structure of the web page code, such attributes are usually placed inside the <head> attributes.
Part of the HTML code of the page
Using Javascript scripts from external sources makes sense for regularly repeated actions. But webpages can require unique features or views, so HTML can work with custom JavaScript code placed in the web page structure.
Syntax
<script>
let myVariable;
function Example(){}
</script>In the body of an HTML page, JavaScript code must be added inside the <script> tag, which as a rule is after the <head> and <body>, but still within the <html> tag. The result of executing such code will depend on used JavaScript tricks.
Note that functions wouldn’t be executed automatically, you must manually implement and call them. At the same time, the variables will be automatically initialised when the page is loaded. Also, with JavaScript code, you can change the structure of other parts of the webpage.
Executing JavaScript with browser instruments
Chrome Dev Tools
The Google Chrome browser has a number of built-in tools for working, testing and verifying the functionality of web pages. Most of them, merged into Chrome Dev Tools, and can be invoked by pressing F12 in a Chrome window.
Its utility, called Console, allows you to create code that will interact with the open web page source. But we can also use it on a blank web page to test the functionality of our JavaScript code.
To use Chrome Dev Tools to run your own JavaScript code:
1. Open Google Chrome.
2. Type about:blank into the address bar to open a blank web page.
3. Press F12 to open the Chrome Dev Tools menu.
4. In the top menu, find and click Console.
5. Type or paste your code into the field below and press Enter to execute it.
Firefox Dev Tools
The Mozilla Firefox browser has a special version for developers, but some of the special functionality (like Console) is available in the regular version too. To run own JavaScript in Firefox:
1. Open Firefox and type about:blank into the address bar. Then press Enter.
2. Press F12 to open the developer panel.
3. Click on Console and enter your code in the field below.
4. Press Enter to have the browser execute your JavaScript code.
For security reasons, Mozilla Firefox has blocked text pasting in the Console. To unlock this feature, you must enter allow pasting in the console. But if you use the browser for personal purposes too, it's recommended to return this feature to its original value after testing your code.
To disable pasting in Firefox’s Console:
1. Type about:config in the address bar. In the new window press “Accept the Risk and Continue”.
2. In the Search field enter devtools.selfxss.count to find the required setting.
3. Double click on the line named devtools.selfxss.count Enter the value 0 and press Enter.
Online JavaScript compilers
Another way to check how JavaScript code works is to use online compilers - special code services that are available like regular websites. A significant advantage of online JavaScript compilers is that most of them are free, dont require additional configuration, and are more secure for tests. At the same time, it‘s not recommended to use real credentials and other personal data in code fragments that you are going to test in online compilers.
Some online JavaScript compilers:
1. Programiz – the most simplified compiler: 1 field for entering code, 1 field for outputting results (Console) and “Run” button.
2. PlayCode – dark theme, syntax highlighting, support additional libraries.
3. OneCompiler – code tips, support other development languages, allow downloading the code as a script.