A short story

One day, the company hired a new development students, Zhang SAN. The first day was spent in the configuration test environment. Because the demand was urgent, Joe started taking it the next day. After the development of the function he is responsible for, the need to experience the product, Zhang SAN hurriedly to product configuration environment. Then they give the deployment address to the test, let the test configure the test environment, and hurry on to the next feature development. After he needs before the development of new function and repair function to switch between the bug, so he needs frequent modification agent configuration, even during the need and test students to a wave of “intimacy”, because the test students feedback bug, there is only one phenomenon and the capture of the information is not complete, some still is not a bug, just someone to deploy code, It overwrites his code.

Zhang SAN, who likes summing up, summed up the problems he encountered in developing requirements for the first time after completing the requirements.

1. Switching environment costs a lot

In parallel development with multiple requirements, developers need to switch environments for development, test students need to switch environments for verification, and products also need to switch environments to experience different requirements.

However, the operation of changing the environment requires the operation of the agent tool or modification of the system host file, which is inefficient. To make matters worse, when the test server IP changes, it also requires everyone using the environment to modify the configuration.

2. Environment conflicts and code overwriting

As the business evolves, there are often scenarios where multiple requirements are involved in developing a project. Due to the insufficient number of test servers, there are often environment conflicts, or even situations where the environment is overwritten by other required code.

3. The fault locating information is incomplete

When a problem is reported during a product or test, only screenshots and videos are provided. This is obviously not enough for development to address the problem. Some products or tests export request information from proxy tools, which makes it easier for developers to locate problems. However, the development still needs to download the corresponding file and import the proxy tool to view, the whole link is lengthy and highly dependent on the proxy tool.

Zhang SAN wants to speed up the team, so search for an environment configuration and capture debugging artifact -Nohost.

What is Nohost

Nohost is a multi-user multi-environment configuration and packet capture debugging platform ** implemented by IMWeb front-end team based on Whistle. **Nohost covers the three stages of development, testing and product experience in the research and development process, providing cross-end proxy tools, support one-click switch experience environment, request mock, real-time/historical packet capture, proxy forwarding and other capabilities, to solve the problems of rough test environment management, easy conflict, low efficiency of joint tuning, complex configuration and so on. After the server is configured, the local proxy can be used only by pointing to Nohost, which is extremely friendly for newcomers. For product/test students, Nohost client is used on PC and Wi-Fi agent is used on mobile terminal. To switch the environment, you only need to click the environment selection tool (dot) on the page to select the corresponding environment. Production and testing do not need to focus on environment configuration, development does not need to produce/test students with environment!

Then Zhang SAN checked the function of Nohost.

3. Nohost functions

1. Automatically inject “Environment Selection Tool” – dot

Through the injected “environment selection Tool” – dot, you can quickly switch to any environment experience/debugging on the page.

The Environment Selection Tool also has other quick functions, such as viewing captured packets and copying links. Support for using custom Whistle plug-in extensions.

Environment Selection Tool supports multi-side injection: Web, PC client, H5, applets, and more technology stacks are being supported.

2. Multiple accounts and multiple environments are supported

Nohost supports multiple accounts, and each account can create its own environment.

The environment proxy rule can be quickly introduced into the environment configured by others through @, and any configuration changed by others can be synchronized in real time without notifying the person who introduced the environment.

3. Supports packet capture and sharing

In the process of debugging and testing, if we find that there may be a problem with a request, we hope to send this request to the background to check the specific problem. The original way is to take screenshots, but obviously it is difficult to complete the information. Nohost supports sharing captured packet logs with others.

Development in the web page directly view captured packet information.

4. Powerful plug-in system

A powerful plug-in system, can let other developers do not understand the system implementation, in the form of plug-in to carry out custom function extension. Nohost supports extension with plug-ins. If you have customized requirements, you can use plug-ins to customize them. If you need extensions to functionality such as vConsole injection, packet capture summary, Mock, etc., you can do so through plug-ins (Nohost is compatible with all plug-ins for Whistle).

Zhang SAN thinks Nohost meets his needs very well, so he tries to access Nohost.

4. Access Nohost

Access to Nohost is very simple. You only need to prepare a server with node environment and access Nohost quickly in three steps.

  1. NPM global installation @nohost/server

  2. Configure the proxy and forward to the server

  3. Configure the entry, open the page, start to experience Nohost

For details, go to nohost.pro/docs/quicks… Look at it.

After completing the above three steps, Zhang SAN configured some rules and tried them on the PC first.

# Some interfaces go to the test environment ke.qq.com/cgi-bin/get_cat_info 127.0.0.1:7001# 8. idqqimg.com/edu/assets/css/index/index.live_fead2b5f.css these requests 404 error statusCode://4047.idqqimg.com/edu/assets/js/common_css_b2f06076.js statusCode: / / 404 # set the cross-domain head *. Idqqimg.com resCors: / / *Copy the code

Specific usage video

After the experience, Zhang SAN was very satisfied. Compared with the previous way of changing the environment in the form of agent software or host, now he can directly switch the environment in the page, with high efficiency. It can also share captured packet information, and when testing feedback, it can add a link to the captured packet information, so that the development can preview in real time.

Excellent performance in PC, let Zhang SAN can’t wait to experience the performance of H5. Zhang SAN configures the address of Nohost in the Wi-Fi agent and opens the web page for experience:

Packet capture information is also displayed in Nohost.

Zhang SAN was still very satisfied with his performance in H5. After configuring wi-fi agent, he could connect to the test environment. If there is a problem with product experience, the corresponding information can be seen remotely in real time.

Zhang SAN suddenly thought of, his company also has small program business, is….

The request of the small program can also be viewed remotely. Zhang SAN silently said in his heart: Perfect! This will greatly improve the efficiency of the team!

Five, the summary

Nohost is an environment configuration capture debugging magic device based on Whistle implementation. It can solve the problems such as environmental conflict, coverage, inconvenient environment configuration and low efficiency of switching environment, incomplete information when feedback problems in the process of research and development, reduce repetitive labor and improve the efficiency of research and development.

In the meantime, welcome to join the Nohost communication group. Considering the group qr code has time limit, please scan the code to add friends, verify the replyNohostWill unify and pull everyone into the group.

  • Nohost official website: nohost.pro/
  • Nohost git:github.com/Tencent/noh…