h5 real machine debugging ios and Android and vconsole

1: Android for h5 real machine debugging

01: Android Mi 11 opens the developer mode

• 01: Click [My Devices] at the top of the phone settings menu
• 02: Pull down in my device - find all parameters - click all parameters to enter
• 03: Enter all parameters - find the MIUI version - click several times (you are already in the developer mode,...), pop up such a prompt means to open the developer mode
• 04: Manually set whether to enable the developer mode
  • Settings - More Settings - Developer Mode (There are on and off buttons inside)

02：Android + edge

• Install the edge browser on the mobile phone, connect it to the PC with USB, and turn on the USB debugging mode of the mobile phone.
• Then open the edge browser address bar on the PC and enter: edge://inspect, selectDiscover USB devices
• ( chrome://inspect 、edge://inspect )
• 

2: H5 real machine debugging ios

1：iOS + Safari

• The iPhone and Mac have their own Safari browsers, but they also need to be connected to the PC using USB, and then set the Mac and iPhone as follows:
• Mac browser settings: Safari -> Preferences -> Advanced -> Check "Show Development in the menu bar"
• iPhone Settings: Settings -> Safari -> Advanced -> Open Web Inspector

3: Android of real machine link local project (emphasis)

• 3-1 After following the steps above (01: Android Mi 11 enables developer mode) after operation
• 3-2 Use the mobile phone usb data cable to connect the computer and the mobile phone (need to set the kind of transfer data)
• 3-3 The ip address of the h5 project running on the computer => http://192.168.246.177:5173/open this URL in the edge browser on the mobile phone to access the h5 project on the real machine

3-1 Installation and use of vconsole (h5 project)

Vue2 uses vconsole

• Installation dependencies:npm install vconsole -D
• In the main.js file use

// 引入 Vconsole
import Vconsole from 'vconsole'
// 所有环境均使用
new Vconsole()
// 在 test 环境才使用
process.NODE_ENV === 'test' ? new Vconsole : ''

Vue3 uses vconsole

• Installation dependencies:npm install vconsole
• In main.ts use

import Vconsole from 'vconsole'
let vConsole = new Vconsole()
app.use(vConsole)

Effect