lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

Dev: Console tool

Browse Source
This commit is contained in:
surunzi
2016-03-11 23:49:02 +08:00
parent 95dbca2471
commit 35cf9768c6
19 changed files with 666 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eustia
View File

@@ -1,5 +1,6 @@
module.exports = {
files: 'src/**/*.es6',
ignore: '**/Info/defInfo.es6',
output: 'src/util.js',
format: 'commonjs',
namespace: 'eruda'

549
dist/eruda.js vendored
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -6,7 +6,7 @@
"scripts": {
"dev": "webpack --watch",
"release": "webpack & uglifyjs dist/eruda.js -o dist/eruda.min.js",
"server": "nws -p 3000"
"serve": "nws -p 3000"
},
"repository": {
"type": "git",

21
src/Console/Console.es6
View File

@@ -43,32 +43,15 @@ export default class Console extends Tool
if (e.keyCode === 13)
{
var jsInput = $jsInput.text();
var jsInput = $jsInput.val();
if (util.trim(jsInput) === '') return;
log.input(jsInput);
try {
log.output(this._evalJs(jsInput));
} catch (e)
{
log.error(e);
}
$jsInput.html('');
$jsInput.val('');
}
});
}
_evalJs(jsInput)
{
var log = this._log;
function clear()
{
log.clear();
}
return eval(jsInput);
}
}

2
src/Console/Console.hbs
View File

@@ -1,2 +1,2 @@
<div class="logs"></div>
<div class="js-input" contenteditable="true"></div>
<input class="js-input" type="text" placeholder="Type JavaScript here"/>

11
src/Console/Console.scss
View File

@@ -1,17 +1,18 @@
@import "../color";
#eruda { .dev-tools { .tools {
.console {
padding-bottom: 30px;
padding-bottom: 40px;
.js-input {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
height: 40px;
padding: 10px;
border: none;
border-top: 1px solid #b4b4b4;
background: #fff;
outline: none;
padding: 0 10px;
overflow: hidden;
}
}

133
src/Console/Log.es6
View File

