Debugging and analyzing the user interface with Reveal

In the process of mobile development, it takes a lot of time to program and debug the interface of APP, so it is relatively time-consuming to debug the UI without the help of third-party tools other than Xcode. In general, in addition to the UI debugger that comes with Xcode, UI problems can only be debugged by outputting the view structure. This is a very unpleasant thing in the process of compact development. Professional things should be handed over to professional tools, and debugging UI should be revealed.

Reveal is a programming interface debugging tool, which can debug iOS applications and tvOS applications. With Reveal, we can dynamically view and modify the interface of the application during the development process. Avoid having to rerun the program every time you modify the UI. Next, according to the rules, as shown below, what can be clearly explained by pictures does not need words to express, and the expressive force of words is not intuitive enough.

1, as shown in "screenshot of Reveal program running", I use the project officially provided by Reveal as the debugging Demo, the leftmost one is the running effect of Demo in the simulator, and the right one is Reveal. I was amazed at the first sight of Reveal. At the top left of the App is the simulator I am debugging at the moment, and at the bottom left is the UIView. I can view the UI details of the App at the moment. The middle part of the application is the device interface currently being analyzed. Does the rightmost part of the app look a bit like Xcode's Xib editor? Yes, this is where I can dynamically view and modify the UI. This modification is similar to Xcode's Xib modification Ui details. I'm sure you have a good feeling about it. You can start with a little check-up.

2. As shown in "Reveal View UI Schematic Diagram", the dimension of Reveal View UI can also be selected, which can have two-dimensional perspective or three-dimensional perspective. I chose a three-dimensional perspective. As shown above, click on the left to expand the hierarchy of UIView, and click on the corresponding view to see the constraints corresponding to this view. Is it too intuitive to look at the constraints of UI in this way?

Having said that, the most important thing is that this Reveal is so awkward. How can you use it to debug your own App interface or view the UI layout implementation information of other well-known apps? Next, let's talk about how to use it to debug your own App interface.

1. In the Xcode project, select View → Navigator → Show Breakpoint Navigator.

2. On the lower left panel, click the+button, and then select Add Symbolic Breakpoint.

3. Fill in "UIApplicationMain" in the symbol field.

4. Click the Add Action button and make sure that the Action is set to Debugger Command.

5. Paste the following expression into the text box under Action.

6. Check whether the option "Continue automatically after evaluating the operation" is selected.

7. Right-click the new breakpoint and select ""

Move breakpoint to → User

"Save it for all projects.

8. Compile, run your program on the simulator, and then open Reveal to view your layout.

1. Drag Reveal's library into our project, as shown in the "Drag Library into Project" diagram.

2. Don't add the library to the target of our App, as shown in "Choose an add method".

3. Add Reveal's library to the bundled resources as shown in the "Add to Bundled Resources" diagram.

4. As shown in "Select Add to Bundled Resources", select the corresponding display library to bundle resources.

5. As shown in the figure "Reveal library added successfully", when Reveal library appears in the bundled resources, it is added successfully.

6. As shown in "Add corresponding system libraries", add the system libraries required by Reveal runtime.

7. As shown in "Adding Reveal Run Script", the next step is to add Reveal Run Script. Do you find it troublesome? If you have a better way to debug the non-jailbreak real machine, please tell me. Thank you!

8. As shown in "Writing Scripts Corresponding to Reveal", write scripts required by Reveal runtime. The content of the script is as follows:

9. As shown in the "Loading Method" diagram, you need to write the corresponding Reveal loading method in AppDelegate. I use the Swift version, and of course there is the OC version. Then, as shown in the figure "Calling Load method in life cycle method", you need to call Reveal's load method in life cycle method. The loading method of each version is as follows (be careful not to load Reveal in the released version, because it is only suitable for debugging):

Swift:

Goal c:

10. Make sure your computer and your real computer are on the same network segment, then run your App, select your device in Reveal, wait a moment, and the corresponding UI interface will appear in Reveal, as shown in the interface of "Successful Operation Results" (I am running an iPad). You can use Cmd+R shortcut key to refresh the display interface.

Debugging the real machine without jailbreaking is the most troublesome. In the past, real machines could be debugged with breakpoints, but now they can't be used. Don't worry about this anymore. If your device is a jailbreak device, congratulations, using Reveal and esay is very simple. Click on the link to configure with one button, and debugging the App with Reveal Loader will be a surprise. This is the Reveal plug-in developed by developer Richard Heard. You just need to install this plug-in to ensure that your computer and your real machine are on the same network segment, and then choose any App you want to debug (yes, you can do it without your own App, only you can't think of it, there is nothing you can't see, hahaha, there are many benefits).

Thank you for reading this article, because I feel I have written a lot of words and pictures, haha! This article comes from my own work experience. Before contacting and using Reveal, I always used the method of printing the view structure to debug the UI, but the output of this method is very unfriendly, because I have not been exposed to particularly useful tools, so I think this printing method is not too time-consuming. But now I don't think so. In my experience, whenever I can't see the UI layout of the problem immediately, I will use Reveal immediately, because it saves time and effort and is quite interesting.

After reading my blog, if you think this article I wrote is helpful to you, please click on a like below to let me know that this article has played its due role. Thank you! ! !