{"id":42439,"date":"2022-03-29T12:49:21","date_gmt":"2022-03-29T10:49:21","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=42439&#038;preview=true&#038;preview_id=42439"},"modified":"2023-05-22T14:14:07","modified_gmt":"2023-05-22T12:14:07","slug":"debug-node","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/","title":{"rendered":"Zo debug je node.js code met behulp van verschillende tools"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-node-js\/\">Node.js is een JavaScript runtime<\/a> die is gebaseerd op dezelfde V8 engine die wordt gebruikt in de Chrome browser van Google. Het wordt vaak gebruikt om cross-platform server-side en terminal applicaties te bouwen.\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-apps\/\">Node.js is de afgelopen tien jaar steeds populairder geworden<\/a>, omdat het <a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-installeren\/\">eenvoudig te installeren<\/a> is, eenvoudig gebruikt kan worden, snel is en omdat het webontwikkelaars aan de clientzijde in staat stelt <a href=\"https:\/\/kinsta.com\/nl\/blog\/node-js-developer-salaris\/\">hun vaardigheden elders te\u00a0gebruiken<\/a>.<\/p>\n<p>Softwareontwikkeling blijft echter een complexe taak, en je Node.js code zal op een gegeven moment falen. Deze tutorial toont verschillende tools om applicaties te helpen debuggen en de oorzaak van een probleem te vinden.<\/p>\n<p>Laten we meteen van start gaan.<\/p>\n<h3>Bekijk onze videogids over het <a href=\"https:\/\/www.youtube.com\/watch?v=Kz8EB9Lhul8\">debuggen van Node.js code<\/a><\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=Kz8EB9Lhul8\"><\/kinsta-video>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/deno.land\/\">Deno<\/a>\u00a0is een alternatieve JavaScript runtime. Het is vergelijkbaar met Node.js, maar nieuwer, en bevat oplossingen voor een aantal tekortkomingen die Node.js heeft. De onderstaande tools en informatie kunnen vaak worden toegepast op zowel Deno applicaties als Node.js.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Overzicht debugging<\/h2>\n<p>&#8220;Debugging&#8221; is de naam die wordt gegeven aan de verschillende manieren om softwaredefecten te verhelpen. Het verhelpen van een bug is vaak eenvoudig. Het vinden van de oorzaak van de bug kan aanzienlijk complexer zijn en zorgt vaak voor meerdere uren aan hoofdpijn.<\/p>\n<p>De volgende secties beschrijven drie algemene soorten fouten die je tegenkomt.<\/p>\n<h3>Syntax fouten<\/h3>\n<p>Je code volgt niet de regels van de taal, bijvoorbeeld wanneer je een haakje achterwege laat of een statement zoals <code>console.lag(x)<\/code> verkeerd spelt.<\/p>\n<p>Een goede code-editor kan helpen bij het opsporen van veelvoorkomende problemen door:<\/p>\n<ul>\n<li>Kleurcodering geldige of ongeldige statements<\/li>\n<li>Checken van variabeletypes<\/li>\n<li>Automatisch aanvullen functies en namen van variabelen<\/li>\n<li>Highlighten van overeenkomende haakjes<\/li>\n<li>Codeblokken automatisch laten inspringen<\/li>\n<li>Detecteren onbereikbare code<\/li>\n<li>Refactoring van rommelige functies<\/li>\n<\/ul>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/gratis-html-editors\/\">Gratis editors<\/a> als <a href=\"https:\/\/code.visualstudio.com\/\">VS Code<\/a> en <a href=\"https:\/\/atom.io\/\">Atoms<\/a> bieden prima ondersteuning voor Node.js, JavaScript en TypeScript (wat transpileert naar JavaScript). Basic problemen met de syntax kunnen meestal worden gespot voordat je je code opslaat en test.<\/p>\n<p>Een code linter zoals\u00a0<a href=\"https:\/\/eslint.org\/\">ESLint<\/a> zal daarnaast syntaxfouten, slechte inspringing en niet-gedeclarede variabelen rapporteren. ESLint is een Node.js tool die je globaal kan installeren met:<\/p>\n<pre><code class=\"language-bash\">npm i eslint -g<\/code><\/pre>\n<p>Je kan JavaScript bestanden controleren vanaf de command line met:<\/p>\n<pre><code class=\"language-bash\">eslint mycode.js<\/code><\/pre>\n<p>&#8230;maar het is gemakkelijker om een editor plugin te gebruiken, zoals <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\">ESLint voor VS Code<\/a>\u00a0of\u00a0<a href=\"https:\/\/atom.io\/packages\/linter-eslint\">linter-eslint voor Atom<\/a>, die automatisch code valideren terwijl je typt:<\/p>\n<figure id=\"attachment_115102\" aria-describedby=\"caption-attachment-115102\" style=\"width: 913px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115102 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/eslint-vscode.png\" alt=\"ESlint in VS Code\" width=\"913\" height=\"564\"><figcaption id=\"caption-attachment-115102\" class=\"wp-caption-text\">ESlint in VS Code.<\/figcaption><\/figure>\n<h3>Fouten in de logica<\/h3>\n<p>Je code werkt, maar niet zoals je had verwacht. Een gebruiker wordt bijvoorbeeld niet uitgelogd wanneer hij daarom vraagt; een rapport toont onjuiste cijfers; gegevens worden niet volledig opgeslagen in een database; etc.<\/p>\n<p>Logicafouten kunnen worden veroorzaakt door:<\/p>\n<ul>\n<li>Het gebruik van de verkeerde variabele<\/li>\n<li>Onjuiste conditions, bijv. <code>if (a &gt; 5)<\/code> in plaats van if <code>if (a &lt; 5)<\/code><\/li>\n<li>Berekeningen die geen rekening houden met de voorrang van de operator, bijvoorbeeld <code>1+2*3<\/code> resulteert in 7 in plaats van 9.<\/li>\n<\/ul>\n\n<h3>Runtime (of executie) fouten<\/h3>\n<p>Een fout wordt pas duidelijk wanneer de applicatie wordt uitgevoerd, wat vaak leidt tot een crash. Runtime fouten kunnen worden veroorzaakt door:<\/p>\n<ul>\n<li>Het delen door een variabele die op nul is ingesteld<\/li>\n<li>Een poging om toegang te krijgen tot een array-item dat niet bestaat<\/li>\n<li>Het proberen om te schrijven naar een alleen-lezen bestand<\/li>\n<\/ul>\n<p>Logica en runtime fouten zijn moeilijker te herkennen, hoewel de volgende ontwikkelingstechnieken kunnen helpen:<\/p>\n<ol>\n<li><strong>Gebruik Test-Driven Development: <\/strong>TTD moedigt je aan om tests te schrijven voordat een functie wordt ontwikkeld, bijvoorbeeld X wordt teruggegeven van function Y wanneer Z wordt doorgegeven als een parameter. Deze tests worden uitgevoerd tijdens de initi\u00eble ontwikkeling en daaropvolgende updates om ervoor te zorgen dat de code blijft werken zoals verwacht.<\/li>\n<li><strong>Gebruik een Issue Tracking System:<\/strong> Er is niets erger dan een e-mail waarin staat &#8220;Je software werkt niet&#8221;! Met Issue Tracking Systems kan je specifieke problemen vastleggen, reproductiestappen documenteren, prioriteiten bepalen, developers toewijzen en de voortgang van oplossingen bijhouden.<\/li>\n<li><strong>Gebruik Source Control:<\/strong> Een Source Control System <a href=\"https:\/\/kinsta.com\/nl\/blog\/git-vs-github\/\">zoals Git<\/a> zal je helpen bij het backuppen van code, het beheren van revisies en het identificeren waar een bug zijn oorsprong had. Online repositories, waaronder\u00a0<a href=\"https:\/\/kinsta.com\/blog\/what-is-github\/\">Github<\/a> en\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>,\u00a0bieden gratis ruimte en tools voor kleinere of open-source projecten.<\/li>\n<\/ol>\n<p>Je zal nog steeds Node.js bugs tegenkomen, maar de volgende secties beschrijven manieren om die ongrijpbare fout te lokaliseren.<\/p>\n<h2>De juiste Node.js omgevingsvariabelen instellen<\/h2>\n<p>Omgevingsvariabelen (environment variables) die zijn ingesteld in het host-besturingssysteem kunnen Node.js applicatie- en module-instellingen beheren. De meest voorkomende is <code>NODE_ENV<\/code>, die meestal wordt ingesteld op ontwikkelingsomgevingen bij het debuggen of op productie bij het uitvoeren op een live server. Stel omgevingsvariabelen in op macOS of Linux met het <a href=\"https:\/\/kinsta.com\/nl\/blog\/linux-opdrachten\/\">commando<\/a>:<\/p>\n<pre><code class=\"language-js\">NODE_ENV=development<\/code><\/pre>\n<p>of bij de (klassieke) Windows opdrachtprompt:<\/p>\n<pre><code class=\"language-js\">set NODE_ENV=development<\/code><\/pre>\n<p>of Windows Powershell:<\/p>\n<pre><code class=\"language-js\">$env:NODE_ENV=\"development\"<\/code><\/pre>\n<p>In het populaire\u00a0<a href=\"http:\/\/expressjs.com\/\">Express.js framework<\/a> schakelt het instellen van NODE_ENV op development het cachen van templates uit en zorgt het voor de output van uitgebreide foutmeldingen, wat nuttig kan zijn bij het debuggen. Andere modules kunnen vergelijkbare features bieden en je kunt een NODE_ENV-voorwaarde toevoegen aan uw toepassingen, bijv.<\/p>\n<pre><code class=\"language-js\">\/\/ running in development mode?\nconst devMode = (process.env.NODE_ENV !== 'production');\n\nif (devMode) {\n  console.log('application is running in development mode');\n}\n<\/code><\/pre>\n<p>Je kan ook de <a href=\"https:\/\/nodejs.org\/api\/util.html#utildebuglogsection-callback\">util.debuglog<\/a> methode van\u00a0Node\u00a0gebruiken om foutmeldingen voorwaardelijk uit te voeren, bijv.<\/p>\n<pre><code class=\"language-js\">import { debuglog } from 'util';\nconst myappDebug = debuglog('myapp');\nmyappDebug('log something');\n<\/code><\/pre>\n<p>Deze applicatie zal het logbericht alleen outputten wanneer NODE_DEBUG is ingesteld op myapp of een wildcard zoals * of my*.<\/p>\n<h2>Node.js commandline opties gebruiken<\/h2>\n<p>Node scripts worden meestal gestart met node gevolgd door de naam van het entry script:<\/p>\n<pre><code class=\"language-js\">node app.js<\/code><\/pre>\n<p>Je kan ook <a href=\"https:\/\/nodejs.org\/api\/cli.html\">command line opties<\/a> instellen om verschillende runtime-aspecten te besturen. Handige flags voor het debuggen zijn:<\/p>\n<ul>\n<li><code>--check<\/code><br \/>\ncheckt syntax script zonder uit te voeren<\/li>\n<li><code>--trace-warnings<\/code><br \/>\noutput een stack trace wanneer JavaScript Promises niet resolven of rejecten<\/li>\n<li><code>--enable-source-maps<\/code><br \/>\nlaat source maps zien bij gebruik van een transpiler zoals TypeScript<\/li>\n<li><code>--throw-deprecation<\/code><br \/>\nwaarschuwen wanneer verouderde Node.js functies worden gebruikt<\/li>\n<li><code>--redirect-warnings=file<\/code><br \/>\noutput waarschuwing naar een bestand in plaats van stderr<\/li>\n<li><code>--trace-exit<\/code><br \/>\noutput een stack trace wanneer <code>process.exit()<\/code> wordt gecalld.<\/li>\n<\/ul>\n<h2>Output berichten naar de console<\/h2>\n<p>Het uitvoeren van een consolebericht is een van de eenvoudigste manieren om een Node.js\u00a0 applicatie te debuggen:<\/p>\n<pre><code class=\"language-js\">console.log(`someVariable: ${ someVariable }`);<\/code><\/pre>\n<p>Weinig ontwikkelaars weten dat er veel andere console methoden zijn:<\/p>\n<div class=\"responsive-table\">\n<table>\n<thead>\n<tr>\n<th>Console methode<\/th>\n<th>Beschrijving<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>.log(msg)<\/code><\/td>\n<td>standaard console bericht<\/td>\n<\/tr>\n<tr>\n<td><code>.log('%j', obj)<\/code><\/td>\n<td>output object als een compacte JSON string<\/td>\n<\/tr>\n<tr>\n<td><code>.dir(obj, opt)<\/code><\/td>\n<td>pretty-print object properties<\/td>\n<\/tr>\n<tr>\n<td><code>.table(obj)<\/code><\/td>\n<td>output arrays en objecten in tabelvorm<\/td>\n<\/tr>\n<tr>\n<td><code>.error(msg)<\/code><\/td>\n<td>een error bericht<\/td>\n<\/tr>\n<tr>\n<td><code>.count(label)<\/code><\/td>\n<td>increment een named counter en output<\/td>\n<\/tr>\n<tr>\n<td><code>.countReset(label)<\/code><\/td>\n<td>reset een named counter<\/td>\n<\/tr>\n<tr>\n<td><code>.group(label)<\/code><\/td>\n<td>een groep berichten laten inspringen<\/td>\n<\/tr>\n<tr>\n<td><code>.groupEnd(label)<\/code><\/td>\n<td>een groep terminaten<\/td>\n<\/tr>\n<tr>\n<td><code>.time(label)<\/code><\/td>\n<td>start een named timer<\/td>\n<\/tr>\n<tr>\n<td><code>.timeLog(label)<\/code><\/td>\n<td>meldt de verstreken tijd<\/td>\n<\/tr>\n<tr>\n<td><code>.timeEnd(label)<\/code><\/td>\n<td>stopt een named timer<\/td>\n<\/tr>\n<tr>\n<td><code>.trace()<\/code><\/td>\n<td>output een stack trace (een lijst van alle gemaakte functie calls)<\/td>\n<\/tr>\n<tr>\n<td><code>.clear()<\/code><\/td>\n<td>wist de console<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><code>console.log()<\/code> accepteert ook een lijst met door komma&#8217;s gescheiden waarden:<\/p>\n<pre><code class=\"language-js\">let x = 123;\nconsole.log('x:', x);\n\/\/ x: 123\n<\/code><\/pre>\n<p>\u2026hoewel ES6 destructuring vergelijkbare output biedt met minder inspanning:<\/p>\n<pre><code class=\"language-js\">console.log({ x });\n\/\/ { x: 123 }\n<\/code><\/pre>\n<p>Het <strong>console.dir()<\/strong> commando pretty-print object properties op dezelfde manier als <a href=\"https:\/\/nodejs.org\/api\/util.html#utilinspectobject-options\">util.inspect()<\/a>:<\/p>\n<pre><code class=\"language-js\">console.dir(myObject, { depth: null, color: true });<\/code><\/pre>\n<h3>Console controversie<\/h3>\n<p>Sommige ontwikkelaars beweren dat je <code>onsole.log()<\/code> <em>nooit<\/em> moet gebruiken omdat:<\/p>\n<ul>\n<li>Je de code wijzigt en iets onbewust kan veranderen of vergeten te verwijderen, en<\/li>\n<li>Het is sowieso niet nodig wanneer er betere debugopties zijn.<\/li>\n<\/ul>\n<p>Geloof niemand die beweert dat ze nooit <code>console.log()<\/code> gebruiken! Logging is snel en maakt je handen vies, maar iedereen gebruikt het op een gegeven moment. Gebruik de tool of techniek die jij wil. Het oplossen van een bug is belangrijker dan de methode die je gebruikt om het te vinden.<\/p>\n<h2>Een extern loggingsysteem gebruiken<\/h2>\n<p>Externe loggingsystemen bieden meer geavanceerde functies, zoals berichtenniveaus, verbositeit, sorteren, bestandsoutput, profilering, rapportage en meer. Populaire oplossingen zijn onder meer\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/cabin\">cabin<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/loglevel\">loglevel<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/morgan\">morgan<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/pino\">pino<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/signale\">signale<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/storyboard\">storyboard<\/a>,\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/tracer\">tracer<\/a>, en\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/winston\">winston<\/a>.<\/p>\n<h2>De V8 inspector gebruiken<\/h2>\n<p>De V8 JavaScript engine biedt een\u00a0<a href=\"https:\/\/nodejs.org\/api\/debugger.html\">debugging client<\/a> die je kan gebruiken in Node.js. Start een applicatie met behulp van node inspect, bijv.<\/p>\n<pre><code class=\"language-js\">node inspect app.js<\/code><\/pre>\n<p>De debugger pauzeert bij de eerste regel en geeft een debug&gt; prompt weer:<\/p>\n<pre><code class=\"language-js\">$ node inspect .\\mycode.js\n&lt; Debugger listening on ws:\/\/127.0.0.1:9229\/143e23fb\n&lt; For help, see: https:\/\/nodejs.org\/en\/docs\/inspector\n&lt;\n ok\n&lt; Debugger attached.\n&lt;\nBreak on start in mycode.js:1\n&gt; 1 const count = 10;\n  2\n  3 for (i = 0; i &lt; counter; i++) {\ndebug&gt;\n<\/code><\/pre>\n<p>Vul help in om een lijst met commando\u2019s te zien. Je kan de applicatie doorlopen door het volgende in te voeren:<\/p>\n<ul>\n<li><strong>cont<\/strong>\u00a0of\u00a0<strong>c<\/strong>: ga verder met executie<\/li>\n<li><strong>next<\/strong>\u00a0of\u00a0<strong>n<\/strong>: voer het volgende commando uit<\/li>\n<li><strong>step<\/strong>\u00a0of\u00a0<strong>s<\/strong>: stap in een functie die wordt gecalld<\/li>\n<li><strong>out<\/strong>\u00a0of\u00a0<strong>o<\/strong>: stap uit een functie en ga terug naar het callende statement<\/li>\n<li><strong>pause<\/strong>: pauzeer het runnen van de code<\/li>\n<li><strong>watch(\u2018myvar\u2019)<\/strong>: bekijk een variable<\/li>\n<li><strong>setBreakPoint()<\/strong>\u00a0of\u00a0<strong>sb()<\/strong>: stel een breakpoint in<\/li>\n<li><strong>restart<\/strong>: herstart het script<\/li>\n<li><strong>.exit<\/strong>\u00a0of\u00a0<strong>Ctrl | Cmd + D<\/strong>: sluit de debugger af<\/li>\n<\/ul>\n<p>Toegegeven, deze debug optie is tijdrovend en onhandig. Gebruik het alleen als er geen andere optie is, zoals wanneer je code uitvoert op een externe server en geen verbinding kunt maken vanaf een andere server of extra software kunt installeren.<\/p>\n<h2>De Chrome browser gebruiken om Node.js code te debuggen<\/h2>\n<p>De hierboven gebruikte optie Node.js inspect optie start een websocketserver die luistert op localhost poort 9229. Het start ook een op tekst gebaseerde debugging client, maar het is mogelijk om grafische clients te gebruiken \u2014 zoals <a href=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\">degene\u00a0die is ingebouwd in Google Chrome en Chrome gebaseerde browsers<\/a>\u00a0zoals Chromium, Edge, Opera, Vivaldi en\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/brave-browser-review\/\">Brave<\/a>.<\/p>\n<p>Om een typische webapplicatie te debuggen, start je deze met de optie -inspect om de Web Socket server van de V8 debugger in te schakelen:<\/p>\n<pre><code class=\"language-js\">node --inspect index.js<\/code><\/pre>\n<p>Opmerking:<\/p>\n<ul>\n<li>index.js wordt hier verondersteld het entry script van de applicatie te zijn.<\/li>\n<li>Zorg ervoor dat je <code>--inspect<\/code> gebruikt met dubbele streepjes om ervoor te zorgen dat je de op tekst gebaseerde debugger client niet start.<\/li>\n<li>Je kan <a href=\"https:\/\/nodemon.io\/\">nodemon<\/a>\u00a0in\u00a0plaats van node gebruiken als je de applicatie automatisch wilt herstarten wanneer een bestand wordt gewijzigd.<\/li>\n<\/ul>\n<p>Standaard accepteert de debugger alleen inkomende verbindingen van de lokale computer. Als je de toepassing op een ander apparaat, een virtuele machine of een Docker container uitvoert, gebruik je:<\/p>\n<pre><code class=\"language-js\">node --inspect=0.0.0.0:9229 index.js<\/code><\/pre>\n<figure id=\"attachment_115105\" aria-describedby=\"caption-attachment-115105\" style=\"width: 907px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115105 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/node-inspect.png\" alt=\"node inspect option\" width=\"907\" height=\"339\"><figcaption id=\"caption-attachment-115105\" class=\"wp-caption-text\">node inspect option.<\/figcaption><\/figure>\n<p>Je kan ook <code>--inspect-brk<\/code> gebruiken in plaats van <code>--inspect<\/code> om de verwerking te stoppen (een breakpoint instellen) op de eerste regel, zodat je de code vanaf het begin kunt doorlopen.<\/p>\n<p>Open een Chrome-gebaseerde browser en voer <code>chrome:\/\/inspect<\/code> in de adresbalk in om lokale en netwerkapparaten te bekijken:<\/p>\n<figure id=\"attachment_115106\" aria-describedby=\"caption-attachment-115106\" style=\"width: 911px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115106 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-inspect.png\" alt=\"Chrome Inspect tool\" width=\"911\" height=\"409\"><figcaption id=\"caption-attachment-115106\" class=\"wp-caption-text\">Chrome Inspect tool.<\/figcaption><\/figure>\n<p>Als je Node.js applicatie niet wordt weergegeven als een\u00a0<strong>Remote Target<\/strong>, heb je deze opties:<\/p>\n<ul>\n<li>Klik Open dedicated DevTools for Node en kies het adres en poort, of<\/li>\n<li>Check <strong>Discover network targets<\/strong>, klik <strong>Configure<\/strong> en voeg dan het IP adres en de poort toe van het apparaat waarop het wordt uitgevoerd.<\/li>\n<\/ul>\n<p>Klik op de <strong>inspect<\/strong> link van het Target om de DevTools debuggerclient te starten. Dit zou bekend moeten zijn voor iedereen die DevTools heeft gebruikt voor client-side code debugging:<\/p>\n<figure id=\"attachment_115107\" aria-describedby=\"caption-attachment-115107\" style=\"width: 920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115107 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-devtools.png\" alt=\"Chrome DevTools\" width=\"920\" height=\"550\"><figcaption id=\"caption-attachment-115107\" class=\"wp-caption-text\">Chrome DevTools.<\/figcaption><\/figure>\n<p>Schakel over naar het <strong>Sources<\/strong> paneel. Je kan elk bestand openen door op Cmd | Ctrl + P te drukken en de bestandsnaam (bijv. index.js) in te voeren.<\/p>\n<p>Het is echter gemakkelijker om je projectmap toe te voegen aan de workspace. Hiermee kun je bestanden rechtstreeks vanuit DevTools laden, bewerken en opslaan (of het een goed idee is, is een andere zaak!)<\/p>\n<ol>\n<li>Klik op\u00a0<strong>+ Add folder to workspace<\/strong><\/li>\n<li>Selecteer de locatie van je Node.js project<\/li>\n<li>Druk op\u00a0<strong>Agree <\/strong>om bestandswijzigingen toe te staan<\/li>\n<\/ol>\n<p>Je kan nu bestanden laden vanuit de linker directory-tree:<\/p>\n<figure id=\"attachment_115113\" aria-describedby=\"caption-attachment-115113\" style=\"width: 1167px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115113 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-sources-2.png\" alt=\"Sources paneel Chrome DevTools\" width=\"1167\" height=\"843\"><figcaption id=\"caption-attachment-115113\" class=\"wp-caption-text\">Sources paneel Chrome DevTools.<\/figcaption><\/figure>\n<p>Klik op een regelnummer om een breakpoint in te stellen dat wordt aangegeven door een blauwe markering.<\/p>\n<p>Debugging is gebaseerd op\u00a0<em>breakpoints<\/em>. Deze specificeren waar de debugger de uitvoering van het programma moet pauzeren en de huidige status van het programma moet tonen (variabelen, call stack, etc.)<\/p>\n<p>Je kan elk aantal breekpunten defini\u00ebren in de gebruikersinterface. Een andere optie is het plaatsen van een debugger; statement in je code, die stopt wanneer een debugger is gekoppeld.<\/p>\n<p>Laad en gebruik je webapplicatie om het statement te bereiken waar een breakpoint is ingesteld. In het voorbeeld hier,\u00a0is <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>\u00a0geopend in een browser, en DevTools zal stoppen met de uitvoering op regel 44:<\/p>\n<figure id=\"attachment_115114\" aria-describedby=\"caption-attachment-115114\" style=\"width: 1167px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115114 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-breakpoint.png\" alt=\"Chrome breakpoint\" width=\"1167\" height=\"843\"><figcaption id=\"caption-attachment-115114\" class=\"wp-caption-text\">Chrome breakpoint.<\/figcaption><\/figure>\n<p>Het rechterpaneel toont:<\/p>\n<ul>\n<li>Een rij actiepictogrammen (zie hieronder).<\/li>\n<li>Met een <strong>Watch<\/strong> paneel kun je variabelen monitoren door op het\u00a0<strong>+<\/strong>\u00a0-pictogram te klikken en hun namen in te voeren.<\/li>\n<li>Een <strong>Breakpoints<\/strong> paneel toont een lijst met breakpoints maakt het mogelijk deze in of uit te schakelen.<\/li>\n<li>Een <strong>Scope<\/strong> paneel toont de status van alle lokale, module en globale variabelen. Dit deelvenster inspecteer je het vaakst.<\/li>\n<li>Een <strong>Call Stack<\/strong> paneel toont de hi\u00ebrarchie van functies die worden gecalld om dit punt te bereiken.<\/li>\n<\/ul>\n<p>Er wordt een rij van actiepictogrammen weergegeven boven <strong>Paused on breakpoint<\/strong>:<\/p>\n<figure id=\"attachment_115115\" aria-describedby=\"caption-attachment-115115\" style=\"width: 625px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115115 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-breakpoint-icons.png\" alt=\"Chrome breakpoint pictogrammen\" width=\"625\" height=\"222\"><figcaption id=\"caption-attachment-115115\" class=\"wp-caption-text\">Chrome breakpoint pictogrammen.<\/figcaption><\/figure>\n<p>Van links naar rechts voeren deze de volgende acties uit:<\/p>\n<ul>\n<li><strong>resume execution<\/strong>: ga verder met verwerken tot het volgende breakpoint<\/li>\n<li><strong>step over<\/strong>: voer het volgende commando uit maar blijf binnen het huidige codeblok &#8211; ga niet naar een functie die het callt<\/li>\n<li><strong>step into<\/strong>: voer het volgende commando uit en ga indien nodig naar een functie<\/li>\n<li><strong>step out<\/strong>: ga verder met het verwerken tot het einde van de functie en keer terug naar het callende commando<\/li>\n<li><strong>step<\/strong>: vergelijkbaar met <strong>step into<\/strong> behalve dat deze niet naar async functies springt<\/li>\n<li><strong>deactivate<\/strong>\u00a0alle breakpoints<\/li>\n<li><strong>pause on exceptions<\/strong>: stopt verwerking wanneer er een fout optreedt.<\/li>\n<\/ul>\n<h2>Voorwaardelijke breekpunten<\/h2>\n<p>Soms is het nodig om wat meer controle over breakpoints te hebben. Stel je voor dat je een loopt hebt die 1.000 iteraties heeft voltooid, maar je bent alleen ge\u00efnteresseerd in de status van de laatste:<\/p>\n<pre><code class=\"language-js\">\nfor (let i = 0; i &lt; 1000; i++) {\n  \/\/ set breakpoint here\n}\n<\/code><\/pre>\n<p>In plaats van\u00a0999 keer op\u00a0<strong>resume execution<\/strong> te klikken, kun je met de rechtermuisknop op de regel klikken, <strong>Add conditional breakup<\/strong> kiezen en een voorwaarde invoeren zoals <code>i = 999<\/code>:<\/p>\n<figure id=\"attachment_115116\" aria-describedby=\"caption-attachment-115116\" style=\"width: 979px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115116 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-breakpoint-conditional.png\" alt=\"Chroom voorwaardelijk breakpoint\" width=\"979\" height=\"113\"><figcaption id=\"caption-attachment-115116\" class=\"wp-caption-text\">Chroom voorwaardelijk breakpoint.<\/figcaption><\/figure>\n<p>Chrome toont voorwaardelijke breakpoints in geel in plaats van blauw. In dit geval wordt het breakpoint alleen geactiveerd bij de laatste iteratie van de loop.<\/p>\n<h2>Logpunten<\/h2>\n<p>In de praktijk implementeren logpunten console.log() zonder enige code! Een expressie kan worden uitgevoerd wanneer de code een regel uitvoert, maar het stopt de verwerking niet, in tegenstelling tot een breakpoint.<\/p>\n<p>Als je een logpunt wilt toevoegen, klik je met de rechtermuisknop op een willekeurige regel, kies je <strong>Add log point<\/strong> en voer je een expressie in , bijvoorbeeld <code>'loop counter i', i<\/code>:<\/p>\n<figure id=\"attachment_115117\" aria-describedby=\"caption-attachment-115117\" style=\"width: 977px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115117 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/chrome-logpoint.png\" alt=\"Chrome logpunt\" width=\"977\" height=\"111\"><figcaption id=\"caption-attachment-115117\" class=\"wp-caption-text\">Chrome logpunt.<\/figcaption><\/figure>\n<p>De DevTools console output <code>loop counter i: 0<\/code> naar <code>loop counter i: 999<\/code> in het bovenstaande voorbeeld.<\/p>\n<h2>VS code gebruiken om Node.js applicaties te debuggen<\/h2>\n<p><a href=\"https:\/\/code.visualstudio.com\/\">VS Code<\/a> of Visual Studio Code is een gratis <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-teksteditors\/\">code editor<\/a> van Microsoft die populair is geworden onder <a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-word-webdeveloper\/\">webdevelopers<\/a>. De applicatie is beschikbaar voor Windows, macOS en Linux en is ontwikkeld met behulp van webtechnologie\u00ebn in <a href=\"https:\/\/www.electronjs.org\/\">Electron framework<\/a>.<\/p>\n<p>VS Code ondersteunt Node.js en heeft een ingebouwde debugging client. De meeste applicaties kunnen zonder configuratie worden gedebugd; de editor zal automatisch de debugserver en client starten.<\/p>\n<p>Open het startbestand (zoals index.js), activeer het deelvenster <strong>Run and Debug<\/strong>, klik op de knop <strong>Run and Debug<\/strong> en klik op de <strong>Node.js<\/strong> omgeving. Klik op een lijn om een breakpoint te activeren dat wordt weergegeven als een rood cirkelpictogram. Open vervolgens de applicatie in een browser zoals eerder \u2014 VS Code stopt de uitvoering wanneer het breakpoint is bereikt:<\/p>\n<figure id=\"attachment_115119\" aria-describedby=\"caption-attachment-115119\" style=\"width: 1245px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115119 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/vscode-breakpoint.png\" alt=\"VS Code breakpoint\" width=\"1245\" height=\"881\"><figcaption id=\"caption-attachment-115119\" class=\"wp-caption-text\">VS Code breakpoint.<\/figcaption><\/figure>\n<p>De deelvensters <strong>Variables<\/strong>,\u00a0<strong>Watch<\/strong>,\u00a0<strong>Call Stack<\/strong>, and\u00a0<strong>Breakpoints<\/strong> zijn vergelijkbaar met die in\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\">Chrome devtools<\/a>. Het deelvenster <strong>Loaded Scripts<\/strong> laat zien welke scripts zijn geladen, hoeveel veel hiervan intern zijn voor Node.js.<\/p>\n<p>Op de werkbalk met actiepictogrammen kun je:<\/p>\n<ul>\n<li><strong>resume execution<\/strong>: ga verder met verwerken tot het volgende breakpoint<\/li>\n<li><strong>step over<\/strong>: voer het volgende commando uit maar blijf binnen de huidige functie &#8211; spring niet naar functies die het callt<\/li>\n<li><strong>step into<\/strong>: voer het volgende commando uit en spring naar elke functie het aanroept<\/li>\n<li><strong>step out<\/strong>: ga verder met het verwerken tot het einde van de functie en keer terug naar het callende commando<\/li>\n<li><strong>restart<\/strong> de applicatie en debugger<\/li>\n<li><strong>stop<\/strong> de applicatie en debugger<\/li>\n<\/ul>\n<p>Net als Chrome DevTools kan je met de rechtermuisknop op een willekeurige regel klikken om <strong>Conditional breakpoints<\/strong> en <strong>Log points<\/strong> toe te voegen.<\/p>\n<p>Raadpleeg <a href=\"https:\/\/code.visualstudio.com\/docs\/introvideos\/debugging\">Debugging in Visual Studio Code<\/a> voor meer informatie.<\/p>\n<h2>Geavanceerde debuggingconfiguratie VS code<\/h2>\n<p>Verdere VS Code configuratie kan nodig zijn als je code op een ander apparaat of virtuele machine wil debuggen, of andere launch-opties nodig hebt zoals nodemon.<\/p>\n<p>VS Code slaat debuggingconfiguraties in een launch.json bestand op in een <code>.vscode<\/code> directory in je project. Open het deelvenster <strong>Run and Debug<\/strong>, klik op <strong>create a launch.json file<\/strong> kies de\u00a0<strong>Node.js<\/strong> omgeving om dit bestand te genereren. Een voorbeeldconfiguratie wordt gegeven:<\/p>\n<figure id=\"attachment_115120\" aria-describedby=\"caption-attachment-115120\" style=\"width: 1245px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115120 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/vscode-launchjson.png\" alt=\"VS Code debugger configuratie\" width=\"1245\" height=\"881\"><figcaption id=\"caption-attachment-115120\" class=\"wp-caption-text\">VS Code debugger configuratie.<\/figcaption><\/figure>\n<p>Je kan een onbeperkt aantal configuratie-instellingen als objecten defini\u00ebren in de array <code>\"configurations\"<\/code>. Klik op <strong>Add Configuration\u2026<\/strong> en selecteer een geschikte optie.<\/p>\n<p>Een losse Node.js configuratie kan ofwel:<\/p>\n<ol>\n<li>Zelf een proces starten, of<\/li>\n<li>Zich koppelen aan een debugging Web Socket server, mogelijk uitgevoerd op een remote machine of Docker container.<\/li>\n<\/ol>\n<p>Als je bijvoorbeeld een nodemon configuratie wilt defini\u00ebren, selecteer je <strong>Node.js: Nodemon Setup<\/strong> en wijzig je indien nodig het &#8220;program&#8221; entry script:<\/p>\n<pre><code class=\"language-js\">{\n  \/\/ custom configuration\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"console\": \"integratedTerminal\",\n      \"internalConsoleOptions\": \"neverOpen\",\n      \"name\": \"nodemon\",\n      \"program\": \"${workspaceFolder}\/index.js\",\n      \"request\": \"launch\",\n      \"restart\": true,\n      \"runtimeExecutable\": \"nodemon\",\n      \"skipFiles\": [\n        \"&lt;node_internals&gt;\/**\"\n      ],\n      \"type\": \"pwa-node\"\n    }\n  ]\n}\n<\/code><\/pre>\n<p>Sla het <code>launch.json<\/code> bestand op en de <strong>nodemon<\/strong> (de configuratie \u201cname\u201d) verschijnt in de vervolgkeuzelijst bovenaan het deelvenster <strong>Run and Debug<\/strong>. Klik op het groene runpictogram om die configuratie te gebruiken en start de applicatie met behulp van nodemon:<\/p>\n<figure id=\"attachment_115121\" aria-describedby=\"caption-attachment-115121\" style=\"width: 1245px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115121 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/02\/vscode-nodemon.png\" alt=\"VS Code debugging met nodemon\" width=\"1245\" height=\"876\"><figcaption id=\"caption-attachment-115121\" class=\"wp-caption-text\">VS Code debugging met nodemon.<\/figcaption><\/figure>\n<p>Net als voorheen kun je breakpoints, voorwaardelijke breakpoints en logpunten toevoegen. Het belangrijkste verschil is dat nodemon automatisch je server herstart wanneer een bestand wordt gewijzigd.<\/p>\n<p>Raadpleeg voor meer informatie de\u00a0<a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging#_launch-configurations\">VS Code Launch configuraties<\/a>.<\/p>\n<p>De volgende VS Code extensies kunnen je helpen bij het debuggen van code die wordt gehost op externe of ge\u00efsoleerde serveromgevingen:<\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode-remote.remote-containers\">Remote \u2014 Containers<\/a>: maakt verbinding met apps die worden uitgevoerd in Doctor containers<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode-remote.remote-ssh\">Remote \u2014 SSH<\/a>: maakt verbinding met apps die op een externe server worden uitgevoerd<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode-remote.remote-wsl\">Remote \u2014 WSL<\/a>: maakt verbinding met apps die worden uitgevoerd op het Windows Subsystem for Linux (WSL).<\/li>\n<\/ul>\n<h2>Andere Node.js debuggingopties<\/h2>\n<p>De\u00a0<a href=\"https:\/\/nodejs.org\/en\/docs\/guides\/debugging-getting-started\/\">Node.js Debugging Guide<\/a>\u00a0geeft advies voor een reeks teksteditors en IDE &#8216;s, waaronder Visual Studio, JetBrains WebStorm, Gitpod en Eclipse. Atom biedt een\u00a0<a href=\"https:\/\/atom.io\/packages\/node-debug\">node-debug extensie<\/a>, die de Chrome DevTools debugger in de editor integreert.<\/p>\n<p>Zodra je applicatie live is, kun je commerci\u00eble debugging diensten zoals\u00a0<a href=\"https:\/\/logrocket.com\/\">LogRocket<\/a>\u00a0en\u00a0<a href=\"https:\/\/sentry.io\/\">Sentry.io<\/a> overwegen, die client- en serverfouten kunnen opnemen en afspelen die worden ondervonden door echte gebruikers.<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Historisch gezien is <a href=\"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/\">JavaScript debugging<\/a> altijd al een uitdaging geweest, maar er zijn de afgelopen tien jaar enorme verbeteringen opgetreden. De keuze is even goed \u2014 zo niet\u00a0beter\u00a0\u2014 als die voor andere talen.<\/p>\n<p>Gebruik de tool die voor jou het meest praktisch is om een probleem te lokaliseren. Er is niets mis met console.log() voor snelle bughunting, maar Chrome DevTools of VS Code kan de voorkeur hebben voor meer complexe problemen. De tools kunnen je helpen robuustere code te maken en je zult minder tijd kwijt zijn aan het oplossen van bugs.<\/p>\n<p><em>Wat is jouw favoriete Node.js debugging tool? Laat het ons weten in de comments hieronder!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Node.js is een JavaScript runtime die is gebaseerd op dezelfde V8 engine die wordt gebruikt in de Chrome browser van Google. Het wordt vaak gebruikt om &#8230;<\/p>\n","protected":false},"author":188,"featured_media":42441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[343,29],"topic":[847,860],"class_list":["post-42439","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-debugging","tag-webdev","topic-javascript-frameworks","topic-node-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo debug je node.js code met behulp van verschillende tools<\/title>\n<meta name=\"description\" content=\"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo debug je node.js code met behulp van verschillende tools\" \/>\n<meta property=\"og:description\" content=\"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-29T10:49:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-22T12:14:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Zo debug je node.js code met behulp van verschillende tools\",\"datePublished\":\"2022-03-29T10:49:21+00:00\",\"dateModified\":\"2023-05-22T12:14:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\"},\"wordCount\":3167,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\",\"keywords\":[\"debugging\",\"webdev\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\",\"name\":\"Zo debug je node.js code met behulp van verschillende tools\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\",\"datePublished\":\"2022-03-29T10:49:21+00:00\",\"dateModified\":\"2023-05-22T12:14:07+00:00\",\"description\":\"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Zo debug je node.js code met behulp van verschillende tools\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript frameworks\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo debug je node.js code met behulp van verschillende tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo debug je node.js code met behulp van verschillende tools","description":"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo debug je node.js code met behulp van verschillende tools","og_description":"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.","og_url":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-03-29T10:49:21+00:00","article_modified_time":"2023-05-22T12:14:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Craig Buckler","Geschatte leestijd":"17 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Zo debug je node.js code met behulp van verschillende tools","datePublished":"2022-03-29T10:49:21+00:00","dateModified":"2023-05-22T12:14:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/"},"wordCount":3167,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","keywords":["debugging","webdev"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/debug-node\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/","url":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/","name":"Zo debug je node.js code met behulp van verschillende tools","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","datePublished":"2022-03-29T10:49:21+00:00","dateModified":"2023-05-22T12:14:07+00:00","description":"In deze tutorial behandelen we verscheidene tools om node applicaties te debuggen en de oorzaken te achterhalen. Tijd om erin te duiken en alles erover te leren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/debug-node\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/03\/debug-node.jpeg","width":1460,"height":730,"caption":"Zo debug je node.js code met behulp van verschillende tools"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/debug-node\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript frameworks","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Zo debug je node.js code met behulp van verschillende tools"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/42439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=42439"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/42439\/revisions"}],"predecessor-version":[{"id":45691,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/42439\/revisions\/45691"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/42439\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/42441"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=42439"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=42439"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=42439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}