{"__v":3,"_id":"56995b3e54d7db17000ee9e6","category":{"__v":24,"_id":"54cfba19bba1a023008741b9","pages":["54d0351994f7980d0081b848","54d03542c795960d009f4219","54d0357d94f7980d0081b84b","54d039c3f530ca0d0005396a","54d039e394f7980d0081b859","54d03a1294f7980d0081b85b","54d03a3bf530ca0d0005396e","54d03a9294f7980d0081b85e","54d03abdc795960d009f4220","54d03ade94f7980d0081b860","54d03b02f530ca0d00053970","54d03b3794f7980d0081b862","54d03b69f530ca0d00053973","54d03b8994f7980d0081b864","54d03bb1c795960d009f4222","54d8f49e6a09052100a6b60e","54ec495d7ab3172d00c01a92","54ec6f2ec0c0ba1700386fa6","54f6f3f852174719008f6168","5628ed9b48742a0d00474591","564b714fcc472d0d00da941e","564b9e65288b1a2b00b3ae7d","564ba4872cabb82100943f0d","56995b3e54d7db17000ee9e6"],"project":"54cf411f9d09bb0d00a17a1c","version":"54cf411f9d09bb0d00a17a1f","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-02T17:55:37.930Z","from_sync":false,"order":4,"slug":"running-and-debugging","title":"Running and Debugging"},"parentDoc":null,"project":"54cf411f9d09bb0d00a17a1c","user":"54cfa8c8a8a4fd0d00b7fd1c","version":{"__v":14,"_id":"54cf411f9d09bb0d00a17a1f","project":"54cf411f9d09bb0d00a17a1c","createdAt":"2015-02-02T09:19:27.656Z","releaseDate":"2015-02-02T09:19:27.656Z","categories":["54cf41209d09bb0d00a17a20","54cfb99bbba1a023008741af","54cfb9a65ff7e617002bbd7f","54cfba03bba1a023008741b6","54cfba0ebba1a023008741b8","54cfba19bba1a023008741b9","54cfba29bba1a023008741bb","54cfba345ff7e617002bbd87","54cfba3ebba1a023008741bc","54cfba473995cf0d0006f6f0","54e371b18ef7552300409bf2","54e37aa5e887c50d005ef629","555a4e9b147f91190092d137","56b0e91802f4bc0d006ce254"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-15T20:49:02.437Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"## Debugging Your Code\n\nThe Cloud9 debugger can debug your Node, PHP, Go, and C++ code. See [Supported Languages](doc:supported-languages) for more details about the languages supported.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FFg0jJb0n0W4%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DFg0jJb0n0W4%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FFg0jJb0n0W4%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=Fg0jJb0n0W4&feature=youtu.be\",\n  \"title\": \"Debugging Basics - Node\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/Fg0jJb0n0W4/hqdefault.jpg\"\n}\n[/block]\nSetting up a project to debug is done in very much the same way as running your code. To debug, ensure you've selected **Show Debugger at Break** from the Run *menu* (in between Goto and Tools). You may also run your code, click the bug icon to enable debugging, then run your code again with the debugging on.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TDtBYRUlTPSfzBVO2M9x_debugger.png\",\n        \"debugger.png\",\n        \"1126\",\n        \"286\",\n        \"#e2271f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nInitially, the only difference this will make is the expansion of the debugging toolbar to the right of the editor:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/nMe0paMRm6SPTwsUFPnw_tool_bar.png\",\n        \"tool_bar.png\",\n        \"36\",\n        \"225\",\n        \"#e2e2e2\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThis toolbar, however, grants you the following capabilities:\n- Debugging navigation\n- Variable inspections\n- Callstack\n- Interactive mode\n\nWhile debugging, you also have the power of the live inspector. While hovering over a piece of code in the editor, you'll instantly get some floating text that describes the values of that variable, similar to **Variable Inspection**.  \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/AavZfcSbGCLltFlsol5w_debugLiveInspector.png\",\n        \"debugLiveInspector.png\",\n        \"467\",\n        \"311\",\n        \"#3b689a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### Live Changes\n\nWhile debugging, Cloud9 allows you to make changes to your code, save your work, and instantly see the difference. When you make a change, Cloud9 will start the debugger from before the spot you changed so you can see how your code now behaves differently. Use this ability liberally as it can be very useful.\n\n# Client Side Debugging\n---\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJRw3HNRLM40%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJRw3HNRLM40%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJRw3HNRLM40%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=JRw3HNRLM40&feature=youtu.be\",\n  \"title\": \"Client side Debugging\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/JRw3HNRLM40/hqdefault.jpg\"\n}\n[/block]\nCloud9 IDE only supports debugging NodeJS server side JavaScript but you can use your browsers debugging tools to test your client-side code. To do this simply preview your file and click the \"Pop out into new window\" button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0XbviFi8RsCwNtDIoH9t_KfAFTHC.png\",\n        \"KfAFTHC.png\",\n        \"69\",\n        \"52\",\n        \"#c0c0c0\",\n        \"\"\n      ],\n      \"caption\": \"\\\"Pop out into new window\\\" button\"\n    }\n  ]\n}\n[/block]\nOnce you're in the new tab or window press F12 (in Chrome and Firefox) and the developer tools will appear. From there you can view your source code and click to add breakpoints","excerpt":"","slug":"debugging-your-code","type":"basic","title":"Debugging Your Code"}

Debugging Your Code


## Debugging Your Code The Cloud9 debugger can debug your Node, PHP, Go, and C++ code. See [Supported Languages](doc:supported-languages) for more details about the languages supported. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FFg0jJb0n0W4%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DFg0jJb0n0W4%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FFg0jJb0n0W4%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=Fg0jJb0n0W4&feature=youtu.be", "title": "Debugging Basics - Node", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/Fg0jJb0n0W4/hqdefault.jpg" } [/block] Setting up a project to debug is done in very much the same way as running your code. To debug, ensure you've selected **Show Debugger at Break** from the Run *menu* (in between Goto and Tools). You may also run your code, click the bug icon to enable debugging, then run your code again with the debugging on. [block:image] { "images": [ { "image": [ "https://files.readme.io/TDtBYRUlTPSfzBVO2M9x_debugger.png", "debugger.png", "1126", "286", "#e2271f", "" ] } ] } [/block] Initially, the only difference this will make is the expansion of the debugging toolbar to the right of the editor: [block:image] { "images": [ { "image": [ "https://files.readme.io/nMe0paMRm6SPTwsUFPnw_tool_bar.png", "tool_bar.png", "36", "225", "#e2e2e2", "" ] } ] } [/block] This toolbar, however, grants you the following capabilities: - Debugging navigation - Variable inspections - Callstack - Interactive mode While debugging, you also have the power of the live inspector. While hovering over a piece of code in the editor, you'll instantly get some floating text that describes the values of that variable, similar to **Variable Inspection**. [block:image] { "images": [ { "image": [ "https://files.readme.io/AavZfcSbGCLltFlsol5w_debugLiveInspector.png", "debugLiveInspector.png", "467", "311", "#3b689a", "" ] } ] } [/block] ### Live Changes While debugging, Cloud9 allows you to make changes to your code, save your work, and instantly see the difference. When you make a change, Cloud9 will start the debugger from before the spot you changed so you can see how your code now behaves differently. Use this ability liberally as it can be very useful. # Client Side Debugging --- [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJRw3HNRLM40%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJRw3HNRLM40%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJRw3HNRLM40%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=JRw3HNRLM40&feature=youtu.be", "title": "Client side Debugging", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/JRw3HNRLM40/hqdefault.jpg" } [/block] Cloud9 IDE only supports debugging NodeJS server side JavaScript but you can use your browsers debugging tools to test your client-side code. To do this simply preview your file and click the "Pop out into new window" button. [block:image] { "images": [ { "image": [ "https://files.readme.io/0XbviFi8RsCwNtDIoH9t_KfAFTHC.png", "KfAFTHC.png", "69", "52", "#c0c0c0", "" ], "caption": "\"Pop out into new window\" button" } ] } [/block] Once you're in the new tab or window press F12 (in Chrome and Firefox) and the developer tools will appear. From there you can view your source code and click to add breakpoints