Displaying Code Results in Editor: Essential Tools
With the rapid pace of web programming, developers need tools that streamline their work and increase productivity. One such tool gaining popularity in the JavaScript community is Quokka.js and Console Ninja.
Quokka.js is a live notepad that allows developers to test code instantly and see the results in real-time. Quokka.js provides immediate feedback by displaying the results alongside the code.
Using the tool eliminates the need for console.log statements or breakpoints. This real-time code evaluation capability allows you to quickly iterate and experiment with your code, making it easier to detect bugs and understand how different parts of your code work together.
Console Ninja - an advanced tool that offers several advanced features and techniques. These will allow you to better understand and efficiently debug your code.
One of the most essential features of Console Ninja is the ability to display interactive tables, graphs, and diagrams to help you analyze and visualize your data. You can quickly see the structure of objects, tables, and other data structures in a more readable, and transparent form. In addition, with the ability to sort, filter and group data, Console Ninja allows you to examine and analyze information more quickly and accurately.
Another very powerful feature of Console Ninja is its ability to track function calls and analyze the call stack. You can easily see which functions are called while your code is running and what the return values are.
Console Ninja also offers the ability to define different levels of logs. This allows you to customize which information you want to log and which you wish to omit. You can also add custom messages and metadata to better understand the context in which errors occur.
Tired of reading? Watch this video to see how Wojtek makes things quick and easy (available in Polish only).
Quokka.js is useful for prototyping and working on a single file. Console Ninja is a much more powerful tool that works on an entire project. The following example illustrates the use of Console Ninja directly in code.
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
private i = 0
@Get('/')
getHello(): string {
this.i++
console.log("Request number: ${this.i}`)
return this.appService.getHello()
}
@Get('/name/:name')
getName(@Param('name') name: string, @Req() request: Request): string {
const text = `Requested name: [{name}`
console.log({ name, resp: text, method: request.method })
return text
}
}When you use Console Ninja on the line:
console.log({ name, resp: text, method: request.method })
will show us when the task was completed and what was returned:
[17:11:18.454]
{ name: 'pimpek', resp: 'Requested name: pimpek', method: 'GET'
}If the Console Log has been executed several times, all executions with a time signature are displayed. If you click the Show in Console Output link, you gain access to the full logs in a separate window.
[17:11:18.454]
{ name: 'pimpek', resp: 'Requested name: pimpek', method: 'GET'
}
[17:12:14.544]
{ name: 'pimpek', resp: 'Requested name: pimpek', method: 'GET'
}
[17:13:11.754]
{ name: 'pimpek', resp: 'Requested name: pimpek', method: 'GET'
}
If you use Console Ninja in your console, next to the logs, you will find references to specific places in the code where the Console Log was executed.
The combination of Quokka.js and Console Ninja allows you to eliminate time-consuming tasks and focus on solving problems. Whether you are a novice programmer or a seasoned expert, the use of these tools benefits both when creating new projects and when analyzing and improving existing code.