{"type":"doc","content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"df3861dd-31cc-4956-907d-81e610bf2fe6"},"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"__confluenceADFMigrationUnsupportedContentInternalExtension__","text":"","parameters":{"cxhtml":"50%

Before you start!

The first step is to install Profound.js onto your local machine by using 'npm install profoundjs'. Click

for more detailed installation instructions.

Please note...

You can and are welcome to use any Node.js debugger you prefer with Profound.js; however, this walk-through illustrates using VS Code, as it is one of the more popular, free, and easy to use debuggers for Node.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"50%"}},"macroMetadata":{"macroId":{"value":"0b2fea3b-d8bd-4f97-aefc-3e1bdfa79679"},"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Please note...","type":"text"}]},{"type":"paragraph","content":[{"text":"You can and are welcome to use any Node.js debugger you prefer with Profound.js; however, this walk-through illustrates using VS Code, as it is one of the more popular, free, and easy to use debuggers for Node.","type":"text"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]}],"version":1},"reason":"A column macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"VS Code: The What and Why","type":"text"}]},{"type":"paragraph","content":[{"text":"VS Code is a cross-platform, multi-language code editor. With inline IntelliSense, debugging support for multiple languages, inline git support and an extensible API for plugins, it's the editor that has no boundaries.","type":"text"}]},{"type":"paragraph","content":[{"text":"It's inline debugging support is perfect for Profound.js as it provides the functionality to start and stop Profound.js locally, set breakpoints, and see the values of variables at runtime, all through a friendly user interface.","type":"text"}]},{"type":"paragraph","content":[{"text":"To download and read more about VS Code, check out the following links:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://code.visualstudio.com/","type":"text","marks":[{"type":"link","attrs":{"href":"https://code.visualstudio.com/"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://code.visualstudio.com/docs/editor/whyvscode","type":"text","marks":[{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/editor/whyvscode"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://code.visualstudio.com/docs/nodejs/nodejs-tutorial","type":"text","marks":[{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/nodejs/nodejs-tutorial"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"https://code.visualstudio.com/docs/nodejs/nodejs-debugging","type":"text","marks":[{"type":"link","attrs":{"href":"https://code.visualstudio.com/docs/nodejs/nodejs-debugging"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Written Tutorial","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"VS Code Debug Setup for Profound.js","type":"text"}]},{"type":"paragraph","content":[{"text":"For VS Code, you will want to open your Profound.js installation directory in the Explorer. This is so it's easy to navigate and debug through existing source.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"File -> Open Folder...","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select the directory where you installed Profound.js","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":24.0},"content":[{"type":"media","attrs":{"width":309,"id":"f94b8dda-414e-44c0-bdc9-2502b3c7daf3","collection":"contentId-164536747","type":"file","height":285}}]}]}]},{"type":"paragraph","content":[{"text":"You will also want to create a new debug configuration, which would look like this:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"launch.json file in VS Code","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":" {\n \"type\": \"node\",\n \"request\": \"launch\",\n \"name\": \"Launch Profound.js\",\n \"program\": \"${workspaceFolder}\\\\profoundjs\\\\start.js\",\n \"args\": [\n \"--no-worker\"\n ]\n }\n","type":"text"}]},{"type":"paragraph","content":[{"text":"This specifies that when you start debugging, it will launch Profound.js inside of your VS Code instance.","type":"text"}]},{"type":"paragraph","content":[{"text":"To test that this debug configuration is working, when you start debugging you should see the following in your 'DEBUG CONSOLE':","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":34.0},"content":[{"type":"media","attrs":{"width":447,"id":"01258a77-1969-44ed-a26f-a8e9dd18c56b","collection":"contentId-164536747","type":"file","height":137}}]},{"type":"paragraph","content":[{"text":"Once you have your Profound.js server running from VS Code, that means you are now able to debug.","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Debugging a Profound.js module","type":"text"}]},{"type":"paragraph","content":[{"text":"For this example we will debug connect4.js, an example module shipped with Profound.js.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the VS Code explorer, open 'modules/pjssamples/connect4.js'","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":19.0},"content":[{"type":"media","attrs":{"width":246,"id":"18de83bd-06ee-4fc7-91ac-4cada3d6575f","collection":"contentId-164536747","type":"file","height":169}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the file is open, set a breakpoint on where you'd like to break the program. You can set a breakpoint by clicking slightly left of the line number you'd like to break on.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":35.0},"content":[{"type":"media","attrs":{"width":448,"id":"9097cba7-ab20-4a28-9c98-f2154ceeb955","collection":"contentId-164536747","type":"file","height":233}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Next, start debugging from VS Code and launch the application in your browser using the URL which is shown the debug console.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":39.0},"content":[{"type":"media","attrs":{"width":509,"id":"8579ede1-3281-4d9e-9852-dc23d44bc5e8","collection":"contentId-164536747","type":"file","height":217}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"When the program breaks, VS Code will take focus and the current debugging line of the statement will be highlighted in yellow.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":39.0},"content":[{"type":"media","attrs":{"width":1104,"id":"eede4d2a-22ad-4d62-a5b0-5b7c3d93b070","collection":"contentId-164536747","type":"file","height":757}}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"From here, you are able to step through your module and debug the application.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Video Tutorial","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"widget","parameters":{"macroParams":{"overlay":{"value":"youtube"},"_template":{"value":"com/atlassian/confluence/extra/widgetconnector/templates/youtube.vm"},"width":{"value":"640px"},"url":{"value":"https://www.youtube.com/watch?v=m9IEtCgD-P0"},"height":{"value":"360px"}},"macroMetadata":{"macroId":{"value":"742e930e-a246-4563-bc6a-b9c7ae95ed2a"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"/plugins/servlet/widgetconnector/placeholder?thumb=https://img.youtube.com/vi/m9IEtCgD-P0/mqdefault.jpg&overlay=youtube&width=640&height=360"}}],"title":"Widget Connector"}}}},{"type":"paragraph","content":[{"type":"hardBreak"}]}],"version":1}

Browser not supported