extends ../template
block content
	h3 DevBug supports the code behind the web.
	p To use the client, include the code snippet in your PHP application as early as you can. You'll need to go to the <code>breakpoint()</code> function and customize the DevBug server URL and project API key. It's best to do this in a global namespace. That way the functions defined by DevBug are available everywhere in your program. This gives you access to the global <code>out()</code> and <code>breakpoint()</code> functions. Here's how to use them:
	h4 <code>out(<i>info</i>, <i>data</i>)</code> - output data to DevBug
	p This function is similar to logging data. It stores data to be outputted to DevBug. The first parameter should be a string with a brief description of the data, and the second is the data to be outputted. Note that the info string should be unique and multiple outputs with the same name will overwrite their predecessors. It's important to note that calling this function doesn't actually <i>send</i> any data to DevBug. Instead, it stores it to be sent.
	h4 <code>breakpoint(<i>continue = false</i>, <i>name = ""</i>)</code> - send the outputted data to DevBug
	p This is the magic of the operation. When this function is called, any data that has been passed to the output function will be sent to the DevBug server and stored under the configured project. There are several things you can change about this function. The <code>continue</code> parameter determines whether or not program execution continues, or if the PHP exit method is called. The <code>name</code> parameter allows you to change the name of the breakpoint. This can be useful to help distinguish multiple breakpoints in the DevBug dashboard.
	pre#editor #{devbug.code.php}

block scripts
	script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")
	script.
		const editor = ace.edit('editor');
		editor.setTheme('ace/theme/cobalt');
		editor.session.setMode('ace/mode/php');
		editor.setOption('readOnly', true);