Q: If a page in the mobile terminal (APP) is found to be faulty, how can we locate the problem? A: Fiddler + Weinre (debug CSS styles) + vConsole(debug JS logic)

Debugging points

  • Replace online files with local files

    • Use Fiddler to grab HTTP(S) requests in your APP, and open the AutoResponder to debug by replacing the online file with a local one
    • Set up a wi-fi network on your phone using Fiddler’s proxy
    • Note that you need to enable Fiddler to decrypt HTTPS for fetching HTTPS requests. http://IP:8888 Fiddler Echo Service will download the FiddlerRoot Certificate

  • If it’s a page style problem, weinre is recommended for debugging

    • Open the vein as Server
    • Insert a Target Script into the page you want to debug
    • Example Start the debug client user interface

  • If there is a problem with the functionality of the page, it is usually JS reporting an error

    • You can add a global error handler to the page to assist in locating the problem

      Window.onerror = function(messageOrEvent, source, lineno, colno) error) { alert(JSON.stringify(arguments, null, 4)); }; </script>Copy the code

  • If the JS load is cross-domain, then the error message is only Script error, how to get the useful error message?

    • If the JS server supports CORS, you need to set it<script>The labelcrossorigin="anonymous"
    • If CORS is not supported, you can use Fiddler to intercept the page, change the JS to the same domain name, intercept the request, and map THE JS resource to the local file
    • AlloyTeam/Rosin and Tencent/vConsole are recommended to view log information more easily

Other real machine remote debugging methods

  • jieyou/remote_inspect_web_on_real_device