Mobile Debugging Tools

Setup

1. Install the plugin

NPM

$ npm add @winner-fed/plugin-wconsole -D

YARN

$ yarn add @winner-fed/plugin-wconsole -D

PNPM

$ pnpm add @winner-fed/plugin-wconsole -D

BUN

$ bun add @winner-fed/plugin-wconsole -D

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: [require.resolve('@winner-fed/plugin-wconsole')],
  wconsole: {
    // You can use any one of the three or all of them
    vconsole: {},
    eruda: {},
    pagespy: {}
  },
  appConfig: {
    development: {
      API_HOME: 'https://api.github.com/',
      API_UPLOAD: 'https://api.github.com/upload',
      // Debug tools enable switch
      IS_OPEN_VCONSOLE: true
    },
  }
});

Introduction

A collection of commonly used mobile debugging tools for WinJS projects. Currently includes vConsole, eruda, and PageSpy.

Note

To ensure consistency with enabling debug tools in previous projects, you need to add the IS_OPEN_VCONSOLE property to your project's configuration file before enabling the plugin. This means mounting the IS_OPEN_VCONSOLE property on window.LOCAL_CONFIG and setting its value to true.

Configuration

vConsole

import { defineConfig } from 'win';

export default defineConfig({
  plugins: [require.resolve('@winner-fed/plugin-wconsole')],
  wconsole: {
    vconsole: {
      defaultPlugins: Array(string),
      onReady: Function,
      disableLogScrolling: Boolean,
      theme: String,
      url: String
    },
  }
});

Property Name	Type	Optional	Default Value	Description
defaultPlugins	Array(String)	true	['system', 'network', 'element', 'storage']	Built-in plugins that need to be automatically initialized and loaded.
onReady	Function	true		Callback method triggered when vConsole completes initialization and loads built-in plugins.
disableLogScrolling	Boolean	true		If false, the panel will not automatically scroll to the bottom when there are new logs.
theme	String	true	'light'	Theme color, options are 'light'
url	String	true	'https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.14.7/vconsole.min.js'	vConsole file URL to load.

Reference: here

eruda

import { defineConfig } from 'win';

export default defineConfig({
  plugins: [require.resolve('@winner-fed/plugin-wconsole')],
  wconsole: {
    eruda: {
      container: String,
      tool: Array(String),
      autoScale: Boolean,
      useShadowDom: Boolean,
      defaults: Object,
      url: String
    },
  }
});

Property Name	Type	Optional	Default Value	Description
container	String	true	DOM element for plugin initialization. If not set, a div container is created by default and placed directly under the HTML root node.
tool	Array(String)	true		Specify which panels to initialize, loads all by default.
autoScale	Boolean	true	true	Auto scale under different viewports
useShadowDom	Boolean	true	true	Use Shadow DOM for CSS encapsulation
defaults	Object	true	{ displaySize: 50, transparency: 0.9, theme: 'Monokai Pro' }	Default settings.
url	String	true	'https://cdnjs.cloudflare.com/ajax/libs/eruda/3.0.1/eruda.min.js'	eruda file URL to load.

Reference: here