Here are two of amway’s tools that I think will greatly improve productivity in development, Charles and Postman.

P.S. Charles. Stop reading Charles, the doctor in Wolverine whose heart is pierced by an old iron rod is called Charles

Be careful with the P.P.S.

The role of both

First of all, there’s not much overlap between the two tools, and using them together is definitely 1 + 1 > 2.

Postman

Postman is mainly used to simulate HTTP requests and can easily test various METHOD requests. Advanced usage can also be used for automated testing operations, as described in Automated Testing with Postman

Charles

Charles is a proxy tool, which can be set up to capture HTTP requests and modify the actual content of some requests for debugging purposes. Mainly support mobile devices, cross-device debugging artifact

The order used in everyday life

In general, during the development process, Postman is used to perform local debugging of the interface first, and after verifying that there are no problems, the code will be deployed. After deployment, mobile devices can be used to check the effect. At this time, in order to verify the effectiveness of the interface, we will use Charles to set up the proxy and get the request parameters and return values when mobile devices access the interface for verification to ensure that the interface is normal in the production environment.

If there is a problem in the production environment, Charles can be used to capture the packet first (that is, to get the request information of the interface). When the interface does have a problem, we now have two ways to debug:

  1. useCharlesSet up a proxy to proxy a remote server address to a local service for debugging
  2. usePostmanRequests to simulate the current production environment (fromCharlesCopy header, query, etc.)

The above operation is very intuitive, very efficient, if you do not use this kind of tool, rely on human debug, I do not know how much extra time.

Installation and use of Postman

Postman is a purely free tool (of course, a multiplayer collaboration feature costs extra) powered by Electron.

Official website: www.getpostman.com/ Download address: www.getpostman.com/apps

The download & install process is skipped here. The new P.S. version recommends installing standalone apps instead of Chrome plug-ins

The app should look something like this:

The first is the content body on the right, which contains the most basic Settings.

  • Specify the Method of the request
  • Sets the requested URL
  • Add the parameters that are carried with the request

After the above items are set, click the Send button to Send a request. Of course, if you want to add some Header information when sending a request, you can edit the Header information directly below, similar to Params.


After the request is sent, you can see the result of the request below.

  • The Body represents the result of the response
  • Cookies Cookies returned by the server
  • Headers is the various Headers that are set when the server returns them (content-Type, Status, CORS, etc.)
  • Test Results, which are the Results of Test script execution (if written, see automated Testing with Postman, previously written)

The next line is a display of the returned data, which is automatically formatted for the content-Type of the returned value by default. Three buttons toggle views (format, raw data, preview). If the HTTP request is returned as an HTML file, the preview state will look like a browser, but unfortunately, Static resource references in a page must be absolute paths. You cannot use only

Another nice thing about using Postman is that if you need to interface with someone else, you can write the corresponding format in Postman and try to Send the request. If the interface does not meet your expectations, you can click the code below the Send button to generate the request in various languages. Copy directly to the other person, ask the other person to help check where the problem is.

The leftmost column, Collections, can be interpreted as a sort of folder that contains multiple requests (that is, a single Request written above). For grouping automated tests, if you don’t use automated tests, it’s ok to just treat them as a folder.

Installation and use of Charles

The installation of these two tools is relatively simple, but the configuration of Charles will be slightly complicated, after all, some things need to be modified at the system level (otherwise, the package can not be captured). Charles is a free download, but the use of charged software, of course, a large number of online.. Crack the scheme, consult the details of the teacher and the valley teacher

The official website: www.charlesproxy.com/ download address: www.charlesproxy.com/download/la…

Configuration after installation

It may be that a large number of certificates will be stuck in the certificate configuration, so I feel Charles is troublesome and do not want to use it. They don’t know what good comes of a trouble.

Setting a Proxy Port

Proxy -> Proxy Setting -> Proxies

After the installation is successful, first we need to set the port number to be used by the agent. Generally we prefer to use 8888. This port number is used to connect to your local device from a remote device. Several other tabs on the same page. The first is a whitelist of ignored IP addresses, domain names, etc. And some special options for MacOS and Firefox.

Set the path to proxy

