this article is based on DevEco Studio 5.0.5 Release
the previous article talked about the Testing tool DevEco Testing, and mentioned that there is a function in it, the page DOM tree acquisition, which can analyze the UI layout structure of an application, so that we can find the problems existing in the UI interface. At that time, we were amazed. However, to use it, we still need to download it. More than two G's are needed. If it is only for UI layout analysis, it is really a bit overqualified. In fact, devEco Studio has already provided it for us. This article will take you to understand ArkUI Inspector, a sharp weapon for layout analysis.
What is ArkUI Inspector
ArkUI Inspector, well-known for its meaning, is UI inspection. It allows developers to quickly view the UI display effect of an application on a simulator or real machine in DevEco Studio, and can quickly analyze and locate the problems existing in the UI interface by viewing the interface status after multiple operations.
Function entrance
the entry is in the bottom line of the menu in DevEco Studio, as shown in the following figure:
quick Use
after clicking the ArkUI Inspector option at the bottom, you can select the UI process currently displayed on the front of the device in the device application list, it should be noted that your phone or emulator must be online and the application has been launched.
Click the need to check the application process, you can view the current page in the foreground.
Left component Dom number structure
In the area on the left, you can see the page name and component usage information of the current page layout, which can be said to be at a glance for the hierarchy in the page.
Switch Page
when you switch the page, you can update the view by refreshing the button. After clicking, the page will automatically switch, which is convenient for us to quickly analyze the hierarchical structure of different pages.
Synchronize Changes
click on the component on the left or click on the view on the UI interface, and you can make a synchronous selection. For example, if I select the Image component on the left, then the picture view will also be selected in the UI interface. Similarly, if you click on the view in the interface, the left will also change synchronously.
Right Component Property Information
after a component is selected in the left or middle interface, all the attribute information of this component, such as width and height, xy coordinates, background, margin,padding, and so on, is displayed on the right, which is convenient for us to do detailed analysis on the current UI layout.
Display component tree node information
if you want to view the current component node information on the left, you can check the configuration item Show Tree Statistics in the component Tree information to open it.
After opening, hover over the component on the left for a while and then you can view it.
UI interface snapshot
if your device is not online, that is, there is no simulator or real machine, ArkUI Inspector also supports exporting and importing snapshots of the application UI interface to view the display effect of the application UI interface without the device.
The icon with the arrow to the right can be used to export the snapshot of the application UI interface to the local, and the icon with the arrow to the left can be used to import the snapshot of the local application UI interface.
The exported snapshot is an. arkli file with the following effect:
with the snapshot, you can select the local snapshot to view it through the left arrow icon. It is opened directly in the IDE, exactly the same as viewing it on the bottom device.
UI component source code jump
this function is very powerful. You can double-click the UI component information on the left side of ArkUI Inspector to directly enter the current component code location, but you need to turn on this function.
Click on the module you want to run, click on the first Edit Configurations, as shown in the following figure:
check "Enable DebugLine" to turn on the source code jump function. After clicking OK to save, you need to run the project again.
In this way, the source code jump function is realized. As shown in the following figure, double-click the component on the left to reach its source code and will be selected by the border, which is very convenient.
Related Summary
at present, ArkUI Inspector has certain limitations. First of all, it only supports applications running in the foreground. That is to say, if your application is not started and is not in the foreground, then the process cannot be selected and the UI view cannot be viewed. The above conditions also mean that only full-screen applications or windows with the focus on the foreground are supported, and only Stage project projects are supported. Because it is UI view analysis, then also does not support the application market shelves of commercial signature applications.
In short, ArkUI Inspector is very convenient for us to analyze the problems existing in UI interface, such as margins, hierarchical structure, etc.
This article label: Hongmeng Development Tools/DevEco Studio
Top comments (0)