Socket
Socket
Sign inDemoInstall

vconsole

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vconsole - npm Package Compare versions

Comparing version 3.8.1 to 3.9.0

src/components/Button/index.ts
src/components/Button/Template.svelte
src/components/Storage/index.ts
src/components/Storage/Template.svelte
src/components/Storage/utils.ts
src/components/Tab/index.ts
src/components/Tab/Tab.svelte
src/components/Tab/TabList.svelte
src/components/Tab/TabPanel.svelte
src/components/Tab/Tabs.svelte
src/core/core.ts
src/element/element.ts
src/element/node_view.ts
src/lib/cookiesStorage.ts
src/lib/sveltePlugin.ts
src/styles/size.less
src/vconsole.ts

15

CHANGELOG_CN.md
[English](./CHANGELOG.md) | 简体中文
#### 3.9.0 (2021-07-16)
- `Feat(Log)` 显示 audio 资源加载失败的报错。 (PR #419 by @zimv)
- `Feat(Storage)` 重写 Storage 面板，现支持添加/编辑/删除内容。 (PR #429 by @ManiaciaChao)
- `Feat(Plugin)` 新增第三方插件 [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)。 (by @vadxq)
- `Refactor(Global)` 开始使用 Svelte 作为模板引擎。 (PR #429 by @ManiaciaChao)
- `Refactor(Core|Element)` 转换 core 文件及 Element 面板为 `.ts` 文件。
- `Fix(Log)` 修复打印无 `toJSON` 方法的对象（如 `Vue` 实例）时会报错的问题。 (PR #431 by @sillyhong)
- `Fix(Network)` 修复不以 `http` 开头的 url 会报错的问题。 (issue #420)
- `Fix(Network)` 修复使用 `Request` 作为 `Fetch` 参数时的报错。 (PR #428 by @tatsunoneko)
- `Fix(Network)` 当 `POST` 数据为一个 JSON 字符串时亦以 key-value 型键值表来显示数据。 (issue #425)
- `style` 修正 LESS 数学运算符。 (PR #426 by @ManiaciaChao)
- `Chore` 修复执行 `yarn serve` 的报错。 (issue #424)
#### 3.8.1 (2021-06-24)

@@ -4,0 +19,0 @@

15

CHANGELOG.md
English | [简体中文](./CHANGELOG_CN.md)
#### 3.9.0 (2021-07-16)
- `Feat(Log)` Show audio loading error log. (PR #419 by @zimv)
- `Feat(Storage)` Rewrite Storage panel, supports add/edit/delete storage items. (PR #429 by @ManiaciaChao)
- `Feat(Plugin)` New third-party plugin [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole). (by @vadxq)
- `Refactor(Global)` Use Svelte as template engine. (PR #429 by @ManiaciaChao)
- `Refactor(Core|Element)` Convert core file and Element panel to `.ts` file.
- `Fix(Log)` Fix error when print object(s) with no `toJSON` method such as `Vue` instance. (PR #431 by @sillyhong)
- `Fix(Network)` Fix error when url not starts with `http`. (issue #420)
- `Fix(Network)` Fix error when using `Request` as `Fetch`'s parameter. (PR #428 by @tatsunoneko)
- `Fix(Network)` Display formatted key-value list when `POST` a JSON string. (issue #425)
- `style` Wrap LESS math operations. (PR #426 by @ManiaciaChao)
- `Chore` Fix `yarn serve` error. (issue #424)
#### 3.8.1 (2021-06-24)

@@ -4,0 +19,0 @@

14

package.json
{
"name": "vconsole",
"version": "3.8.1",
"version": "3.9.0",
"description": "A lightweight, extendable front-end developer tool for mobile web page.",

@@ -11,2 +11,3 @@ "homepage": "https://github.com/Tencent/vConsole",

"dev": "webpack --mode=development",
"watch": "webpack watch --mode=development",
"serve": "webpack serve --config webpack.serve.config"

@@ -24,5 +25,8 @@ },

"dependencies": {
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"cookie-storage": "^6.1.0",
"copy-text-to-clipboard": "^3.0.1",
"core-js": "^3.11.0",
"mutation-observer": "^1.0.3"
"mutation-observer": "^1.0.3",
"svelte-fa": "^2.2.1"
},

@@ -47,3 +51,7 @@ "devDependencies": {

"style-loader": "^2.0.0",
"webpack": "^5.37.0",
"svelte": "^3.38.3",
"svelte-loader": "^3.1.2",
"svelte-preprocess": "^4.7.4",
"typescript": "^4.3.5",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.0",

@@ -50,0 +58,0 @@ "webpack-dev-server": "^3.11.2",

1

README_CN.md

@@ -91,2 +91,3 @@ [English](./README.md) | 简体中文

- [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin)
- [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)

@@ -93,0 +94,0 @@ ## 更新记录

1

README.md

@@ -86,2 +86,3 @@ English | [简体中文](./README_CN.md)

- [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin)
- [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole)

@@ -88,0 +89,0 @@ ## Changelog

19

src/lib/tool.ts

@@ -155,5 +155,5 @@ /*

*/
export function JSONStringify(stringObject) {
export function SimpleJSONStringify(stringObject) {
if (!isObject(stringObject) && !isArray(stringObject)) {
return JSON.stringify(stringObject);
return JSONStringify(stringObject);
}

@@ -188,3 +188,3 @@

} else {
str += JSON.stringify(value);
str += JSONStringify(value);
}

@@ -202,2 +202,15 @@ if (i < keys.length - 1) {

/**
* rewrite JSON.stringify, catch unknown exception
*/
export function JSONStringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number) {
let stringifyResult: string;
try {
stringifyResult = JSON.stringify(value, replacer, space);
} catch (err) {
stringifyResult = getPrototypeName(value);
}
return stringifyResult;
}
export function getStringBytes(str: string) {

@@ -204,0 +217,0 @@ try {

2

src/log/default.ts

@@ -301,3 +301,3 @@ /*

// only catch resources error
if (['link', 'video', 'script', 'img'].indexOf(target.localName) > -1) {
if (['link', 'video', 'script', 'img', 'audio'].indexOf(target.localName) > -1) {
const src = target.href || target.src || target.currentSrc;

@@ -304,0 +304,0 @@ that.printLog({

6

src/log/log.ts

@@ -433,3 +433,3 @@ /*

} else if (tool.isObject(logs[i]) || tool.isArray(logs[i])) {
logText.push(tool.JSONStringify(logs[i]));
logText.push(tool.SimpleJSONStringify(logs[i]));
curLog.hasFold = true;

@@ -545,3 +545,3 @@ } else {

// object or array
rawLog = JSON.stringify(curLog, tool.circularReplacer(), 2)
rawLog = tool.JSONStringify(curLog, tool.circularReplacer(), 2)
log = this.getFoldedLine(curLog);

@@ -599,3 +599,3 @@ } else {

if (!outer) {
const json = tool.JSONStringify(obj);
const json = tool.SimpleJSONStringify(obj);
let preview = json.substr(0, 36);

@@ -602,0 +602,0 @@ outer = tool.getObjName(obj);

30

src/network/network.ts

@@ -346,3 +346,3 @@ /*

item.response = JSON.parse(XMLReq.response);
item.response = JSON.stringify(item.response, null, 1);
item.response = tool.JSONStringify(item.response, null, 1);
} catch (e) {

@@ -359,3 +359,3 @@ // not a JSON string

if (typeof XMLReq.response !== 'undefined') {
item.response = JSON.stringify(XMLReq.response, null, 1);
item.response = tool.JSONStringify(XMLReq.response, null, 1);
}

@@ -437,7 +437,11 @@ break;

if (tool.isString(data)) {
const arr = data.split('&');
item.postData = {};
for (let q of arr) {
q = q.split('=');
item.postData[ q[0] ] = q[1];
try { // '{a:1}' => try to parse as json
item.postData = JSON.parse(data);
} catch (e) { // 'a=1&b=2' => try to parse as query
const arr = data.split('&');
item.postData = {};
for (let q of arr) {
q = q.split('=');
item.postData[ q[0] ] = q[1];
}
}

@@ -530,3 +534,5 @@ } else if (tool.isPlainObject(data)) {

return _fetch(url.toString(), init).then((response) => {
const request = tool.isString(input) ? url.toString() : input;
return _fetch(request, init).then((response) => {
_fetchReponse = response;

@@ -565,3 +571,3 @@

item.response = JSON.parse(responseBody);
item.response = JSON.stringify(item.response, null, 1);
item.response = tool.JSONStringify(item.response, null, 1);
} catch (e) {

@@ -680,6 +686,6 @@ // not real JSON, use 'text' as default type

if (urlString.startsWith('//')) {
const baseUrl = new URL(window.location.href)
urlString = `${baseUrl.protocol}${urlString}`
const baseUrl = new URL(window.location.href);
urlString = `${baseUrl.protocol}${urlString}`;
}
if (urlString.includes('http')) {
if (urlString.startsWith('http')) {
return new URL(urlString);

@@ -686,0 +692,0 @@ } else {

480

src/storage/storage.ts

@@ -1,475 +0,7 @@

/*
Tencent is pleased to support the open source community by making vConsole available.
Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://opensource.org/licenses/MIT
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
/**
* vConsole Storage Plugin
*/
import VConsolePlugin from '../lib/plugin';
import tplTabbox from './tabbox.html';
import tplList from './list.html';
import tplItem from './item.html';
import VConsoleItemCopy from '../component/item_copy';
import * as tool from '../lib/tool';
import $ from '../lib/query';
declare type VConsoleStorageType = 'cookies' | 'localstorage' | 'sessionstorage';
declare interface VConsoleStorageRawItem {
name: string;
value: string;
import VConsoleSveltePlugin from '../lib/sveltePlugin';
import { StorageTab } from '../components/Storage';
export default class VConsoleStorageTab extends VConsoleSveltePlugin {
constructor(id: string, name: string, renderProps = { propA: 1 }) {
super(id, name, StorageTab, renderProps);
}
}
declare interface VConsoleStorageItem extends VConsoleStorageRawItem {
id: string;
previewValue: string;
showPreview: boolean;
bytes: number;
bytesText: string;
}
class VConsoleStorageTab extends VConsolePlugin {
protected list: VConsoleStorageItem[] = [];
protected $domList: { [id: string]: Element } = {};
private $tabbox: Element = $.render(tplTabbox, {});
private currentType: '' | VConsoleStorageType = '';
private typeNameMap = {
'cookies': 'Cookies',
'localstorage': 'LocalStorage',
'sessionstorage': 'SessionStorage'
};
onRenderTab(callback) {
callback(this.$tabbox);
}
onAddTopBar(callback) {
const that = this;
const types = Object.values(this.typeNameMap); // ['Cookies', 'LocalStorage', 'SessionStorage'];
const btnList: Array<{name: string, data: {}, className: string, onClick: Function}> = [];
for (let i = 0; i < types.length; i++) {
btnList.push({
name: types[i],
data: {
type: types[i].toLowerCase()
},
className: '',
onClick: function() {
if (!$.hasClass(this, 'vc-actived')) {
that.currentType = this.dataset.type;
that.renderStorage();
} else {
return false;
}
}
});
}
btnList[0].className = 'vc-actived';
callback(btnList);
}
onAddTool(callback) {
const that = this;
const toolList = [{
name: 'Refresh',
global: false,
onClick: function(e) {
that.renderStorage();
}
}, {
name: 'ClearAll',
global: false,
onClick: function(e) {
that.clearLog();
}
}];
callback(toolList);
}
onReady() {
// copy
VConsoleItemCopy.delegate(this.$tabbox, (id: string) => {
let text = null;
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === id) {
text = this.list[i].name + '=' + this.list[i].value;
break;
}
}
return text;
});
// delete
$.delegate(this.$tabbox, 'click', '.vc-item-delete', (e) => {
const { id } = (<Element>e.target).closest('.vc-item-id');
const item = this.getListItem(id);
if (!item || !window.confirm) { return; }
if (!window.confirm(`Delete this record?`)) { return; }
const result = this.deleteItem(item.name);
if (!result) { return; }
const $dom = this.$domList[id];
$dom.parentElement.removeChild($dom);
delete this.$domList[id];
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === id) {
this.list.splice(i, 1);
break;
}
}
});
// show more
$.delegate(this.$tabbox, 'click', '.vc-item-showmore', (e) => {
const { id } = (<Element>e.target).closest('.vc-item-id');
let item: VConsoleStorageItem;
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === id) {
item = this.list[i];
break;
}
}
if (!item) { return; }
item.showPreview = false;
item.value = this.getItemValue(item.name);
const $dom = $.render(tplItem, {
item: item,
btnCopy: VConsoleItemCopy.html,
});
this.$domList[id].replaceWith($dom);
this.$domList[id] = $dom;
});
}
onShow() {
// show default panel
if (this.currentType === '') {
this.currentType = 'cookies';
this.renderStorage();
}
}
clearLog() {
if (this.currentType && window.confirm) {
const result = window.confirm(`Delete all ${this.typeNameMap[this.currentType]}?`);
if (!result) {
return false;
}
}
switch (this.currentType) {
case 'cookies':
this.clearCookieList();
break;
case 'localstorage':
this.clearLocalStorageList();
break;
case 'sessionstorage':
this.clearSessionStorageList();
break;
default:
return false;
}
this.renderStorage();
}
renderStorage() {
const PREVIEW_LIMIT = 1024 * 1; // KB
let list: VConsoleStorageRawItem[] = [];
const $log = $.one('.vc-log', this.$tabbox);
$.removeChildren($log);
this.list = [];
this.$domList = {};
switch (this.currentType) {
case 'cookies':
list = this.getCookieList();
break;
case 'localstorage':
list = this.getLocalStorageList();
break;
case 'sessionstorage':
list = this.getSessionStorageList();
break;
default:
return false;
}
if (list.length > 0) {
const $table = $.render(tplList, {});
const $list = $.one('.vc-storage-list', $table);
for (let i = 0; i < list.length; i++) {
const bytes = tool.getStringBytes(list[i].value);
const id = this.getUniqueID();
const item: VConsoleStorageItem = {
id: id,
name: list[i].name,
value: '', // do not keep raw value to save memory
previewValue: '',
showPreview: false,
bytes: bytes,
bytesText: tool.getBytesText(bytes),
};
if (item.bytes > PREVIEW_LIMIT) {
item.previewValue = tool.subString(list[i].value, PREVIEW_LIMIT);
item.showPreview = true;
} else {
item.value = list[i].value;
}
this.list.push(item);
const $dom = $.render(tplItem, {
item: item,
btnCopy: VConsoleItemCopy.html,
});
this.$domList[id] = $dom;
$list.appendChild($dom);
}
$log.appendChild($table);
}
}
getItemValue(key: string) {
switch (this.currentType) {
case 'cookies':
return this.getCookieValue(key);
break;
case 'localstorage':
return this.getLocalStorageValue(key);
break;
case 'sessionstorage':
return this.getSessionStorageValue(key);
break;
default:
return '';
}
}
private deleteItem(key: string) {
switch (this.currentType) {
case 'cookies':
return this.deleteCookie(key);
case 'localstorage':
return this.deleteLocalStorage(key);
case 'sessionstorage':
return this.deleteSessionStorage(key);
}
return false;
}
deleteCookie(key: string) {
if (!document.cookie || !navigator.cookieEnabled) {
return false;
}
const uris = window.location.hostname.split('.');
document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
let uri = '.' + uris[uris.length - 1];
for (let j = uris.length - 2; j >= 0; j--) {
uri = '.' + uris[j] + uri;
document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=${uri};`;
}
return true;
}
getCookieValue(key: string) {
if (!document.cookie || !navigator.cookieEnabled) {
return '';
}
const items = document.cookie.split(';');
for (let i=0; i<items.length; i++) {
let item = items[i].split('=');
let name = item.shift().replace(/^ /, ''),
value = item.join('=');
try {
name = decodeURIComponent(name);
value = decodeURIComponent(value);
} catch(e) {
}
if (name === key) {
return value;
}
}
return '';
}
getCookieList() {
if (!document.cookie || !navigator.cookieEnabled) {
return [];
}
let list: VConsoleStorageRawItem[] = [];
let items = document.cookie.split(';');
for (let i=0; i<items.length; i++) {
let item = items[i].split('=');
let name = item.shift().replace(/^ /, ''),
value = item.join('=');
try {
name = decodeURIComponent(name);
value = decodeURIComponent(value);
} catch(e) {
// do not print external input directly to prevent forgery (issue #345)
// console.log(e, name, value);
}
list.push({
name: name,
value: value
});
}
return list;
}
deleteLocalStorage(key: string) {
if (!window.localStorage) { return false; }
try {
localStorage.removeItem(key);
return true;
} catch (e) {
return false;
}
}
getLocalStorageValue(key: string) {
if (!window.localStorage) {
return '';
}
try {
return localStorage.getItem(key);
} catch (e) {
return '';
}
}
getLocalStorageList() {
if (!window.localStorage) {
return [];
}
try {
let list: VConsoleStorageRawItem[] = []
for (var i = 0; i < localStorage.length; i++) {
let name = localStorage.key(i),
value = localStorage.getItem(name);
list.push({
name: name,
value: value
});
}
return list;
} catch (e) {
return [];
}
}
deleteSessionStorage(key: string) {
if (!window.sessionStorage) { return false; }
try {
sessionStorage.removeItem(key);
return true;
} catch (e) {
return false;
}
}
getSessionStorageValue(key: string) {
if (!window.sessionStorage) {
return '';
}
try {
return sessionStorage.getItem(key);
} catch (e) {
return '';
}
}
getSessionStorageList() {
if (!window.sessionStorage) {
return [];
}
try {
let list: VConsoleStorageRawItem[] = []
for (var i = 0; i < sessionStorage.length; i++) {
let name = sessionStorage.key(i),
value = sessionStorage.getItem(name);
list.push({
name: name,
value: value
});
}
return list;
} catch (e) {
return [];
}
}
clearCookieList() {
if (!document.cookie || !navigator.cookieEnabled) {
return;
}
const uris = window.location.hostname.split('.');
let list = this.getCookieList();
for (var i=0; i<list.length; i++) {
let name = list[i].name;
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
let uri = '.' + uris[uris.length - 1];
for (let j = uris.length - 2; j >= 0; j--) {
uri = '.' + uris[j] + uri;
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=${uri};`;
}
}
this.renderStorage();
}
clearLocalStorageList() {
if (!!window.localStorage) {
try {
localStorage.clear();
this.renderStorage();
} catch (e) {
alert('localStorage.clear() fail.');
}
}
}
clearSessionStorageList() {
if (!!window.sessionStorage) {
try {
sessionStorage.clear();
this.renderStorage();
} catch (e) {
alert('sessionStorage.clear() fail.');
}
}
}
private getListItem(id: string) {
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === id) {
return this.list[i];
}
}
return null;
}
} // END Class
export default VConsoleStorageTab;

31

tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": false,
"module": "UMD",
"target": "ES5",
"compilerOptions": {
"moduleResolution": "node",
"allowJs": true,
"moduleResolution": "node",
}
"target": "es2018",
"importsNotUsedAsValues": "remove",
"isolatedModules": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"sourceMap": true,
"strict": false,
"baseUrl": ".",
"paths": {
"src/*": ["src/*"]
},
"types": [
"svelte",
"svelte/store",
"svelte/motion",
"svelte/transition",
"svelte/animate",
"svelte/easing"
]
},
"include": ["src/**/*", "webpack.config.ts"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

1

webpack.serve.config.js

@@ -12,2 +12,3 @@ const path = require('path');

devtool: 'eval-source-map',
entry: {},
devServer: {

@@ -14,0 +15,0 @@ host: '0.0.0.0',

src/core/core.js
src/element/element.js
src/element/node_view.js
src/storage/item.html
src/storage/list.html
src/storage/tabbox.html
src/vconsole.js
dev/network.html

Sorry, the diff of this file is not supported yet

dev/vue.html

Sorry, the diff of this file is not supported yet

dist/vconsole.min.js

Sorry, the diff of this file is too big to display

src/core/core.less

Sorry, the diff of this file is not supported yet

src/network/item.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc