The foregoing

This article only covers debugging techniques other than packet capture

We are used to debugging emulators, so why do we need to debug local real machines? Here’s an example:

  • iosIn the real world, when we receive the SMS verification code, we hit copy,iosThe system level will existbug, the cut verification code is repeated twice. For example, the received verification code is123456But the actual copy to the clipboard becomes123456123456.

If you don’t know much about h5 pits at each end. Without the use of real machine debugging, potential problems cannot be discovered during the local debugging phase.

Use Chrome for real machine debugging

Why is real testing necessary?

First share a pit

At the beginning, in order to achieve a full screen filling, I used the following code to control the width and height, considering that the mobile terminal perfectly supports VW and VH

html.body {
  height: 100vh;
  width: 100vw;
  background-color: blue;
}
Copy the code

All right, let’s see what it looks like. On the simulator, it looks perfect, a whole screenblue“That seems to be all right.

Real machine debugging steps

To prepare a

  • First make sure you have a two-way Type-C cable (😭 I don’t have one, so I connected the MAC charger cable to my phone)

  • Next, use a cable to connect the phone to the computer

  • Open Chrome on your phone

  • After completing your computer and phone, type the following address into Chrome on your computer:

  • chrome://inspect/#devices

How to determine the success of the link?

If you can see that Chrome has identified your mobile device, and you can see a list of current Chrome browsing history pages, you have linked successfully!

Start real machine debugging

Next, we can do it inchrome://inspect/#devicesPage opens a page that we want to debug Here we open the first step:On Your Network: https://192.168.12.247:3000The page

Going back to the original question, what are the problems with real machine debugging?

As you can see, because the simulator doesn’taddress barIt didn’t allow us to see the problem, and when we got to mobile,100vhIt actually overflows, and you get a scrollbar, which is not what we expected.

Some people put forward the following solutions, but in practice, it is found that the height of the body element will be reduced when the keyboard is opened on the android real computer. After the keyboard is put away, the height of the body element will not change back, resulting in the blank area of the original keyboard.

/* Problematic scheme */
html.body {
  height: -moz-available;
  height: fill-available;
  height: -webkit-fill-available; /* Indicates to fill up the available space (including height and width) */
}
Copy the code

Solutions:

/* Final solution */
html.body {
  min-height: 100%;
}
Copy the code

Use the vConsole plug-in

Those of you who do applets should be familiar with vConsole, but I thought it was built into the applets at first. In fact, we can also introduce it in H5.

Directly introducing

Github.com/Tencent/vCo…

// index.js
import vconsole from 'vconsole' 
const vConsole = new VConsole();
Copy the code

Introduced as a Webpack plug-in

Github.com/diamont1001…

//webpack.config.js
/** the following is pseudocode */
const vConsolePlugin = require('vconsole-webpack-plugin');

plugins: [
  isEnvDevelopment &&
    new vConsolePlugin({
      filter: [].enable: isEnvDevelopment,
   }),
]
Copy the code

Use the Intranet IP address for real machine debugging

How do I obtain a local IP address?

If you are using NPM run dev to start your local dev environment and build your project based on create-react-app or vue-cli, you will see a prompt on the command line after the project is successfully executed because the scaffolding is configured with webpack plugin. Have you noticed the third line of address in the terminal prompt?

On Your Network: https://192.168.12.247:3000

If Your project does not use Webpack, or does not have plugins configured, it does not matter if **On Your Network** is not available

ifconfig | grep "inet " | grep -v 127.0.0.1

# Execution result
Netmask 0xFFFFFC00 Broadcast 192.168.15.255
192.168.12.247 is the Intranet IP address of the local computer
Copy the code

Type https://192.168.12.247:3000 in the real machine Chrome, can see the phone the rear camera images on the page through video rendering. For business scenarios such as the need to use a rear camera, we can only use a real machine for real-time debugging (who is the Mbp without its own rear camera? 😭)

Is it a hassle to manually enter an address in a mobile browser and debug on the mobile end?

Here’s oneChromePlug-in, can directly generate two-dimensional codeChrome.google.com/webstore/de…(Science required)

FAQ

After clicking Inspect, the Devtools tool displays a blank screen, indicating http1.1 404

  • Need to check your phoneChromeVersion and computerChromeCheck whether the versions are consistent. Align the versions

Still not being able to open Devtools requires science

HTTP environment cannot be accessed through MediaDevices. GetUserMedia for video and audio streams

Due to Chrome’s limitations, only HTTPS can fetch streams, but HTTP cannot

Can be achieved bychrome://flags/Set this parameter in the whitelistipTo solve the problem

Thank you ❤️

This is the end of my sharing. If you have any questions or suggestions, please join us for discussion. You can add my wechat Actuallys to share, like or watch three links!