Set the path Proxy -> Proxy Setting -> SSL Proxying Settings

The next step is to set up Charles to perform proxy-related operations on requests for those paths, which is a configurable table. If it is convenient, you can write *:* in front of the IP address and domain name, followed by the port. * as a wildcard can match all.

Install the certificate locally

Set the path Help -> SSL Proxying -> Install Charles Root Certificate

If you need to perform some packet capture operations on the local PC, you need to install the trust certificate on the local PC. If you use a Mac, it will automatically jump to the key chain management interface after installation. Search Charles in the upper right corner to find the newly installed certificate. Set all of its permissions to always trust.

At this point, the setup on the computer side is over, and then it’s time to set up the remote device, that is, the mobile phone that we usually use and so on. First, we need to ensure that both devices are on the same LAN, and then set up the proxy information on the mobile device.

Take iOS as an example, the setting path is as follows: Settings -> wireless LAN -> Click the exclamation mark icon on the right of the currently connected Wi-Fi -> slide to the bottom to find the HTTP proxy, click enter -> Set the server as the IP address of the computer and the port as the port we set above.

At this point, Charles should pop up a pop-up box indicating that a new device is added. Please click Allow.


Set the path Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser

After clicking, there will be a pop-up box on the computer. Follow its instructions to find a URL in the pop-up box and enter it in the mobile browser (the current version is CHLS. Pro/SSL). P.S. make sure the phone is connected to a local proxy to visit the URL


After the installation of One More Things, the certificate is still not completed. We still need to set up further in the iOS device provider before we can use it. The result of HTTPS is still wrong:

Set path Settings -> General -> About this machine -> Certificate Trust Settings (at the bottom) -> Find our Charles and click CheckBox to fully trust this certificate

Now that the setup is complete on iOS, you can happily use Charles to capture packets.

Some functions in actual use

Replace network resources with local files

At work, if a page suddenly has a bug and cannot be reproduced locally, the problem is suspected to be in the JS file. However, this file is packaged with webpack or something, and Charles is a good way to debug. We can use Map Local to replace some network resources with Local resources, just like above, we can replace the js file compressed online with Local uncompressed (or with debug logic added) js files for debugging.

Set the path Tools > Map Local

For example, we replaced baidu’s home page with a simple local page. At this time through the mobile phone access, we get the mapping in the local file.

Forward the request to the local service

The above is for some static resource file processing, but what if there is an interface problem? Calling the interface failed, but we don’t know why, so we can use another feature, Map Remote, to forward some requests to the local server. This allows you to debug without having to change the code on the server.

Set the path Tools > Map Remote

A few points to note:

  1. If an item is empty, it matches all
  2. If the proxy is sent to the local server, the protocol field in Map to must be HTTP; otherwise, the HTTPS request will be forwarded as HTTPS
  3. Localhost :8000 (www.baidu.com) localhost:8000 (localhost:8000) To solve this problem, you need to check the Preserve Host header below to ensure that the header information does not change

Modifies the return value of the request

We can configure some rules to change the return value of some interfaces. For example, we changed all jiasm in a Github interface to Jarvis.

Set the path Tools -> Rewrite

All kinds of rules can be configured. The example only makes the substitution in the Body, but you can also modify the Header and so on.



This will change the return value when we access the interface again:


BreakPoints

In the example above, a rule is configured in Charles so that all subsequent accesses will execute this logic. But it would be too cumbersome to configure this rule if it was just a request to modify an interface. So Charles also offers another solution, BreakPoints, which manually modify the data for a request in a similar way to breaking points.

We right-click on the request to break point and bring up the menu, then go to BreakPoints and click Activate.







Rewrite was implemented before BreakPoints because we can see that name has been overwritten for Jarvis


And some other little features

  1. Proxy -> Throttle Settings
  2. Simply pressor to find the request you want to pressor, right-click to find Repeat Advanced

See the official documentation for more examples

reporter

Postman and Charles are great tools for improving development efficiency. Postman can simulate requests, perform easy automated tests, and monitor performance. Charles can quickly debug problems locally (and also do some performance testing). I encourage you to make good use of tools and not waste your time on things that can be replaced by tools.