@@ -2,16 +2,45 @@ import util from '../util'
require('./Log.scss');
function errToStr(err)
var cmdList = require('./cmdList.json'),
helpMsg = require('./help.hbs')({
commands: cmdList
});
function evalJs(jsInput)
{
return eval(jsInput);
}
function errToStr(err, msg)
{
var lines = err.stack.split('\n');
var msg = lines[0] + '<br/>',
stack = '<div class="stack">' + lines.slice(1).join('<br/>') + '</div>';
if (util.isUndef(msg)) msg = lines[0] + '<br/>';
var stack = '<div class="stack">' + lines.slice(1).join('<br/>') + '</div>';
return msg + stack;
}
function transMsg(msg)
{
if (util.isUndef(msg))
{
msg = 'undefined';
} else if (util.isFn(msg))
{
msg = msg.toString();
} else if (util.isArr(msg))
{
msg = JSON.stringify(msg);
} else if (util.isObj(msg))
{
msg = 'Object ' + JSON.stringify(msg);
}
return msg;
}
export default class Log
{
constructor($el)
@@ -19,6 +48,7 @@ export default class Log
this._$el = $el;
this._logs = [];
this._tpl = require('./Log.hbs');
this._filter = 'all';
}
overrideConsole()
{
@@ -28,6 +58,14 @@ export default class Log
{
self.log(msg);
};
window.console.error = (msg) =>
{
self.error(msg);
};
window.console.warn = (msg) =>
{
self.warn(msg);
};
return this;
}
@@ -48,20 +86,41 @@ export default class Log
this._render();
}
input(msg)
input(jsCode)
{
jsCode = util.trim(jsCode);
if (util.startWith(jsCode, ':'))
{
var cmd = jsCode.slice(1);
this._runCmd(cmd);
return this;
} else if (util.startWith(jsCode, '/'))
{
var regexp = util.trim(jsCode.slice(1));
return this.filter(new RegExp(regexp));
}
this._logs.push({
type: 'input',
val: msg
val: jsCode
});
try {
this.output(evalJs(jsCode));
} catch (e)
{
this.error(e);
}
this._render();
return this;
}
output(msg)
{
if (util.isUndef(msg)) msg = 'undefined';
msg = transMsg(msg);
this._logs.push({
type: 'output',
@@ -74,6 +133,8 @@ export default class Log
}
log(msg)
{
msg = transMsg(msg);
this._logs.push({
type: 'log',
val: msg
@@ -90,7 +151,7 @@ export default class Log
msg = errToStr(msg);
} else
{
msg = errToStr(new Error(), transMsg(msg));
}
this._logs.push({
@@ -102,14 +163,70 @@ export default class Log
return this;
}
warn(msg)
{
msg = transMsg(msg);
this._logs.push({
type: 'warn',
val: msg
});
this._render();
return this;
}
filter(type)
{
this._filter = type;
this._render();
}
help()
{
return this.log(helpMsg);
}
_runCmd(cmd)
{
cmd = util.trim(cmd);
switch (cmd)
{
case 'c': return this.clear();
case 'a': return this.filter('all');
case 'e': return this.filter('error');
case 'w': return this.filter('warn');
case 'l': return this.filter('log');
case 'h': return this.help();
default:
this.warn('Unknown command').help();
}
}
_render()
{
var logs = this._filterLogs(this._logs);
this._$el.html(this._tpl({
logs: this._logs
logs: logs
}));
this._scrollToBottom();
}
_filterLogs(logs)
{
var filter = this._filter;
if (filter === 'all') return logs;
var isRegexp = util.isRegExp(filter);
return util.filter(logs, (val) =>
{
if (isRegexp) return filter.test(val.val);
return val.type === filter;
});
}
_scrollToBottom()
{
var el = this._$el.get(0);

21
src/Console/Log.scss
View File

@@ -1,13 +1,29 @@
@import "../color";
#eruda { .dev-tools { .tools { .console {
.logs {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
font-size: 14px;
li {
padding: 10px;
overflow-x: scroll;
&.log, &.output {
border-bottom: 1px solid #b4b4b4;
}
&.log table {
width: 100%;
background: #fff;
border-collapse: collapse;
th {
background: $blue;
color: #fff;
}
th, td {
padding: 10px;
}
}
&.error {
background: #fff0f0;
color: #ff0000;
@@ -18,6 +34,11 @@
padding-left: 1.2em;
}
}
&.warn {
background: #fffbe6;
border-top: 1px solid #fff5c2;
border-bottom: 1px solid #fff5c2;
}
}
}
} } } }

9
src/Console/cmdList.json Normal file
View File

@@ -0,0 +1,9 @@
{
":c": "Clear console",
":a": "Show all logs",
":e": "Show error logs only",
":w": "Show warn logs only",
":l": "Show normal logs only",
":h": "Show help",
"/regexp": "Show logs that match given regexp"
}

16
src/Console/help.hbs Normal file
View File

@@ -0,0 +1,16 @@
<table>
<thead>
<tr>
<th>Command</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each commands}}
<tr>
<td>{{@key}}</td>
<td>{{this}}</td>
</tr>
{{/each}}
</tbody>
</table>

3
src/DevTools/DevTools.scss
View File

@@ -1,3 +1,5 @@
@import "../color";
#eruda {
.dev-tools {
position: absolute;
@@ -24,6 +26,7 @@
position: absolute;
left: 0;
top: 0;
background: $gray-light;
width: 100%;
height: 100%;
}

22
src/DevTools/HomeBtn.es6
View File

