Debugging method of H5 in app you need

Time:2020-4-22

Debugging method of H5 in app you need

Mobile debugging

  • In my work, I often encounter the nesting of H5 in the native app, but in some content that needs to be debugged in the app, there is no such tool as the chrome developer tool to help us quickly locate the problem. After the development of the recent project, I have some new understanding of H5 development in the app, so I record (the following method is a more useful debugging method in my opinion, if any) Its way, welcome to add, correct.)
  • IOS

    • Let’s start with the conclusion: < font color = “ාff9335” >Xcode-simulator< / font > + related < font color = “ාff9335” >app debugger< / font > package + < font color = “ාff9335” >Safari browserDeveloper mode of < / font >
    • You need to download it in the app store firstXcode => open developer tool => simulator

Debugging method of H5 in app you need

  • You will get a simulator

Debugging method of H5 in app you need

  • After initializing the emulator, drag the app into the emulator and open the H5 entry,
  • Open Safari browser, Safari browser = > Preferences = > Advanced = > display in menu bar“Development”Option, click to check

Debugging method of H5 in app you need

  • On the safari menu bar, development = > select your emulator = > select the corresponding page

Debugging method of H5 in app you need

    • Done!
    • Android

      • Let’s start with the conclusion: < font color = “#ff9335” > Android < / font > + < font color = “#ff9335” > a data line < / font > + < font color = “#ff9335” > chrome < / font >
      • First, connect the data cable to the mobile phone and computer
      • Open mobile developer mode: settings = > about mobile = > version number = > continuous Click
      • Found in settingsDeveloper options=>Turn on USB debugging, USB debugging (security settings)

    Debugging method of H5 in app you need

    • Turn on H5 in app of mobile phone
    • Input in the chrome address bar of the PCchrome://inspect/#devices

    Debugging method of H5 in app you need

    • In chrome, click the check under H5 you want to debug

    Debugging method of H5 in app you need

    • The computer will automatically pop up a window with page and debugger for you to debug and develop

    Debugging method of H5 in app you need

    • Done!
    • I hope you can enjoy what you have seen, and then collect it. Next time you don’t remember, you can come back to see it!