Charles tutorial (3)

Let you learn knowledge clearly, there are codes, there are explanations, copy of the walk, learn will!Copy the code

I use [MDnice] typesetting, resulting in the content is too large to put down at one time, can only be serialized

The section

• 1-4 Familiar with basic environment
• 5-7 Troubleshooting scenarios
• 8-9 breakpoint explanation
• 10-13 Detailed explanation of data agent, QA answers

8. Charles only captures specific IP addresses

❝

Now there are too many data captured in the panel, which will form a lot of interference factors in our actual development. Now, we will grab a certain IP or domain name alone

Click on add

The default HTTP port is 80

http://www.baidu.com

The protocol is HTTP

The host is www.baidu.com

Port is 80

Copy the code

The default HTTPS port is 443

httts://www.yuque.com

Protocol is HTTPS

The host is www.yuque.com

Port is 443

Copy the code

If you have a domain name, the domain name will be resolved to port 80 of the IP address and that’s a common sense question, not a big deal

If the IP address is not resolved for domain name resolution, enter host as IP address and port as special Settings. If IP is not set to special Settings, the default HTTPS protocol is 443

Sometimes is in the struggle, do not know how to fill in

window.location

Copy the code

Straightforward enough

Then, the next step is to clear the record and refresh the page

As you can see, only requests for the domain name yuque.com are logged

If you don’t want to record anything, in the previous template setting, there is a exclude

Then, the list that is filled in will not be fetched by Charles

9, breakpoint

❝

Because of the crawl whitelist above, the breakpoint is demonstrated here, which is a little clearer, without interfering with invalid requests

Let’s talk about what breakpoints do and how to use them

Role: Intercepts a request or response

Usage Scenarios:

1, the server side has some data coming, I want to test, my “overflow text omission dot dot” will take effect, I will modify the corresponding content super much, test UI display effect

2, request data, there may be several cases, midway before sending the request to intercept, rewrite the data, and then send to the server

3, the same interface, return different data, the display effect is not the same, and do not want to go to the database to create N cases of data, rewrite the interception of the response data, test UI performance effect, but also verify whether js dynamic display hiding is in place

I’ve just listed a few scenarios

Some might say, I’m going to fix scenario 1 by modifying the DOM data directly from Chrome in the Elements panel

Also, I can solve the scenario 1 problem by using “test”.repeat(100) directly where I get the corresponding data

In addition, I can test the effect of scenario 2 and scenario 3 by writing static data directly at the JS request

Of course, dead data is written at the front end of scenario 3. In the case of complex UI and multi-component communication, it is very easy to encounter situations not covered by the scenario

The scenarios are listed above, and there are general ways, but what if h5 is embedded in a container? (The container can be App, wechat mini program, etc.)

Use Charles to demonstrate the target and grab the finch

The domain address of the demo is https://www.yuque.com

Open Proxy –> Recording Setting

Someone knows to set here, but finds that only https://www.yuque.com root path can be fetched to request, subpath data is not recorded, wonder why?

The following requests are actually fetched, but none of them will be logged

❝

https://www.yuque.com/a.js

https://www.yuque.com/article/b.html

https://www.yuque.com/article.css

https://www.yuque.com/article.js

Reason: There are no wildcards specified in path, so Charles thinks you only catch the root path

Break points to the entire site

Proxy –> Break Point Settings

Scheme can indicate the interrupt point for GET or POST requests. If no point is selected, all point requests in the following matching rules are interrupted

Refresh the page, and all requests go through Charles first

I try to use pictures to talk, too much text, quite annoying; Open the breakpoint and it looks like this

Breakpoints for the entire site, not much point, except to do a whole site crawler, data analysis

Interrupt point to an interface/request

It is common in development to interrupt an interface

Do the test to the interface at https://www.yuque.com/api/explore/docs?limit=5

The default is to fetch 5 items of data. Now, it is 10, and the return value is modified

From the GIF figure, we can see that we have tampered the request and response to the data, originally get 5 data, now get 10 data; And we added the request parameter age, but there was no logic in the background to parse it

The point we can GET is that the packet capture tool can modify the request data in the actual application scenario

Scenario 1: There is an interface in the background. If current and pageSize are passed, paging is enabled, and if not, data is returned

Scenario 2: There is an interface to save data, and the input parameter is dynamic. In this case, the data echo is necessary after the test is saved. If there is a PDF for the PDF preview scene, if there is a header, show the header

// Interface parameters may have PDF

{

    name: 'Joe'.

RoleIds: [1, 2, 3]

    pdf: 'http://xxx.pdf'

}



// Interface parameters may not have PDF but have headImg

{

    name: 'Joe'.

RoleIds: [1, 2, 3].

    headImg: 'http://xxx.png'

}

Copy the code