Jak wyświetlić wyniki kodu bezpośrednio w edytorze?

W szybkim tempie rozwoju programowania webowego, programiści potrzebują narzędzi, które usprawniają pracę i zwiększają produktywność. Jednym z takich narzędzi, które zdobywają popularność w społeczności JavaScript, są Quokka.js i Console Ninja.

Quokka.js jest żywym notatnikiem, który umożliwia programistom natychmiastowe testowanie kodu i obserwowanie wyników w czasie rzeczywistym. Quokka.js natychmiast dostarcza informacji zwrotnej, wyświetlając wyniki obok kodu.

Użycie narzędzia eliminuje potrzebę stosowania instrukcji console.log lub punktów przerwania. Ta zdolność do oceny kodu w czasie rzeczywistym pozwala na szybkie iterowanie i eksperymentowanie z kodem, co ułatwia wykrywanie błędów i zrozumienie, jak różne części kodu ze sobą współpracują.

Console Ninja - zaawansowane narzędzie, które oferuje szereg zaawansowanych funkcji i technik. Pozwolą Ci one na lepsze zrozumienie i wydajne debugowanie Twojego kodu.

Jedną z najważniejszych funkcji Console Ninja jest możliwość wyświetlania interaktywnych tabel, grafów i diagramów, które pomogą w analizie i wizualizacji danych. Możesz szybko zobaczyć strukturę obiektów, tablic i innych struktur danych w bardziej czytelnej i przejrzystej formie. Ponadto, dzięki możliwości sortowania, filtrowania i grupowania danych, Console Ninja pozwala na szybsze i bardziej precyzyjne badanie i analizę informacji.

Kolejną bardzo rozbudowaną funkcją Console Ninja jest zdolność do śledzenia wywołań funkcji oraz analizowania stosu wywołań. Możesz łatwo sprawdzić, które funkcje są wywoływane w trakcie działania Twojego kodu i jakie są wartości zwracane.

Console Ninja oferuje również możliwość definiowania różnych poziomów logów. Dzięki temu możesz dostosować, które informacje chcesz rejestrować, a które pominąć. Możesz również dodawać własne komunikaty i metadane, aby lepiej zrozumieć kontekst, w którym występują błędy.

Masz dosyć czytania? Obejrzyj ten filmik, w którym Wojtek wytłumaczy Ci to wszystko szybko i prosto.

View this post on Instagram

A post shared by Ragnarson (@ragnarsoncom)

Quokka.js jest przydatna przy prototypowaniu i pracy na jednym pliku. Console Ninja jest dużo bardziej rozbudowanym narzędziem, które działa na całym projekcie. Poniższy przykład obrazuje użycie Console Ninja bezpośrednio w kodzie.

@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
	}
}

Po użyciu Console Ninja w linijce:

console.log({ name, resp: text, method: request.method })

wyświetli nam się kiedy zadanie zostało wykonane i co zostało zwrócone:

[17:11:18.454]
	{ name: 'pimpek', resp: 'Requested name: pimpek', method: 'GET'
}

Jeśli Console Log został wykonany kilka razy, zostają wyświetlone wszystkie wykonania z sygnatura czasową. Po kliknięciu łącza Show in Console Output zyskujemy dostęp do pełnych logów w osobym oknie.

[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'
}

Jeśli użyjesz Console Ninja w swojej konsoli obok logów znajdziesz odniesienia do konkretnych miejsc w kodzie, gdzie Console Log został wykonany.

Kombinacja Quokka.js i Console Ninja pozwala wyelminować czasochłonne czynności i skupić się na rozwiązywaniu problemów. Niezależnie od tego, czy jesteś początkującym programistą czy doświadczonym ekspertem, zastosowanie tych narzędzi przynosi korzyści zarówno podczas tworzenia nowych projektów, jak i podczas analizy i poprawiania istniejącego kodu.