{"__v":9,"_id":"54d5635632d98b0d00384b0c","category":{"__v":5,"_id":"54fa1d3fe7a0ba2f00306309","pages":["54fa1d54e7a0ba2f0030630c","54fa1d5de7a0ba2f0030630e","54fa1d65961fea210092064f","54fa1dcff63cf9210041c4c0","551f404b6886f8230055f02f"],"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-06T21:33:51.375Z","from_sync":false,"order":6,"slug":"runners-debuggers","title":"Runners & Debuggers"},"parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"__v":10,"_id":"54d5635532d98b0d00384afb","forked_from":"54d53c7c23010a0d001aca0f","project":"54d53c7b23010a0d001aca0c","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-07T00:02:46.776Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"The debugger UI consists of panels that offer certain features. The basic panels are callstack, watches, variables and breakpoints. Debug panels can extend the feature set of the debugger by adding a UI that deals with other data types - perhaps specific to certain debugger implementations.\n\n# Creating a Debug Panel\n\nA basic debug panel is created like this.\n\n```\nvar plugin = new DebugPanel(\"Your Name\", [], { \n    caption: \"Example Panel\", \n    index: 500 \n});\n```\n\nAnd looks like this.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6vCeo6YDRPi54Tt2llCS_2015-03-26_1858.png\",\n        \"2015-03-26_1858.png\",\n        \"1570\",\n        \"854\",\n        \"#6ca86e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Adding your own contents\n\nThe easiest way to populate a debug panel is by adding custom html and css. The following example loads css from debugpanel.css and adds a div element to the body of the dialog.\n\n```\nvar plugin = new DebugPanel(\"Your Name\", main.consumes, {\n    caption: \"Example Panel\"\n    index: 500\n});\n\nplugin.on(\"draw\", function(e){\n    // Insert css\n    ui.insertCss(require(\"text!./debugpanel.css\"), options.staticPrefix, plugin);\n\n    // Set some custom HTML\n    e.html.innerHTML = \"<div class='myCSS'>Hello World</div>\";\n});\n```\n\n*Make sure to check out the [ace widgets](doc:ace-tree). They are used by most debug panels and might work well for you too*\n\n# Interacting with the Debugger\n\nUse the `attach` and `detach` events to listen to a new debugger attaching and detaching. This is the recommended way to fetch a reference to the current debugger implementation which you can use to interact with while connected.\n\n```\nvar debug = imports.debugger;\n\nvar dbg;\ndebug.on(\"attach\", function(e) {\n    dbg = e.implementation;\n});\ndebug.on(\"detach\", function(e) {\n    dbg = null;\n});\n```\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Hide panel when not needed\",\n  \"body\": \"Your plugin *must* hide itself when a debugger implementation does not support your data types. You could add a new [debugger feature](http://cloud9-sdk.readme.io/v0.1/docs/debugger-plugin#debugger-features) and check for that in the `attach` event handler.\\n\\n```\\ndebug.on(\\\"attach\\\", function(e) {\\n    dbg = e.implementation;\\n    \\n    if (dbg.features.myCustomFeature) plugin.show();\\n    else plugin.hide();\\n});\\n```\"\n}\n[/block]","excerpt":"","slug":"debug-panel","type":"basic","title":"Debug Panel"}
The debugger UI consists of panels that offer certain features. The basic panels are callstack, watches, variables and breakpoints. Debug panels can extend the feature set of the debugger by adding a UI that deals with other data types - perhaps specific to certain debugger implementations. # Creating a Debug Panel A basic debug panel is created like this. ``` var plugin = new DebugPanel("Your Name", [], { caption: "Example Panel", index: 500 }); ``` And looks like this. [block:image] { "images": [ { "image": [ "https://files.readme.io/6vCeo6YDRPi54Tt2llCS_2015-03-26_1858.png", "2015-03-26_1858.png", "1570", "854", "#6ca86e", "" ] } ] } [/block] # Adding your own contents The easiest way to populate a debug panel is by adding custom html and css. The following example loads css from debugpanel.css and adds a div element to the body of the dialog. ``` var plugin = new DebugPanel("Your Name", main.consumes, { caption: "Example Panel" index: 500 }); plugin.on("draw", function(e){ // Insert css ui.insertCss(require("text!./debugpanel.css"), options.staticPrefix, plugin); // Set some custom HTML e.html.innerHTML = "<div class='myCSS'>Hello World</div>"; }); ``` *Make sure to check out the [ace widgets](doc:ace-tree). They are used by most debug panels and might work well for you too* # Interacting with the Debugger Use the `attach` and `detach` events to listen to a new debugger attaching and detaching. This is the recommended way to fetch a reference to the current debugger implementation which you can use to interact with while connected. ``` var debug = imports.debugger; var dbg; debug.on("attach", function(e) { dbg = e.implementation; }); debug.on("detach", function(e) { dbg = null; }); ``` [block:callout] { "type": "warning", "title": "Hide panel when not needed", "body": "Your plugin *must* hide itself when a debugger implementation does not support your data types. You could add a new [debugger feature](http://cloud9-sdk.readme.io/v0.1/docs/debugger-plugin#debugger-features) and check for that in the `attach` event handler.\n\n```\ndebug.on(\"attach\", function(e) {\n dbg = e.implementation;\n \n if (dbg.features.myCustomFeature) plugin.show();\n else plugin.hide();\n});\n```" } [/block]