@@ -1,6 +1,5 @@
import util from '../util'
var Draggabilly = require('draggabilly');
import Draggabilly from 'draggabilly'
require('./HomeBtn.scss');
@@ -12,6 +11,7 @@ export default class HomeBtn
this._appendTpl();
this._makeDraggable();
this._setPos();
this._bindEvent();
util.Emitter.mixin(this);
@@ -24,9 +24,27 @@ export default class HomeBtn
this._$el = $parent.find('.home-btn');
}
_setPos()
{
var wh = window.innerHeight,
ww = window.innerWidth;
this._$el.css({
left: ww - 50,
top: wh - 50
});
}
_bindEvent()
{
this._draggabilly.on('staticClick', () => this.emit('click') );
window.addEventListener('orientationchange', () =>
{
setTimeout(() =>
{
this._setPos();
}, 150);
}, false);
}
_makeDraggable()
{

2
src/DevTools/HomeBtn.scss
View File

@@ -7,8 +7,6 @@
border-radius: 10px;
padding-top: 10px;
position: relative;
top: 200px;
left: 10px;
z-index: 1000;
transition: opacity .3s;
.circle {

2
src/DevTools/NavBar.es6
View File

@@ -18,7 +18,7 @@ export default class NavBar
this._len++;
this._$el.append('<li>' + name + '</li>')
.css({
width: this._len * 80
width: this._len * 69
});
}
activeTool(name)

17
src/DevTools/NavBar.scss
View File

@@ -1,26 +1,31 @@
@import "../color";
#eruda { .dev-tools {
.nav-bar {
height: 51px;
height: 50px;
overflow-y: scroll;
position: absolute;
width: 100%;
left: 0;
top: 0;
border-bottom: 1px solid #ccc;
z-index: 100;
background: $blue;
ul {
font-size: 0;
li {
display: inline-block;
height: 50px;
line-height: 50px;
width: 80px;
font-size: 15px;
width: 69px;
color: $gray-light;
font-size: 12px;
text-align: center;
opacity: 0.5;
text-transform: capitalize;
&.active {
color: #76a2ee;
border-bottom: 3px solid #76a2ee;
color: #fff;
opacity: 1;
border-bottom: 3px solid #fff;
}
}
}

3
src/color.scss Normal file
View File

@@ -0,0 +1,3 @@
$blue: #76a2ee;
$gray: #b4b4b4;
$gray-light: #f2f2f2;

5
src/index.es6
View File

@@ -34,7 +34,7 @@ if (isDebugMode)
.add(new Info())
.add(new Features())
.add(new Settings())
.showTool('resources')
.showTool('console')
.show();
}
@@ -49,6 +49,5 @@ export default {
{
return devTools.get(name);
}
}
;
};

2
src/style.scss
View File

@@ -7,7 +7,7 @@
height: 100%;
z-index: 100000;
transform : translate3d(0,0,0);
font-family: Lora, Times, serif;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
* {
box-sizing: border-box;
pointer-events: all;

61
src/util.js
View File

@@ -577,6 +577,22 @@ module.exports = (function ()
return isMatch;
})();
/* ------------------------------ isRegExp ------------------------------ */
var isRegExp;
_.isRegExp = (function ()
{
// TODO
isRegExp = function (value)
{
return objToStr(value) === '[object RegExp]';
};
return isRegExp;
})();
/* ------------------------------ ltrim ------------------------------ */
var ltrim;
@@ -707,6 +723,31 @@ module.exports = (function ()
return safeCb;
})();
/* ------------------------------ filter ------------------------------ */
var filter;
_.filter = (function ()
{
// TODO
filter = function (obj, predicate, ctx)
{
var ret = [];
predicate = safeCb(predicate, ctx);
each(obj, function (val, idx, list)
{
if (predicate(val, idx, list)) ret.push(val);
});
return ret;
};
return filter;
})();
/* ------------------------------ map ------------------------------ */
var map;
@@ -1781,6 +1822,26 @@ module.exports = (function ()
return rtrim;
})();
/* ------------------------------ startWith ------------------------------ */
var startWith;
_.startWith = (function ()
{
// TODO
/* function
* startWith: Checks if string starts with the given target string.
* string(string): The string to search.
* prefix(string): String prefix.
* return(boolean): Returns true if string starts with prefix, else false.
*/
startWith = function (str, prefix) { return str.indexOf(prefix) === 0 };
return startWith;
})();
/* ------------------------------ trim ------------------------------ */
var trim;