头图

5 tips for debugging hybrid apps in Chrome

pingan8787
中文

For front-end developers, Chrome is really an indispensable development tool, ranging from page display to small BUG debugging/HTTP packet capture, etc. In this article, I will share with you a few frequently used in the process of developing hybrid applications. Debugging skills.

1. Debug Android applications

In the process of mixed application development, it is often necessary to debug the code of the H5 project in the Android application. Here we need to understand how to debug the Android application on Chrome.
Let’s briefly introduce it, I hope everyone can actually debug it:

1. Preparation

There are a few things that need to be prepared:

  1. The Android package must be a debuggable package. If it cannot be debugged, you can ask a native colleague to provide it;
  2. Connect the Android phone to the computer via the data cable, then turn on the "Developer Mode" and enable the "USB Debugging" option.

2. Chrome start debugging page

chrome://inspect/#devices " in the Chrome browser, then select the page you want to debug in the WebView list, and click the " Inspect " option. Just like debugging PC web pages, use the Chrome console to debug.
image.png
Then you can debug normally, and the operation is the same as the debugging page on Chrome.
image.png

3. Attention

If you visit the " chrome://inspect/#devices " page, you will always be prompted with 404, you can visit [https://chrome-devtools-frontend.appspot.com](https://chrome-devtools-frontend.appspot.com) in Chrome first, and then revisit " chrome://inspect/#devices ".

Second, filter requests for specific conditions

In the Network panel, we can use various filter conditions to view the requests that meet the conditions in the Filter input box.

  1. scenes to be used:

For example, you only need to view the requests that failed or meet the specified URL.

  1. How to use:

In the Filter input box on the Network panel, enter various filter conditions. Supported filter conditions include: text, regular expressions, filters, and resource types.
Here we mainly introduce "filters", including:
image.png
The purpose of entering "-" here is to allow everyone to see what advanced options Chrome provides, and there is no need to enter "-" when using it.
If you enter "-.js -.css", you can filter out ".js" and ".css" files.
For more usage of filters, you can read "Chrome DevTools: How to Filter Network Requests"
3.筛选特定条件的请求.gif

Three, quick breakpoint error message

In the Sources panel, we can turn on the switch of automatic breakpoint for exceptions. When our code throws an exception, it will automatically breakpoint where the exception is thrown, which can help us quickly locate the error message and provide a complete error message method. Call stack.
image.png

  1. scenes to be used:

Need to debug the situation where the exception is thrown.

  1. How to use:

In the Sources panel, turn on the abnormal automatic breakpoint switch.
v22cz-kujyd.gif

Four, modify the code when breakpoints

In the Sources panel, we can right-click on the number of lines that need a breakpoint, select "Add conditional breakpoint", and then enter an expression (such as assignment operation, etc.) in the input box, and the following code will use the result.
image.png
image.png

  1. scenes to be used:

When debugging, it is convenient to manually modify the data to complete subsequent debugging.

  1. How to use:

In the Sources panel, right-click on the number of lines that need a breakpoint and select "Add conditional breakpoint".
2断点时修改代码.gif

Five, custom breakpoints (events, requests, etc.)

When we need to make custom breakpoints, such as intercepting DOM events, network requests, etc., we can use XHR/fetch Breakpoints and Event Listener Breakpoints to enable the corresponding breakpoints in the Source panel.
image.png

  1. scenes to be used:

When you need to debug, you need to add custom breakpoints (for example, you need to intercept DOM events, network requests, etc.).

  1. How to use:

In the Sources panel, use XHR/fetch Breakpoints and Event Listener Breakpoints to enable the corresponding breakpoints.
4.自定义断点(事件、请求等).gif

Six, learning materials

  1. Chrome tips community
  2. Chrome Developer Tools Chinese document
阅读 957

前端自习课
pingan8787前端开发学习记录
2.4k 声望
2k 粉丝
0 条评论
你知道吗?

2.4k 声望
2k 粉丝
宣传栏