preface

Some time ago, I made a mobile terminal photo scanning business card after the new customer form requirements. But as you know, the requirements for camera function can only be tested in the test environment on the phone. Today, I’ll write down the debugging methods for doing this requirement. The following methods are suitable for functions that are not easily tested in the local environment:

alert

Usage scenarios

Don’t know which step method performs to/see/do not know to have access to the parameter error Due to the demand of the first solution is to pass base64 format image links to the backend, so it USES two function transfer image code, but I found that is passed to the backend times wrong (here also use alert output error messages)

Catch (e = > {alert (' wrong: '+ Json. Stringify (e))})Copy the code

Note: alert to make parameters of the Json output parameters. The stringify () to get to the value Here I have a status code output error information inside, asked the back-end said didn’t image links So I first thought is whether the call take pictures after the success of the API return parameter:

Function (result) {that. UploadImage = result[0] alert(' image: '+ json.stringify (result[0]))},Copy the code

Find the image link is returned, then there is a problem with the method of transcoding the image:

Var canvas = document.createElement('canvas') canvas.width; var canvas = document.createElement('canvas') canvas = img.width canvas.height = img.height var ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) return canvas.toDataURL('image/jpeg') }, GetImgBase64 (url) {alert(' getImageBase64 ') let that = this let base64 = "let img = new Image() img.src = url img.crossOrigin = '' if (img.complete) { base64 = that.image2Base64(img) console.log('8888888', encodeURIComponent(base64)) } },Copy the code

I didn’t implement the image2Base64 method, which means it’s not true in if. So I copied this code to another page, and then I gave it a fixed image URL. Sure enough, there was a problem with this method, There was a cross-domain problem with the photos returned by the pin API (anyway, the data was later passed by other methods)

LightProxy caught

Usage scenarios

When I entered the page of new form, I found that a text box I needed did not have the corresponding value. I did not know whether the back end had delivered the corresponding value to me. At this time, I needed to use lightProxy. Then configure your WiFi proxy according to your page information

Then when your mobile phone and computer are in the same LAN, you can operate your mobile phone and get the interface you requested and the interface information, as shown in the picture:

Of course, lightProxy also has many other functions, which you can go to the official website to see the tutorial

Mock simulation process

Usage scenarios

When I get the list of fields back from the back end, I find that the back end has returned the data I want but the front end has not rendered it. Then I mock the request interface. There are many ways to mock the request interface. LightProxy also has the function of mock simulation. I used the mock in YPai here to simulate the process of creating a form after scanning the business card successfully and returning parameters

As shown, add the copied back-end return field to the Body of the added expectation, and enable the mock for that interface (remember to restart the project later).

Then when we request this interface, we can return fixed data to create a new form page and debug it locally.

As for how to use mocks, each company’s code may be different. Check to see if your company’s config file contains the code for mock debuggingIf not, search for other ways to mock.