Merge pull request #628 from Tencent/dev

v3.15.1

CHANGELOG.md

@@ -1,5 +1,15 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+## 3.15.1 (2023-06-01)
+
+- `Feat(Netwrk)` Add new option `network.ignoreUrlRegExp` to skip some requests. (PR #623)
+- `Fix(Core)` Fix prototype pollution in `vConsole.setOption()`. (issue #616 #621)
+- `Fix(Core)` Fix plugin event `ready` triggering before its HTML finishes rendering. (issue #591)
+- `Fix(Log)` Reset group state when `console.clear()` is called. (issue #611)
+- `Fix(Log)` Compatible with iOS (less than 13.4) that does not support `ResizeObserver`, but there may be a potential performance issue when printing a large number of logs. (issue #610)
+- `Fix(Network)` Fix possible "Cannot read property" error by `sendBeacon`. (issue #615)
+
+
 ## 3.15.0 (2022-11-02)
 
 - `Feat(Log)` Add recycle scrolling to imporove performance, and add scroll to top/bottom buttons. (PR #570)
@@ -77,7 +87,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 ## 3.13.0 (2022-03-15)
 
-- `Feat(Log)` Add new option `log.showTimestames`, see [Public Properties & Methods](./doc/public_properties_methods.md).
+- `Feat(Log)` Add new option `log.showTimestamps`, see [Public Properties & Methods](./doc/public_properties_methods.md).
 - `Fix(Core)` Use polyfill `click` event to prevent raw click event not working in some cases.
 - `Fix(style)` Fix CSS transition failure in WeChat webview by using `bottom` instead of `transform`.
 - `Fix(Core)` Fix error when calling vConsole method in `onReady` callback. (issue #516)

CHANGELOG_CN.md

@@ -1,5 +1,15 @@
 [English](./CHANGELOG.md) | 简体中文
 
+## 3.15.1 (2023-06-01)
+
+- `Feat(Netwrk)` 新增配置项 `network.ignoreUrlRegExp` 以跳过一些请求。 (PR #623)
+- `Fix(Core)` 修复 `vConsole.setOption()` 中可能存在的原型污染问题。 (issue #616 #621)
+- `Fix(Core)` 修复插件事件 `ready` 在插件完成渲染前就被触发的问题。 (issue #591)
+- `Fix(Log)` 修复调用 `console.clear()` 时没有重置 group 层级的问题。 (issue #611)
+- `Fix(Log)` 兼容 iOS（小于 13.4）不支持 `ResizeObserver` 的情况，代价是打印大批量日志可能会有性能问题。 (issue #610)
+- `Fix(Network)` 修复可能由 `sendBeacon` 引发的 "Cannot read property" 错误。 (issue #615)
+
+
 ## 3.15.0 (2022-11-02)
 
 - `Feat(Log)` 新增虚拟滚动列表以提升性能，并支持快速滚动到顶部/底部。 (PR #570)
@@ -77,7 +87,7 @@
 
 ## 3.13.0 (2022-03-15)
 
-- `Feat(Log)` 新增配置项 `log.showTimestames`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
+- `Feat(Log)` 新增配置项 `log.showTimestamps`，见 [公共属性及方法](./doc/public_properties_methods_CN.md)。
 - `Fix(Core)` 使用模拟的 `click` 事件以避免某些场景下原生 click 事件不生效的问题。
 - `Fix(style)` 修复微信 Webview 中的 CSS transition 失效的问题，通过使用 `bottom` 而非 `transform`。
 - `Fix(Core)` 修复在 `onReady` 回调中调用 vConsole 方法导致报错的问题。 (issue #516)

dev/common.html

@@ -93,6 +93,11 @@
   vConsole.setOption('log.maxLogNumber', 20);
   vConsole.setOption({ network: { maxNetworkNumber: 30 }});
   vConsole.setOption({ network: { b: 123 }}); // overwrite previous line
+  vConsole.setOption({ '__proto__': { a: 1 }, 'prototype': { b: 2 }, 'constructor': 3 });
+  vConsole.setOption('__proto__.noOrig', 1);
+  vConsole.setOption('prototype.noOrig', 2);
+  vConsole.setOption('constructor', () => { console.log('hack') });
+  vConsole.setOption('log.__proto__.noOrig', 1);
   console.log(vConsole.option);
 }
 

dev/log.html

@@ -141,8 +141,8 @@
 }
 
 function styling() {
-  console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
-  console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
+  console.log('%c blue %c red', 'color:blue', 'color:red', 'Foo'); // blue red Foo
+  console.log('%c FOO', 'font-weight:bold; font-size:18px; background-color:#00FF00; padding:3px;', 'bar'); // FOO bar
   console.log('%c Foo %c bar', 'color:red'); // Foo %c bar
 }
 
@@ -180,6 +180,13 @@
     console.log('Back to level 2');
   console.groupEnd();
   console.log('Back to the outer level');
+
+  // console.group();
+  //   console.log('Level 2');
+  //   console.group(aa);
+  //     console.log('Level 3');
+  // console.clear();
+  // console.log('Now console.clear() is called.');
 }
 
 function formattingLog() {

dev/plugin.html

@@ -10,6 +10,7 @@
   <link href="./lib/demo.css" rel="stylesheet"/>
 
   <script src="../dist/vconsole.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
 </head>
 <body ontouchstart>
   <div class="page">
@@ -38,9 +39,9 @@
   .on('init', function() { console.log(this.id, 'init'); })
   .on('renderTab', function(cb) {
     console.log(this.id, 'renderTab');
-    cb('<div>I am ' + this.id+'</div>');
+    cb('<div id="tab1">I am ' + this.id+'</div>');
   })
-  .on('ready', function() {  console.log(this.id, 'ready'); })
+  .on('ready', function() { console.log(this.id, 'ready', document.querySelector('#tab1')); })
   .on('show', function() { console.log(this.id, 'show'); })
   .on('hide', function() { console.log(this.id, 'hide'); })
   .on('showConsole', function() { console.log(this.id, 'showConsole'); })
@@ -94,7 +95,7 @@
 
 function newTabUseJQuery() {
   console.info('newTabUseJQuery() Start');
-  var tab = new window.vConsole.VConsolePlugin('tab4', 'Tab4');
+  var tab = new window.VConsole.VConsolePlugin('tab4', 'Tab4');
   var $html = $('<div><a href="javascript:;">Alert</a></div>');
   $html.find('a').click(function() {
     alert('OK');
@@ -108,7 +109,7 @@
 
 function newTabUseDOM() {
   console.info('newTabUseDOM() Start');
-  var tab = new window.vConsole.VConsolePlugin('tab5', 'Tab5');
+  var tab = new window.VConsole.VConsolePlugin('tab5', 'Tab5');
   var $elm = document.createElement('DIV');
   $elm.innerHTML = '<p>It works</p>';
   tab.on('renderTab', function(cb) {
@@ -136,4 +137,4 @@
   console.info('removePlugin() End');
 }
 
-</script>
+</script>

doc/public_properties_methods.md

@@ -57,6 +57,7 @@ target                | String, HTMLElement | true | `document.documentElement`
 log.maxLogNumber      | Number   | true     | 1000                                        | Overflow logs will be removed from log panels.
 log.showTimestamps    | Boolean  | true     | false                                       | Display timestamps of logs.
 network.maxNetworkNumber | Number | true    | 1000                                        | Overflow requests will be removed from Netowrk panel.
+network.ignoreUrlRegExp | RegExp | true     |                                              | Skip the requests which url match the RegExp.
 storage.defaultStorages  | Array  | true    | ['cookies', 'localStorage', 'sessionStorage'] | Listed storage(s) will be available in Storage panel.
 
 Example:

doc/public_properties_methods_CN.md

@@ -56,6 +56,7 @@ target                | String, HTMLElement | true | `document.documentElement`
 log.maxLogNumber      | Number   | true     | 1000                                        | 超出数量上限的日志会被自动清除。
 log.showTimestamps    | Boolean  | true     | false                                       | 显示日志的输出时间
 log.maxNetworkNumber  | Number   | true     | 1000                                        | 超出数量上限的请求记录会被自动清除。
+network.ignoreUrlRegExp | RegExp | true     |                                             | 不展示 URL 匹配正则表达式的请求。
 storage.defaultStorages  | Array  | true    | ['cookies', 'localStorage', 'sessionStorage'] | 在 Storage 面板中要加载的 storage 类型。
 
 例子：

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/Tencent/vConsole",
   "files": [

src/component/recycleScroller/recycleItem.svelte

@@ -1,36 +1,41 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import { useResizeObserver, hasResizeObserver } from './resizeObserver';
 
-  export let show: boolean;
+  export let show: boolean = !hasResizeObserver();
   export let top: boolean;
-
   export let onResize: (height: number) => void = () => {};
 
   let item: HTMLDivElement | undefined;
-
   let observer: ResizeObserver | null = null;
+  let isObservable = hasResizeObserver();
 
   onMount(() => {
     if (show) {
       onResize(item.getBoundingClientRect().height);
     }
-    observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (show) onResize(entry.contentRect.height)
-    });
-    observer.observe(item);
+    if (isObservable) {
+      const ResizeObserverPolyfill = useResizeObserver();
+      observer = new ResizeObserverPolyfill((entries) => {
+        const entry = entries[0];
+        if (show) onResize(entry.contentRect.height)
+      });
+      observer.observe(item);
+    }
   });
 
   onDestroy(() => {
-    observer.disconnect();
+    if (isObservable) {
+      observer.disconnect();
+    }
   });
 </script>
 
 <div
   bind:this={item}
   class="vc-scroller-item"
-  style:display={show ? "block" : "none"}
-  style:top="{top}px"
+  style:display={show ? 'block' : 'none'}
+  style:top="{isObservable ? top + 'px' : 'auto'}"
 >
   <slot />
 </div>

src/component/recycleScroller/recycleScroller.less

@@ -20,6 +20,10 @@
   left: 0;
   right: 0;
 }
+.vc-scroller-viewport.static .vc-scroller-item {
+  display: block;
+  position: static;
+}
 
 .vc-scroller-footer {