Versions Compared

Old Version 8

changes.mady.by.user Cavin Lang

Saved on

compared with

New Version 9

changes.mady.by.user Cavin Lang

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
  1. Open the developer tools.
    This document uses the Chrome browser for instructions. We can be turned on the tools in several ways:
    • F12
    • Ctrl+Shift+I
    • Three dots in the upper right corner → More tools → Developer tools
    • right click on mouse → Inspect



  2. Commonly used features
           Official Documentation: https://developer.chrome.com/docs/devtools/network/
    1. Network
      Front-end browser and server side network interaction request.

      1). Clear track log.
      2). Keep track log when refresh.
      3). Filter the request you need.
      4). Http request type, our api is Fetch/XHR(AJAX: asynchronous request), we focus on monitoring this type of request.
      5). Dock side: The position where the tool is displayed is below the default. You can choose the appropriate position according to the number and size of your browsers.
      6). Close developer tools.
      7). Track log detail grid, you can right-click the header to customize the columns to be displayed.

    2. Console
      Front-end script code execution output record, script code execution errors will be output here.
      Please note that not all JS errors will affect the normal flow of system functions.
      Only when a function needs to request the server, and the function button or link is clicked, but no request is sent to the server, this is a front-end bug.




  3. Troubleshoot
    System function problems can be divided into two categories: Front-End and Server-Side.
    Front-End: On click of the function button, the page is unresponsive and no http request is sent. It is very likely that the front-end javascript/html code is wrong.
    e.g. : In the test environment, clicking on the menu does nothing. At this time, you can check with F12.


    Server-Side: 
    sdf1). First clean up the previous logs and track only the latest logs.
    2). Click the feature you want to troubleshoot.
    3). Switch request All to Fetch/XHR.
    4). Import columns of request tracking grid 
         Status: it's the status code of the http request, common codes as follow:
              Status code 200 means the interface request is successful;
              Status code 500 means server side server;
              Status code 401 or 403 means insufficient permission to request the API.
              Status code 503 means the server program is being updated and released, and the service is temporarily unavailable. It will take a few minutes and try again.
         Size: The size of the data returned by the server. The smaller the data returned by the API, the shorter the network transmission time and the shorter the waiting time of the user front end.
         Time: The total time taken from the front end to initiate the request, to the server receiving and processing the request, and finally to returning the data.
                   This indicator directly reflects the performance of this interface. The more complex the interface processing logic, the longer the time-consuming;
                   the more data returned by the server, the longer the time-consuming. The longer it takes, the worse the user experience.
  4. sdf