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

Dev: Json highlight

Browse Source
This commit is contained in:
surunzi
2016-08-27 14:51:52 +08:00
parent 249017620f
commit 52264f052a
4 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Console/Log.es6
View File

@@ -179,6 +179,7 @@ function stringifyWrapper(obj, options = {})
simple: true, simple: true,
highlight: true, highlight: true,
keyQuotes: false, keyQuotes: false,
specialVal: true,
getterVal: Log.showGetterVal, getterVal: Log.showGetterVal,
unenumerable: Log.showUnenumerable unenumerable: Log.showUnenumerable
}); });
@@ -410,7 +411,8 @@ function extractObj(obj, options = {})
{ {
util.defaults(options, { util.defaults(options, {
highlight: false, highlight: false,
keyQuotes: true keyQuotes: true,
specialVal: false
}); });
return JSON.parse(stringifyWrapper(obj, options)); return JSON.parse(stringifyWrapper(obj, options));

9
src/lib/JsonViewer.es6
View File

@@ -101,20 +101,13 @@ function createEl(key, val, firstLevel)
<span class="eruda-function">${val.length > 250 ? encode(val) : highlight(val, 'js')}</span> <span class="eruda-function">${val.length > 250 ? encode(val) : highlight(val, 'js')}</span>
</li>`; </li>`;
} }
if (val === '(...)' || val === '[circular]') if (val === '(...)' || val === '[circular]' || val === 'undefined' || val === 'Symbol')
{ {
return `<li> return `<li>
<span class="eruda-key">${encode(key)}: </span> <span class="eruda-key">${encode(key)}: </span>
<span class="eruda-special">${val}</span> <span class="eruda-special">${val}</span>
</li>`; </li>`;
} }
if (val === 'undefined')
{
return `<li>
<span class="eruda-key">${encode(key)}: </span>
<span class="eruda-undefined">undefined</span>
</li>`;
}
return `<li> return `<li>
<span class="eruda-key">${encode(key)}: </span> <span class="eruda-key">${encode(key)}: </span>

2
src/lib/json.scss
View File

