5 tips for debugging hybrid apps in Chrome

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.

Then you can debug normally, and the operation is the same as the debugging page on Chrome.

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:

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"

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.

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.

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.

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".

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.

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.

Six, learning materials

1. Chrome tips community
2. Chrome Developer Tools Chinese document