caught

As a front-end developer, using proxy tools to capture packages is the most basic skill. Through packet capture, we can obtain the following information:

  1. The specific url of the
  2. Request Method, Status, and other information
  3. Request parameters carried by the interface
  4. Request header information (Cookie, UA, request parameters, etc.)
  5. Return header information (return results, cross-domain support, etc.)

This part is no different from other proxy tools. They are all in the Network module. If you are not familiar with them, you will find them. What needs to be wordy is that if the page goes wrong, what are the steps for us to capture packets? First to confirm whether the console error (see section below), confirmation page address and url with parameters is correct, and confirm to load or the request of the interface for static resources than 200, of course, if you know exactly what the problem was with which interface, interface directly to view the request header information and return values.

View console error

We want to be able to see an error from the console when something goes wrong with the remote debug page or online page. There are three ways to do this:

  • Using the log rule
  • Inject vConsole into the page
  • The use of vein as

The first two methods are often used if you simply check the console for errors, and Weinre will be explained separately in the Weinre module below. Here to view the console content of jingdong home page for example.

Using the log rule

Using the log rule is simple. Add the following Rules to the Rules:

https://m.jd.com/ log://
Copy the code

After the rule is added, switch To the Network module, refresh the home page of jd, find m.jd.com/ in the request on the left and select it, and select To… on the right.

Inject vConsole into the page

Injecting cConsole into a page uses Whsitle’s JS rules, which append a script to the response and, if the response is an HTML document, automatically wrap it with and insert it

VConsole. Js file address: wechatfe. Making. IO/vConsole/li…

  1. Add vconsole. js to Values and paste the contents of vconsole. js from the link above into the new vconsole. js
  2. Append initialization logic to vconsole.js:
new window.VConsole();
Copy the code
  1. Configure the following Rules in Rules:
https://m.jd.com/ js://{vConsole.js}
Copy the code
  1. Refresh jingdong home page, you can see vConsole in the lower right corner of the page, click vConsole, you can see the console information

Personally, I’m used to injecting vConsle because you can use multiple devices at the same time, the output doesn’t affect each other, and you can view caches like localStorage and sessionStorage using vConsole.

With the Host

Configure the host in the same way that we configure the host using the SwitchHosts software. For example, if you need to use the jd.com domain name during development, you can configure it as follows:

// dev.jd.com is a development environment that I often use. You can call it XXX.jd.com
127.0. 01. dev.jd.com
Copy the code

If an IP address corresponds to multiple domain names, you can write the following:

127.0. 01. dev.jd.com dev1.jd.com
Copy the code

The agent of the domain name

For example, if there is a problem with the pre-publish environment or the pre-publish environment, and the task we are working on only involves the change of the front end, we can use Whistle to temporarily switch the interface of the domain name to the online domain. Just shut down the agent once you’ve sent it. This way we don’t have to make changes back and forth on our code, and we don’t have to start the project frequently.

// proxy the request for the domain name xxx-api.m.jd.com to api.m.jd.com
xxx-api.m.jd.com api.m.jd.com
Copy the code

The proxy port

For example, if I start the project with port 3000 and I use port 80, I don’t want to restart the project.

dev.jd.com dev.jd.com:3000
Copy the code

This way we can still use dev.jd.com even if we start 3000.

Agent HTTPS

Sometimes requests are converted to HTTPS because of HSTS, or some apps can only open HTTPS requests. You can use whislte to proxy HTTPS requests as HTTP:

https://dev.jd.com http://dev.jd.com
Copy the code

This way, the page will open normally even if you access it using HTTPS.

The mock data

Mock data is an effective way to mock a project where the front end is static and interactive, the back end interface is incomplete or has no data, or the state of some data is not readily available. There is also a case where there is a problem online and we need to reproduce the data in different states. (Writing mock data into code is another option, but it involves code changes and is not recommended, first because we want to keep the code logic separate from the mock data, and also because it is not appropriate in a development environment.)

Take, for example, the interface to find out if a user is new. This interface supports both JSONP and non-JSONP forms

Mock non-JSONP requests

Api.m.jd.com/api?appid=p…

Json file in Files or Values and create fake data in this file in the data format required by the interface document:

{
    code:0,
    data:
        {
            newComerFlag:false,
            pin:"XXXXXXX"
        },
    datas:[],
    message:"Operation successful",
    statusCode:200
}
Copy the code

Add Rules to Rules

// Return the contents of queryNewComerInfo using the re method to match it
/functionId=queryNewComerInfo/ file://{queryNewComerInfo.json}
Copy the code

Mock the json request

Api.m.jd.com/api?appid=p…

If the above address is accessed, the JSONP request returns data like this:

   Zepto1608810637767(
       {
       code: 0,
       data: {
           newComerFlag: false,
           pin: "XXXXXXX"
       },
           datas: [ ],
           message: "Operation successful",
           statusCode: 200})Copy the code

For those familiar with JSONP, the name of the callback function that returns the content, Zepto1608810637767, is the same as the value of the JSONP parameter (callback by default) in the URL. Because jSONP parameter values are random, we cannot return jSON-formatted data directly. Here we use whislte’s TPL:

The basic functionality of TPL is the same as that of File, but TPL has a simple template engine that replaces {name} in the content of the file with the fields corresponding to the request parameters (if there is no automatic replacement), which can be used for mock Jsonp requests.

So, if the request is JSONP, we need to replace the JSONP parameter value in the URL with {JSONP} in the json that returns the result:

   {jsonp}(
       {
       code: 0,
       data: {
           newComerFlag: false,
           pin: "XXXXXXX"
       },
           datas: [ ],
           message: "Operation successful",
           statusCode: 200})Copy the code

The whsitle rule configuration is as follows:

/functionId=queryNewComerInfo/ tpl://{queryNewComerInfo.json}
Copy the code

If the above does not satisfy the requirements of mock data, you can use whistle.vase if you want more flexibility or logical relationships between data items

The vase plug-in has built-in rendering engines such as Default, doT, dust, EJS, Handlebars, Jade, Mock, Mustache, Nunjucks, swig, VM and script for parsing custom scripts. Through this Whistle plug-in, You can use templates to combine json, HTML, images and other data needed in the mock development process with the corresponding engine. You can also use script to customize scripts to obtain templates and data in a more flexible way and control output. (If only static data does not need to be generated in batches with the template engine, Just use Whistle’s file or xfile.)

I basically use whistle’s file or TPL in my work. If there is a logical relationship between data items, I think manual modification of JSON file can meet the needs. There is no more explanation for Whistle. vase here, and the official website of whistle.vase is very clear, so you can learn about it yourself if you are interested.

The use of vein as

Whistle integrates with Weinre for debugging remote pages, especially on mobile. The configuration mode is pattern Weinre ://key

For example, I want to debug the jingdong home page. The configuration in Whistle is as follows, where the key is honepage:

https://m.jd.com/ weinre://homepage
Copy the code

After the configuration is complete, click Weinre at the top of the page to view the data of a homepage (the configuration rule does not specify key, default is anonymous) :

Click on homepage and it will look like this:

As you can see from the image above, Weinre has Elements, Resources, Network, TimeLine, Console and other modules that we use in browsers. Targets indicates the page that meets the filtering rules. If the page is Displayed as None, it does not exist. We turn it on using the phone with the proxy configuredM.jd.com/, you can find Target… Click on Elements, Console, and so on to see the corresponding page:

Select the corresponding DOM node in Elements, and the corresponding phone will mark the DOM’s location just as the browser does. This is useful for checking if the DOM is properly rendered:

Original address: yolkpie.net/2020/12/24/…