mirror of
https://github.com/liriliri/eruda.git
synced 2026-03-20 09:38:37 +08:00
Add: Sources code line number
This commit is contained in:
@@ -100,6 +100,13 @@ LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.
|
||||
|
||||
View json, html, js, css and http request detail.
|
||||
|
||||
### Config
|
||||
|
||||
|Name |Type |Desc |
|
||||
|-----------|-------|-----------------|
|
||||
|showLineNum|boolean|Show Line Numbers|
|
||||
|formatCode |boolean|Beautify Code |
|
||||
|
||||
## Info
|
||||
|
||||
Display special information, could be used for displaying user info to track
|
||||
|
||||
@@ -275,7 +275,7 @@ export default class Resources extends Tool
|
||||
}
|
||||
_initConfig()
|
||||
{
|
||||
var cfg = this.config = config.create('eruda-resources');
|
||||
let cfg = this.config = config.create('eruda-resources');
|
||||
|
||||
cfg.set(util.defaults(cfg.get(), {
|
||||
hideErudaSetting: true
|
||||
|
||||
@@ -3,6 +3,7 @@ import util from '../lib/util'
|
||||
import beautify from 'js-beautify'
|
||||
import highlight from '../lib/highlight.es6'
|
||||
import JsonViewer from '../lib/JsonViewer.es6'
|
||||
import config from '../lib/config.es6'
|
||||
|
||||
export default class Sources extends Tool
|
||||
{
|
||||
@@ -13,6 +14,8 @@ export default class Sources extends Tool
|
||||
util.evalCss(require('./Sources.scss'));
|
||||
|
||||
this.name = 'sources';
|
||||
this._showLineNum = true;
|
||||
this._formatCode = true;
|
||||
|
||||
this._loadTpl();
|
||||
}
|
||||
@@ -22,6 +25,7 @@ export default class Sources extends Tool
|
||||
|
||||
this._parent = parent;
|
||||
this._bindEvent();
|
||||
this._initConfig();
|
||||
}
|
||||
set(type, val)
|
||||
{
|
||||
@@ -29,9 +33,9 @@ export default class Sources extends Tool
|
||||
{
|
||||
this._isFetchingData = true;
|
||||
|
||||
var img = new Image();
|
||||
let img = new Image();
|
||||
|
||||
var self = this;
|
||||
let self = this;
|
||||
|
||||
img.onload = function ()
|
||||
{
|
||||
@@ -110,7 +114,7 @@ export default class Sources extends Tool
|
||||
|
||||
this._$el.on('click', '.eruda-http .eruda-response', () =>
|
||||
{
|
||||
var data = this._data.val,
|
||||
let data = this._data.val,
|
||||
resTxt = data.resTxt;
|
||||
|
||||
switch (data.subType)
|
||||
@@ -135,11 +139,38 @@ export default class Sources extends Tool
|
||||
this._rawTpl = require('./raw.hbs');
|
||||
this._iframeTpl = require('./iframe.hbs');
|
||||
}
|
||||
_initConfig()
|
||||
{
|
||||
let cfg = this.config = config.create('eruda-sources');
|
||||
|
||||
cfg.set(util.defaults(cfg.get(), {
|
||||
'showLineNum': true,
|
||||
'formatCode': true
|
||||
}));
|
||||
|
||||
if (!cfg.get('showLineNum')) this._showLineNum = false;
|
||||
if (!cfg.get('formatCode')) this._formatCode = false;
|
||||
|
||||
cfg.on('change', (key, val) =>
|
||||
{
|
||||
switch (key)
|
||||
{
|
||||
case 'showLineNum': this._showLineNum = val; return;
|
||||
case 'formatCode': this._formatCode = val; return;
|
||||
}
|
||||
});
|
||||
|
||||
var settings = this._parent.get('settings');
|
||||
settings.text('Sources')
|
||||
.switch(cfg, 'showLineNum', 'Show Line Numbers')
|
||||
.switch(cfg, 'formatCode', 'Beautify Code')
|
||||
.separator();
|
||||
}
|
||||
_render()
|
||||
{
|
||||
this._isInit = true;
|
||||
|
||||
var data = this._data;
|
||||
let data = this._data;
|
||||
|
||||
switch (data.type)
|
||||
{
|
||||
@@ -165,7 +196,7 @@ export default class Sources extends Tool
|
||||
}
|
||||
_renderHttp()
|
||||
{
|
||||
var val = this._data.val;
|
||||
let val = this._data.val;
|
||||
|
||||
if (val.resTxt.trim() === '') delete val.resTxt;
|
||||
if (util.isEmpty(val.resHeaders)) delete val.resHeaders;
|
||||
@@ -174,12 +205,12 @@ export default class Sources extends Tool
|
||||
}
|
||||
_renderCode()
|
||||
{
|
||||
var data = this._data;
|
||||
let data = this._data;
|
||||
|
||||
var code = data.val;
|
||||
let code = data.val;
|
||||
|
||||
// If source code too big, don't process it.
|
||||
if (data.val.length < 100000)
|
||||
if (data.val.length < 100000 && this._formatCode)
|
||||
{
|
||||
switch (data.type)
|
||||
{
|
||||
@@ -200,16 +231,30 @@ export default class Sources extends Tool
|
||||
code = util.escape(code);
|
||||
}
|
||||
|
||||
this._renderHtml(this._codeTpl({code: code}));
|
||||
if (this._showLineNum)
|
||||
{
|
||||
code = code.split('\n').map(line =>
|
||||
{
|
||||
if (util.trim(line) === '') return ' ';
|
||||
|
||||
return line;
|
||||
});
|
||||
}
|
||||
|
||||
this._renderHtml(this._codeTpl({
|
||||
code,
|
||||
showLineNum: this._showLineNum
|
||||
}));
|
||||
}
|
||||
_renderJson()
|
||||
{
|
||||
// Using cache will keep binding json events to the same elements.
|
||||
this._renderHtml(this._jsonTpl(), false);
|
||||
|
||||
var val = this._data.val;
|
||||
let val = this._data.val;
|
||||
|
||||
try {
|
||||
try
|
||||
{
|
||||
if (util.isStr(val)) val = JSON.parse(val);
|
||||
/* eslint-disable no-empty */
|
||||
} catch (e) {}
|
||||
|
||||
@@ -4,16 +4,37 @@
|
||||
.dev-tools { .tools {
|
||||
.sources {
|
||||
@include overflow-auto(y);
|
||||
.code, .raw {
|
||||
.code-wrapper, .raw-wrapper {
|
||||
@include overflow-auto(x);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: $padding;
|
||||
min-height: 100%;
|
||||
}
|
||||
.raw {
|
||||
padding: $padding;
|
||||
}
|
||||
.code {
|
||||
font-family: $font-family-code;
|
||||
font-size: $font-size-s;
|
||||
}
|
||||
pre.code {
|
||||
padding: $padding;
|
||||
}
|
||||
table.code {
|
||||
border-collapse: collapse;
|
||||
.gutter {
|
||||
background: $gray-light;
|
||||
color: $gray;
|
||||
}
|
||||
.line-num {
|
||||
border-right: 1px solid $gray;
|
||||
padding: 0 3px 0 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.code-line {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
.breadcrumb {
|
||||
@include breadcrumb();
|
||||
|
||||
@@ -1 +1,24 @@
|
||||
{{#if showLineNum}}
|
||||
<div class="eruda-code-wrapper">
|
||||
<table class="eruda-code">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="eruda-gutter">
|
||||
{{#each code}}
|
||||
<div class="eruda-line-num">{{@key}}</div>
|
||||
{{/each}}
|
||||
</td>
|
||||
<td class="eruda-content">
|
||||
{{#each code}}
|
||||
<pre class="eruda-code-line">{{{.}}}</pre>
|
||||
{{/each}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="eruda-code-wrapper">
|
||||
<pre class="eruda-code">{{{code}}}</pre>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
<div class="eruda-raw-wrapper">
|
||||
<div class="eruda-raw">{{val}}</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,6 @@ export default function getAbstract(obj, {
|
||||
doStringify = level === 0;
|
||||
|
||||
let keyWrapper = '<span style="color: #a71d5d;">',
|
||||
fnWrapper = '<span style="color: #a71d5d;">',
|
||||
numWrapper = '<span style="color: #0086b3;">',
|
||||
nullWrapper = '<span style="color: #0086b3;">',
|
||||
strWrapper = '<span style="color: #183691;">',
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
pointer-events: all;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
Reference in New Issue
Block a user