preface

Today’s large projects are basically separated from the front and back ends; The front end is not just responsible for the interface, the interaction; More and more work needs to be done, but it is inseparable from the communication and cooperation with various departments, so as to be efficient; The most close is the back end, today simply share the tool used in the process of project combat -fiddle tools;

A fiddle,NO,NO,NO……

Fiddler is one of the most powerful and useful Web debugging tools out there. It logs all HTTP and HTTPS requests from clients and servers, allowing you to monitor, set breakpoints, and even modify input and output data. Fiddler includes a powerful event-based scripting subsystem and can be extended using the.NET language

The more you know about HTTP, the better you’ll know how to use Fiddler. The more you use Fiddler, the more you’ll learn about HTTP.

An understatement. – A word about fiddle

The free Web debugging proxy for any browser, system or platform provides a variety of powerful functions, such as debugging, debugging, and debugging

  1. Let’s start downloading and install next along the way. Ok, you will see this screen

This is the request triggered when I click the Baidu search box. The content of this request can be seen in the webform on the right. The JSON below is the content returned by the server. It’s clear. It’s clear.

Basic fiddler tools can be found in the documentation on fiddler’s website or in moOCs video tutorials.

Only I can lead you to victory

To test a girl

For testing, as shown above, analyze the request, locate the front-end or back-end problems, check whether the interface is consistent with the data, sometimes there are magic problems, either logical problems, or the interface and data are inconsistent, accurate positioning problems, accurate hair pan;

To big front end

Fiddler doesn’t just have a simple packet capture feature, but there are a lot of plugins in its community that make it the best it can be. Willow–Fiddler’s plug-in, which is often used in the project, provides functions such as redirection and host host, and solves joint tuning and cross-domain problems in three seconds. Yes, it is three seconds. Willow. If the installation fails, right-click the fiddler2 and open it as an administrator. Once installed, you will see a small green icon on the right. Ok, click it.

The core content

Problem status: Our project is usually developed under local service, usually 127.0.0.1:8080. If we want the local code service to be able to access the back end normally, or access the real data of the test machine, this is cross-domain, because the local and the back end or the test machine are not under the same domain name, there is no access to data. The usual practice is to start an Nginx service for forwarding, which is a cumbersome process with configuration changes and even more complicated when code changes are made in real time…

** Solution: ** My approach is: 127.0.0.1 proxy to a domain name such as www.cloud.com, then access this domain name can see your project, this domain name also does not have backend or test machine interface, how to do, continue proxy forwarding, domain name all interface proxy to the real IP address. For example, if the service of the back-end interface or the test machine interface is under 10.50.12.24:8088, we can point www.cloud.com/order[order is the fixed project name of the back-end interface, and each interface is under this directory] to 10.50.12.24:8088, which is a perfect solution.

  1. Add projects in WillowThe shortcut CTRL + p;
  2. Adding a host agentctrl + o;
  3. Add point to Add extenctrl + n;

Children who don’t understand look at pictures

Graph one:

To the backend

Backend warriors sometimes want to use the front-end code of the test machine to access their own local services, so that they don’t waste the resources of the front-end children, the test machine tests itself; This step is actually the reverse process of the above, much simpler, the front-end code of the test machine naturally points to the back-end code of the test machine, using the third step of the above idea; To add a pointer to this machine, note two points:

  1. Direct proxy interfacewww.cloud.com/order–> Local service + port
  2. If HTTPS is used, you need to configure the HTTPS certificate for Tomcat on the backend

Introduction is here first, more use skills, in the follow-up update… Write share for the first time, welcome issues, and give a thumbs up if you find it helpful

Afterword.

Sometimes I am lazy and let the back end click on its own point. How can the back end access the code on the front end developer’s computer to access the back end service on its own computer? This question you can think about, next time to share…