Versions Compared

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
    Network – (Troubleshooting common features)
  2. Commonly used features
           Official Documentation: https://developer.chrome.com/docs/devtools/network/
    1. Network
      Front-end browser and server side network interaction request.
      Image Added
      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.
      Image Added
    3. Commonly used function description
      Image Removed
      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).
      https://developer.chrome.com/docs/devtools/network/
      .  Track log detail grid, you can right-click the header to customize the columns to be displayed.


       
  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.
    Server-Side: 

    sdf
  4. sdf水电费sdf