vite-uni-dev-tool 0.0.11 → 0.0.12

package/README.md

@@ -27,6 +27,10 @@ import * as path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  optimizeDeps: {
+    // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
+    exclude: ['vite-uni-dev-tool'],
+  },
   plugins: [
     // 一定要在 uni() 之前调用 否则微信小程序将无法正常编译组件
     uniDevTool({
@@ -46,6 +50,28 @@ export default defineConfig({
 });
 ```
 
+### uniDevTool 配置项
+
+| 参数                         | 说明                                                                                           | 类型     | 默认值                 |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- | -------- | ---------------------- |
+| pages                        | 配置pages.json                                                                                 | object   | {}                     |
+| enableInterceptPromiseReject | 是否拦截Promise.reject 最好不要拦截 默认禁用                                                   | boolean  | false                  |
+| consoleMaxSize               | 最大的console条数                                                                              | number   | 1000                   |
+| networkMaxSize               | 最大的网络请求条数                                                                             | number   | 1000                   |
+| uploadMaxSize                | 最大的上传文件条数                                                                             | number   | 1000                   |
+| wsDataMaxSize                | 最大的套接字消息条数                                                                           | number   | 1000                   |
+| captureScreenMaxSize         | 最大的截图记录条数                                                                             | number   | 1000                   |
+| cacheMaxSize                 | 最大占用缓存空间 bytes                                                                         | number   | 8\*1024\*1024\*10      |
+| buttonSize                   | 按钮大小                                                                                       | number   | 50                     |
+| buttonText                   | 按钮文本                                                                                       | string   | 🐜                     |
+| buttonFontSize               | 按钮字体大小                                                                                   | string   | 16px                   |
+| buttonBackgroundColor        | 按钮背景颜色                                                                                   | string   | rgba(255, 255, 255, 0) |
+| initShowDevTool              | 初始化时是否显示调试按钮,默认显示                                                              | boolean  | true                   |
+| zIndex                       | 调试按钮的zIndex,默认1000                                                                      | number   | 1000                   |
+| useDevSource                 | 该属性处于实验当中，谨慎使用,读取开发环境 source file,source map,默认 禁用                     | boolean  | false                  |
+| sourceFileServers            | 该属性处于实验当中，谨慎使用,开发环境 source file 服务器地址，默认 [] ，配合 useDevSource 使用 | string[] | []                     |
+| importConsole                | 是否导入 console 默认不导入， 只会捕获error 和 warn                                            | boolean  | false                  |
+
 ### 为什么不用 subPackages?
 
 - 从当前页跳转到subPackages页面时，会触发 uni-app 页面生命周期，有时是不希望如此的，比如在开发过程中，希望可以直接在当前页面进行调试。
@@ -53,7 +79,6 @@ export default defineConfig({
 ### 如何将 console 日志输出到控制台
 
 - 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 `console`，无需手动导入
-
 - 0.0.5版本之后不推荐使用 `uni.__dev__console` , 在未来版本中可能会进行移除
 
 ```ts
@@ -67,6 +92,24 @@ console.log('hello vite-uni-dev-tool');
 uni.__dev__console.log('hello vite-uni-dev-tool');
 ```
 
+### 0.0.12 版本在插件中增加了 `importConsole` 属性，默认不导入，只捕获`error`, `warn`, 用户手动调用的`console` 将不再进行捕获，如需捕获传入`true`即可
+
+```ts
+uniDevTool({
+  pages,
+  importConsole: true
+}),
+```
+
+### vite 预加载导致的 `eventBus` 事件冲突 , 预加载排除 `vite-uni-dev-tool` 即可
+
+```ts
+optimizeDeps: {
+  // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
+  exclude: ['vite-uni-dev-tool'],
+}
+```
+
 ### 注意事项
 
 ### 兼容性说明
@@ -151,6 +194,17 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ## 更新日志
 
+### 0.0.12
+
+- 修复 network url显示长度
+- 修复部分样式
+- 修复列表高度异常
+- 修复销毁之后操作
+- 刷新之后隐藏调试弹窗
+- 列表返回到顶部
+- 增加层级属性，默认层级1000
+- 构建导致的 eventBus 冲突
+
 ### 0.0.11
 
 - 新增 console run 简易提示

package/dev/components/ConsoleList/ConsoleItem.vue

@@ -5,7 +5,7 @@
         <template v-for="(item, index) in consoleItem.args">
           <view
             v-if="item.type !== 'array' && item.type !== 'object'"
-            class="console-arg"
+            :class="`console-arg console-arg-${item.type}`"
             :key="index"
             v-html="item.value"
           >
@@ -46,11 +46,12 @@
       </view>
     </view>
     <!-- <view class="console-copy">C</view> -->
-    <Code
+    <SourceCode
       v-if="openCode && consoleItem.stack"
       :url="consoleItem.stack"
       :sourceFileServers="sourceFileServers"
       :mode="mode"
+      :zIndex="zIndex"
       @close="onCloseCode"
     />
   </view>
@@ -59,7 +60,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import Tag from '../Tag/index.vue';
-import Code from '../Code/index.vue';
+import SourceCode from '../SourceCode/index.vue';
 import type { DevTool } from '../../type';
 import { isAndroid, isMockWX } from '../../utils';
 import JsonPretty from '../JsonPretty/index.vue';
@@ -68,6 +69,7 @@ const props = defineProps<{
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
+  zIndex?: number;
   id: string;
 }>();
 
@@ -183,4 +185,23 @@ function onCloseCode() {
 .console-item-log {
   color: #f9f9f9;
 }
+
+.console-arg-null {
+  color: #020201;
+}
+.console-arg-undefined {
+  color: #020201;
+}
+.console-arg-string {
+  color: #888888;
+}
+.console-arg-number {
+  color: #1d8ce0;
+}
+.console-arg-boolean {
+  color: #1d8ce0;
+}
+.console-arg-symbol {
+  color: bisque;
+}
 </style>

package/dev/components/ConsoleList/RunJSInput.vue

@@ -180,10 +180,12 @@ function findFunction(fn: string) {
 .run-js-input-wrapper {
   position: relative;
   display: flex;
+  align-items: center;
   padding: 0 16px;
-  min-height: 28px;
+  height: 32px;
   border-top: 1px solid var(--dev-tool-border-color);
   border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
 }
 
 .run-js-input-icon {

package/dev/components/ConsoleList/index.vue

@@ -19,9 +19,10 @@
 
     <VirtualListPro
       :data="consoleList"
-      :pageSize="10"
+      :pageSize="15"
       :scrollIntoView="scrollIntoView"
       :scrollWithAnimation="true"
+      :height="height"
       className="console-list"
     >
       <template v-slot="{ list, start }">
@@ -36,6 +37,7 @@
             :mode="mode"
             :useDevSource="useDevSource"
             :id="`dev-console-${index}`"
+            :zIndex="zIndex"
           />
         </AutoSize>
         <Empty v-if="!consoleList || consoleList.length === 0" />
@@ -51,7 +53,7 @@ import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 import RunJSInput from './RunJSInput.vue';
 import type { DevTool } from '../../type';
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { debounce } from '../../utils';
 import VirtualListPro from '../VirtualListPro/index.vue';
 import AutoSize from '../VirtualListPro/AutoSize.vue';
@@ -64,6 +66,7 @@ const props = defineProps<{
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
+  zIndex?: number;
 }>();
 const emit = defineEmits<{
   (e: 'choose', type: ConsoleType): void;
@@ -108,6 +111,12 @@ const debounceWatch = debounce(() => {
 }, 200);
 
 watch(() => props.consoleList, debounceWatch);
+
+const height = ref(0);
+onMounted(() => {
+  const { windowHeight } = uni.getWindowInfo();
+  height.value = windowHeight - 32 - 32 - 32;
+});
 </script>
 <style scoped>
 .console-content {

package/dev/components/DevTool/index.vue

@@ -7,6 +7,7 @@
       :buttonColor="buttonProps.buttonColor"
       :buttonFontSize="buttonProps.buttonFontSize"
       :buttonBackgroundColor="buttonProps.buttonBackgroundColor"
+      :zIndex="zIndex"
       @click="onDevToolButtonClick"
     />
     <DevToolWindow
@@ -15,12 +16,10 @@
       :sourceFileServers="sourceFileServers"
       :mode="mode"
       :useDevSource="useDevSource"
+      :zIndex="zIndex + 1"
       @close="onShowDevToolWindow(false)"
       @sendMessage="onSendMessage"
     />
-    <!-- <view class="devTool-canvas">
-      <canvas canvas-id="fullscreenCanvas" id="fullscreenCanvas" />
-    </view> -->
   </view>
 </template>
 <script lang="ts" setup>
@@ -31,8 +30,8 @@ import DevToolWindow from '../DevToolWindow/index.vue';
 import { eventBus } from '../../core';
 
 import {
-  EVENT_DEV_BUTTON,
-  EVENT_DEV_WINDOW,
+  DEV_BUTTON_VISIBLE,
+  DEV_WINDOW_VISIBLE,
   DEV_WINDOW_MESSAGE,
   DEV_WINDOW_OPEN,
   DEV_WINDOW_CLOSE,
@@ -40,6 +39,7 @@ import {
   DEV_OPTION_SEND,
 } from '../../const';
 import type { DevTool } from '../../type';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 let isActive = false;
 
@@ -60,6 +60,8 @@ const sourceFileServers = ref<string[]>([]);
 
 const mode = ref<string>();
 
+const zIndex = ref(1000);
+
 const useDevSource = ref(false);
 
 function onDevToolButtonClick() {
@@ -72,14 +74,20 @@ function onDevToolButtonClick() {
 
 function onShowDevToolButton(show: boolean) {
   if (!isActive) return;
-  devToolButtonVisible.value = show ?? uni.getStorageSync(EVENT_DEV_BUTTON);
+
+  const { devToolButtonVisible: showButton = false } = getDevToolInfo();
+
+  devToolButtonVisible.value = show ?? showButton;
 }
 
 async function onShowDevToolWindow(show: boolean) {
   if (!isActive) return;
 
   devToolWindowVisible.value = show;
-  uni.setStorageSync(EVENT_DEV_WINDOW, show);
+
+  setDevToolInfo({
+    devToolWindowVisible: show,
+  });
 }
 
 function onSendMessage(param: { type: string; data: Record<string, any> }) {
@@ -100,19 +108,25 @@ function onDevOptionSend(options: DevTool.DevToolOptions) {
     mode.value = options.mode ?? '';
 
     useDevSource.value = options.useDevSource ?? false;
+
+    zIndex.value = options.zIndex ?? 1000;
   }
 }
 
 onLoad(() => {
   // 共享状态
 
-  const show = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
+  const {
+    devToolButtonVisible: showButton = false,
+
+    devToolWindowVisible: showWindow = false,
+  } = getDevToolInfo();
 
   isActive = true;
-  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
-  devToolWindowVisible.value = show;
-  eventBus.on(EVENT_DEV_BUTTON, onShowDevToolButton);
-  eventBus.on(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  devToolButtonVisible.value = showButton;
+  devToolWindowVisible.value = showWindow;
+  eventBus.on(DEV_BUTTON_VISIBLE, onShowDevToolButton);
+  eventBus.on(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
   eventBus.on(DEV_OPTION_SEND, onDevOptionSend);
 
   nextTick(() => {
@@ -125,14 +139,21 @@ onUnload(() => {
     type: DEV_WINDOW_CLOSE,
     data: {},
   });
-  eventBus.off(EVENT_DEV_BUTTON, onShowDevToolButton);
-  eventBus.off(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  eventBus.off(DEV_BUTTON_VISIBLE, onShowDevToolButton);
+  eventBus.off(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
 });
 
 onShow(() => {
   isActive = true;
-  devToolWindowVisible.value = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
-  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
+  const {
+    devToolButtonVisible: showButton = false,
+
+    devToolWindowVisible: showWindow = false,
+  } = getDevToolInfo();
+
+  devToolWindowVisible.value = showWindow;
+  devToolButtonVisible.value = showButton;
+
   if (devToolWindowVisible.value) {
     onSendMessage({
       type: DEV_WINDOW_OPEN,
@@ -164,19 +185,4 @@ onHide(() => {
 
   -webkit-tap-highlight-color: transparent;
 }
-
-.dev-tool-canvas {
-  position: fixed;
-  z-index: -1000;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  opacity: 0;
-}
-
-#fullscreenCanvas {
-  width: 100vw;
-  height: 100vh;
-}
 </style>

package/dev/components/DevToolButton/index.vue

@@ -9,6 +9,7 @@
       width: props.buttonSize + 'px',
       height: props.buttonSize + 'px',
       cursor: isDragging ? 'move' : 'pointer',
+      zIndex: zIndex,
       ...buttonPosition,
     }"
     @touchstart="onTouchStart"
@@ -22,7 +23,7 @@
 <script lang="ts" setup>
 import { onShow, onHide } from '@dcloudio/uni-app';
 import { ref, computed, reactive, onMounted } from 'vue';
-import { DEV_BUTTON_INFO } from '../../const';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 const emit = defineEmits<{ (e: 'click'): void }>();
 const props = withDefaults(
@@ -32,8 +33,9 @@ const props = withDefaults(
     buttonColor?: string;
     buttonFontSize?: string;
     buttonBackgroundColor?: string;
+    zIndex?: number;
   }>(),
-  { buttonSize: 50 },
+  { buttonSize: 50, zIndex: 1000 },
 );
 const sizeHalf = props.buttonSize / 2;
 
@@ -113,8 +115,7 @@ function onResize() {
   }
   timer = setTimeout(() => {
     buttonPosition.transition = 'none';
-
-    uni.setStorageSync(DEV_BUTTON_INFO, {
+    setDevToolInfo({
       left: buttonPosition.left,
       top: buttonPosition.top,
     });
@@ -122,19 +123,15 @@ function onResize() {
 }
 
 onMounted(() => {
-  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
-    left: windowWidth - props.buttonSize + 'px',
-    top: '80vh',
-  };
+  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
+    getDevToolInfo();
   buttonPosition.left = left;
   buttonPosition.top = top;
 });
 
 onShow(() => {
-  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
-    left: windowWidth - props.buttonSize + 'px',
-    top: '80vh',
-  };
+  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
+    getDevToolInfo();
   buttonPosition.left = left;
   buttonPosition.top = top;
 

package/dev/components/DevToolTitle/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="dev-tool-title" :style="style"> <slot /> </view>
+  <view class="dev-tool-title" :style="innerStyle"> <slot /> </view>
 </template>
 <script lang="ts" setup>
-defineProps<{ style?: any }>();
+defineProps<{ innerStyle?: any }>();
 </script>
 <style scoped>
 .dev-tool-title {

package/dev/components/DevToolWindow/index.vue

@@ -29,6 +29,7 @@
           :sourceFileServers="sourceFileServers"
           :mode="mode"
           :useDevSource="useDevSource"
+          :zIndex="zIndex + 1"
           v-model="searchConsole"
           @choose="onConsoleChoose"
           @search="onSearchConsole"
@@ -43,6 +44,7 @@
           v-if="swiperShow(2)"
           :currentNetworkType="currentNetworkType"
           :networkList="networkList"
+          :zIndex="zIndex + 1"
           v-model="searchNetwork"
           @choose="onNetworkChoose"
           @search="onSearchNetwork"
@@ -53,6 +55,7 @@
           v-if="swiperShow(3)"
           :currentUploadType="currentUploadType"
           :uploadList="uploadList"
+          :zIndex="zIndex + 1"
           v-model="searchUpload"
           @choose="onUploadChoose"
           @search="onSearchUpload"
@@ -63,6 +66,7 @@
           v-if="swiperShow(4)"
           :wsList="wsList"
           :currentWebSocketType="currentWebSocketType"
+          :zIndex="zIndex + 1"
           v-model="searchWs"
           @choose="onWebSocketChoose"
           @search="onSearchWs"
@@ -86,6 +90,7 @@
           :mode="mode"
           :useDevSource="useDevSource"
           :sourceFileServers="sourceFileServers"
+          :zIndex="zIndex + 1"
           @clear="onUniEventClear"
         />
       </swiper-item>
@@ -191,7 +196,6 @@ import {
   DEV_UPLOAD_CLEAR,
   DEV_VUEX_CHANGE,
   DEV_WEBSOCKET_CLEAR,
-  DEV_WINDOW_INFO,
   DEV_APP_MESSAGE,
   DEV_UNI_EVENT_CLEAR,
   DEV_RUN_JS,
@@ -200,6 +204,7 @@ import {
 import { debounce, hightLight } from '../../utils/index';
 import type { DevTool } from '../../type';
 import { eventBus } from '../../core';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 const items = [
   {
@@ -358,13 +363,19 @@ const searchWs = ref('');
 const searchRoute = ref('');
 const searchStorage = ref('');
 
-const props = defineProps<{
-  open?: boolean;
-  data?: DevTool.WindowData;
-  sourceFileServers?: string[];
-  mode?: string;
-  useDevSource?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    data?: DevTool.WindowData;
+    sourceFileServers?: string[];
+    mode?: string;
+    useDevSource?: boolean;
+    zIndex?: number;
+  }>(),
+  {
+    zIndex: 1000,
+  },
+);
 
 const emits = defineEmits<{
   (e: 'close'): void;
@@ -555,12 +566,13 @@ const listenPostMessage = (data: DevTool.WindowData) => {
 
 let isActive = false;
 onMounted(() => {
-  const windowInfo = uni.getStorageSync(DEV_WINDOW_INFO);
-  if (windowInfo) {
-    activeTab.value = windowInfo?.activeTab || 0;
-    currentConsoleType.value = windowInfo?.currentConsoleType || 'all';
-    currentNetworkType.value = windowInfo?.currentNetworkType || 'all';
-    tabScrollLeft.value = windowInfo?.tabScrollLeft || 0;
+  const devToolInfo = getDevToolInfo();
+
+  if (devToolInfo) {
+    activeTab.value = devToolInfo?.activeTab || 0;
+    currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
+    currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
+    tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
   }
   if (props.data) {
     listenPostMessage(props.data);
@@ -581,6 +593,10 @@ onShow(() => {
 });
 onHide(() => {
   isActive = false;
+
+  setDevToolInfo({
+    devToolWindowVisible: false,
+  });
 });
 
 /** 发送消息给 uniapp */
@@ -592,7 +608,7 @@ function basicSendMessage(message: {
 }
 
 function setWindowInfo() {
-  uni.setStorageSync(DEV_WINDOW_INFO, {
+  setDevToolInfo({
     activeTab: activeTab.value,
     currentConsoleType: currentConsoleType.value,
     currentNetworkType: currentNetworkType.value,
@@ -990,7 +1006,7 @@ function onChangePinia(value: Record<string, any>) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
   /* #ifdef H5 */
   padding: 50px 0;
   /* #endif */

package/dev/components/JsonPretty/index.vue

@@ -21,6 +21,8 @@
       :height="state.height"
       :pageSize="pageSize"
       :data="flatData"
+      scroll-with-animation
+      showBackTop
     >
       <template v-slot="{ list, start }">
         <AutoSize

package/dev/components/NetworkList/NetworkDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="network-detail">
+  <view class="network-detail" :style="{ zIndex: zIndex }">
     <view class="network-detail-control">
       <Tag
         mode="info"
@@ -81,7 +81,7 @@ import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import CloseButton from '../CloseButton/index.vue';
 import type { DevTool } from '../../type';
-const props = defineProps<{ network: DevTool.NetworkItem }>();
+const props = defineProps<{ network: DevTool.NetworkItem; zIndex?: number }>();
 const emit = defineEmits<{ (e: 'close'): void }>();
 const selectItems = [
   {
@@ -151,13 +151,10 @@ function onClose() {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 1000;
+  z-index: 1001;
   top: 0;
   left: 0;
   padding: 0 16px;
-  /* #ifdef H5 */
-  padding: 50px 16px;
-  /* #endif */
 
   background-color: rgba(255, 255, 255, 0.95);
   box-sizing: border-box;

package/dev/components/NetworkList/NetworkItem.vue

@@ -3,7 +3,7 @@
     <view class="network-url-row">
       <Tag mode="info">{{ network.method }}</Tag>
 
-      <view class="network-url" v-html="network.url"> </view>
+      <view class="network-url" v-html="lastUrl"> </view>
 
       <Tag
         mode="main"
@@ -46,20 +46,32 @@
     </view>
   </view>
   <!-- <Transition name="slide-fade"> -->
-  <NetworkDetail v-if="showDetail" :network="network" @close="onClose" />
+  <NetworkDetail
+    v-if="showDetail"
+    :network="network"
+    :zIndex="zIndex"
+    @close="onClose"
+  />
   <!-- </Transition> -->
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Tag from '../Tag/index.vue';
 import NetworkDetail from './NetworkDetail.vue';
 import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
-defineProps<{
+const props = defineProps<{
   network: DevTool.NetworkItem;
+  zIndex?: number;
 }>();
 const showDetail = ref(false);
+
+const lastUrl = computed(() => {
+  const start = props.network.url.lastIndexOf('/');
+  return props.network.url.slice(start + 1);
+});
+
 function onClose() {
   showDetail.value = false;
 }
@@ -70,22 +82,23 @@ function onClose() {
   border-bottom: 1px solid var(--dev-tool-border-color);
   font-size: var(--dev-tool-base-font-size);
 }
-.network-item .network-url-row {
+.network-url-row {
   display: flex;
   align-items: center;
 }
 
-.network-item .network-url-row .network-url {
+.network-url {
   margin-left: 4px;
   flex: 1;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.network-item .network-url-row .network-detail-icon {
+.network-detail-icon {
   margin-left: auto;
 }
 
-.network-item .network-info {
+.network-info {
   display: flex;
   align-items: center;
   justify-content: space-between;