Appearance

Return to top
On this page

VanillaJS

VanillaJS runs using JSDOM.

Version

Running on Node.js v20.0.0

Supported languages

Javascript

Testing framework

Jest

Special reminders and implementation details

js
import { createHeader } from './helloWorld';

describe('helloWorld.ts', () => {
  beforeEach(() => {
    document.documentElement.innerHTML = global.htmlContent;
  });

  test("Should create a h1 with text Hello World!", () => {
    createHeader();

    const header = document.querySelector('h1');

    expect(header.textContent.trim()).toEqual("Hello World!");
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Included libraries

How to debug

Debugging JavaScript code is a crucial skill for any developer. One of the simplest yet effective ways to debug is by using console.log() statements.

Steps to Debug Using Console Logs

  1. Identify the Problem Area Locate the section of your code where you suspect the problem might be.

  2. Insert console.log() Statements Add console.log() statements before and after the suspected problematic code to print out variable values and flow control.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

  5. Analyze the Output Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.

Here’s an example of how to use console.log() for debugging:

javascript
function calculateSum(a, b) {
    console.log("calculateSum called with arguments:", a, b); // Log function call
    let sum = a + b;
    console.log("Sum after addition:", sum); // Log sum calculation
    return sum;
}

let result = calculateSum(5, 10);
console.log("Result of calculateSum:", result); // Log the result
1
2
3
4
5
6
7
8
9