garrettmills/devbug
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

js web and api code

Browse Source
This commit is contained in:
Garrett Mills 2019-06-24 13:00:36 -05:00
parent 5af35f1b34
commit 25a7abb344
2 changed files with 65 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/MiscUnit.js
View File

@ -42,6 +42,17 @@ dbsetup({
\tserver: "https://CHANGEME:8000/", // DevBug Server URL
\tproject: "CHANGEME", // Project API Key
})`,
api: `Send a multipart/form-data POST request to:
http(s)://<devbug url>/api/v1/out/<project api key>
The form should have a single field with the name "data".
This field should contain a valid JSON string with the following structure:
{
"brief": "Some preview text to be displayed. Whatever you want.",
"data": {
// the output data (key-pairs) goes here
}
}`,
php: `<?php
// ===========================================================
// DEVBUG INLINE DEBUGGING HELPER - FOR USE WITH DEVBUG SERVER
@ -96,6 +107,50 @@ function breakpoint($html = false, $name = null){
\texit();
}
// ===========================================================`,
js: `// ===========================================================
// DEVBUG INLINE DEBUGGING HELPER - FOR USE WITH DEVBUG SERVER
// TODO: REMOVE BEFORE COMMITTING
let outs = {}
const devbug_url = 'http://CHANGEME:8000/'
const project_api_key = 'CHANGEME'
const out = (key, what, group=false) => {
if ( group ){
if ( Object.keys(outs).includes(group) ) outs[group][key] = what
else outs[group] = {}; outs[group][key] = where
}
else {
outs[key] = what
}
}
const breakpoint = (html = false, name = null) => {
var e = new Error();
(function() {
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = () => {
var $ = window.jQuery;
$(() => {
e = e.stack.split('at'); var caller = '';
if ( e.length < 3 ) e = e.stack.split('@')
if ( e.length > 2 ) caller = e[2].trim()
else if ( e.length > 1 ) caller = e[1]
else caller = 'Unable to determine stacktrace'
var data = new FormData();
data.append('data', JSON.stringify({brief: (name ? name : 'Breakpoint: ')+caller,data: outs}))
$.ajax({
url: devbug_url+'api/v1/out/'+project_api_key,
data: data, cache: false, contentType: false, processData: false, method: 'POST', type: 'POST',
success: (res) => { console.log('DevBug POST Completed'); console.log(res) }
})
});
};
document.getElementsByTagName("head")[0].appendChild(script);
})();
}
if ( window ) window.out = out; window.breakpoint = breakpoint;
// ===========================================================`
}
}

11
app/views/dash_v1/code.pug
View File

@ -5,7 +5,7 @@ block content
code out()
| function. Then, call the
code breakpoint()
| function to send those outputs to DevBug.
| function to send those outputs to DevBug. Currently, there are official clients for Node.js, PHP, and Javascript (Web). However, the clients make use of a generic exposed API endpoint which you can use from anywhere.
h2 Node.js
p To use DevBug in a Node.js app, install the "devbugjs" NPM package. Then, to initialize DevBug, use the following code snippet at any point in the application:
pre
@ -17,3 +17,12 @@ block content
| function.
pre
code #{devbug.code.php}
h2 JavaScript (Web)
p
| This snippet works by loading jQuery via a script tag when a breakpoint is triggered.
pre
code #{devbug.code.js}
h2 Using the API
p You can post output to DevBug projects from anywhere using the DevBug API. Here's how:
pre
code #{devbug.code.api}