@@ -40,7 +40,7 @@
.boolean { .boolean {
color: #0086b3; color: #0086b3;
} }
.special, .undefined { .special {
color: $gray; color: $gray;
} }
.key { .key {

60
src/lib/stringify.es6
View File

@@ -8,6 +8,7 @@ export default function stringify(obj, {
keyQuotes = true, keyQuotes = true,
getterVal = false, getterVal = false,
highlight = false, highlight = false,
specialVal = false,
unenumerable = true unenumerable = true
} = {}) } = {})
{ {
@@ -26,26 +27,47 @@ export default function stringify(obj, {
strWrapper = '', strWrapper = '',
nullWrapper = '', nullWrapper = '',
boolWrapper = '', boolWrapper = '',
specialWrapper = '',
fnWrapper = '',
strEscape = str => str, strEscape = str => str,
wrapperEnd = ''; wrapperEnd = '';
if (highlight) if (highlight)
{ {
keyWrapper = '<span style="color: #a71d5d;">'; keyWrapper = '<span style="color: #a71d5d;">';
fnWrapper = '<span style="color: #a71d5d;">';
numWrapper = '<span style="color: #0086b3;">'; numWrapper = '<span style="color: #0086b3;">';
nullWrapper = '<span style="color: #0086b3;">'; nullWrapper = '<span style="color: #0086b3;">';
strWrapper = '<span style="color: #183691;">'; strWrapper = '<span style="color: #183691;">';
boolWrapper = '<span style="color: #0086b3;">'; boolWrapper = '<span style="color: #0086b3;">';
specialWrapper = '<span style="color: #707d8b;">';
strEscape = str => util.escape(str); strEscape = str => util.escape(str);
wrapperEnd = '</span>' wrapperEnd = '</span>';
} }
let wrapKey = key => keyWrapper + dbQuotes + strEscape(key) + dbQuotes + wrapperEnd, let wrapKey = key => keyWrapper + dbQuotes + strEscape(key) + dbQuotes + wrapperEnd,
wrapNum = num => numWrapper + num + wrapperEnd, wrapNum = num => numWrapper + num + wrapperEnd,
wrapStr = str => strWrapper + strEscape(str) + wrapperEnd,
wrapBool = bool => boolWrapper + bool + wrapperEnd, wrapBool = bool => boolWrapper + bool + wrapperEnd,
wrapNull = str => nullWrapper + str + wrapperEnd; wrapNull = str => nullWrapper + str + wrapperEnd;
function wrapStr(str)
{
str = util.toStr(str);
if (specialVal)
{
if (util.startWith(str, 'function'))
{
return fnWrapper + 'function' + wrapperEnd + ' ( )';
}
if (str === '(...)' || str === '[circular]' || str === 'undefined' || str === 'Symbol')
{
return specialWrapper + strEscape(str) + wrapperEnd;
}
}
return strWrapper + strEscape(`"${str}"`) + wrapperEnd;
}
try { try {
type = ({}).toString.call(obj); type = ({}).toString.call(obj);
} catch (e) } catch (e)
@@ -72,16 +94,16 @@ export default function stringify(obj, {
if (circular) if (circular)
{ {
json = wrapStr('"[circular]"'); json = wrapStr('[circular]');
} else if (isStr) } else if (isStr)
{ {
json = wrapStr(`"${escapeJsonStr(obj)}"`); json = wrapStr(escapeJsonStr(obj));
} else if (isArr) } else if (isArr)
{ {
visited.push(obj); visited.push(obj);
json = '['; json = '[';
util.each(obj, val => parts.push(`${stringify(val, {visited, simple, getterVal, keyQuotes, highlight, unenumerable})}`)); util.each(obj, val => parts.push(`${stringify(val, {visited, specialVal, simple, getterVal, keyQuotes, highlight, unenumerable})}`));
json += parts.join(', ') + ']'; json += parts.join(', ') + ']';
} else if (isObj || isFn) } else if (isObj || isFn)
{ {
@@ -90,7 +112,7 @@ export default function stringify(obj, {
names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj); names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
proto = Object.getPrototypeOf(obj); proto = Object.getPrototypeOf(obj);
if (proto === Object.prototype || isFn || simple) proto = null; if (proto === Object.prototype || isFn || simple) proto = null;
if (proto) proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, getterVal, topObj, keyQuotes, highlight, unenumerable})}`; if (proto) proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, specialVal, getterVal, topObj, keyQuotes, highlight, unenumerable})}`;
names.sort(sortObjName); names.sort(sortObjName);
if (isFn) if (isFn)
{ {
@@ -99,16 +121,16 @@ export default function stringify(obj, {
} }
if (names.length === 0 && isFn) if (names.length === 0 && isFn)
{ {
json = wrapStr(`"${escapeJsonStr(obj.toString())}"`); json = wrapStr(escapeJsonStr(obj.toString()));
} else } else
{ {
json = '{'; json = '{ ';
if (isFn) if (isFn)
{ {
// Function length is restricted to 500 for performance reason. // Function length is restricted to 500 for performance reason.
var fnStr = obj.toString(); var fnStr = obj.toString();
if (fnStr.length > 500) fnStr = fnStr.slice(0, 500) + '...'; if (fnStr.length > 500) fnStr = fnStr.slice(0, 500) + '...';
parts.push(`${wrapKey('erudaObjAbstract')}: ${wrapStr('"' + escapeJsonStr(fnStr) + '"')}`); parts.push(`${wrapKey('erudaObjAbstract')}: ${wrapStr(escapeJsonStr(fnStr))}`);
} }
util.each(names, name => util.each(names, name =>
{ {
@@ -122,10 +144,10 @@ export default function stringify(obj, {
return parts.push(`${key}: "(...)"`); return parts.push(`${key}: "(...)"`);
} }
} }
parts.push(`${key}: ${stringify(topObj[name], {visited, getterVal, simple, keyQuotes, highlight, unenumerable})}`); parts.push(`${key}: ${stringify(topObj[name], {visited, specialVal, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
}); });
if (proto) parts.push(proto); if (proto) parts.push(proto);
json += parts.join(', ') + '}'; json += parts.join(', ') + ' }';
} }
} else if (isNum) } else if (isNum)
{ {
@@ -145,10 +167,10 @@ export default function stringify(obj, {
json = wrapNull('null'); json = wrapNull('null');
} else if (isSymbol) } else if (isSymbol)
{ {
json = wrapStr('"Symbol"'); json = wrapStr('Symbol');
} else if (obj === undefined) } else if (obj === undefined)
{ {
json = wrapStr('"undefined"'); json = wrapStr('undefined');
} else if (type === '[object HTMLAllCollection]') } else if (type === '[object HTMLAllCollection]')
{ {
// https://docs.webplatform.org/wiki/dom/HTMLAllCollection // https://docs.webplatform.org/wiki/dom/HTMLAllCollection
@@ -160,7 +182,7 @@ export default function stringify(obj, {
{ {
visited.push(obj); visited.push(obj);
json = '{\n'; json = '{ ';
if (!simple) parts.push(`${wrapKey('erudaObjAbstract')}: "${type.replace(/(\[object )|]/g, '')}"`); if (!simple) parts.push(`${wrapKey('erudaObjAbstract')}: "${type.replace(/(\[object )|]/g, '')}"`);
names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj); names = unenumerable ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
proto = Object.getPrototypeOf(obj); proto = Object.getPrototypeOf(obj);
@@ -169,10 +191,10 @@ export default function stringify(obj, {
{ {
try try
{ {
proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, topObj, getterVal, keyQuotes, highlight, unenumerable})}`; proto = `${wrapKey('erudaProto')}: ${stringify(proto, {visited, specialVal, topObj, getterVal, keyQuotes, highlight, unenumerable})}`;
} catch(e) } catch(e)
{ {
proto = `${wrapKey('erudaProto')}: ${wrapStr('"' + escapeJsonStr(e.message) + '"')}`; proto = `${wrapKey('erudaProto')}: ${wrapStr(escapeJsonStr(e.message))}`;
} }
} }
names.sort(sortObjName); names.sort(sortObjName);
@@ -188,12 +210,12 @@ export default function stringify(obj, {
return parts.push(`${key}: "(...)"`); return parts.push(`${key}: "(...)"`);
} }
} }
parts.push(`${key}: ${stringify(topObj[name], {visited, getterVal, simple, keyQuotes, highlight, unenumerable})}`); parts.push(`${key}: ${stringify(topObj[name], {visited, specialVal, getterVal, simple, keyQuotes, highlight, unenumerable})}`);
}); });
if (proto) parts.push(proto); if (proto) parts.push(proto);
json += parts.join(',\n') + '\n}'; json += parts.join(',\n') + ' }';
} catch (e) { } catch (e) {
json = wrapStr(`"${obj}"`); json = wrapStr(obj);
} }
} }