Hybrid Application Development at Telefónica - Part 3: Debugging
In previous articles, we have discussed how, at Telefonica, we created a framework on top of the webview implementation, along with our tips and motivations to achieve the best performance and user experience in a hybrid application.
Debugging is a crucial part of the development process, and it is especially important when working with a hybrid application. Since the webview acts as a black box for both the native application developer and the web developer, it can be challenging to identify and fix issues that may arise.
One of the problems we faced when working with webview was the need to have the device connected to the computer in order to use tools like Chrome Inspector for Android or Safari Inspector for iOS. This was not only inconvenient, but it also slowed down the debugging process.
To address this issue, we developed a debugging tool that could be used directly within the application, specifically within the debug builds. This tool allows us to inspect and debug the webview without the need for external tools or a connected device, allowing us to quickly identify and fix issues.
With this tool, we are able to see in real time how many instances of webview are being created. Also, we can see the URL that is loaded in each webview, as well view the status code and description for each of them. In addition to these basic details, will also provide information about the navigation and presentation mode of each URL along with any other query parameters they may have.
Finally, it displays the webview’s navigation history with all the debug logs and statistics that may be generated during the webview flow giving us a clear understanding of what is happening within the webview and the application at a ny given time.
Debugging is a crucial part of the development process, and it is especially important when working with a hybrid application. Since the webview acts as a black box for both the native application developer and the web developer, it can be challenging to identify and fix issues that may arise.
One of the problems we faced when working with webview was the need to have the device connected to the computer in order to use tools like Chrome Inspector for Android or Safari Inspector for iOS. This was not only inconvenient, but it also slowed down the debugging process.
To address this issue, we developed a debugging tool that could be used directly within the application, specifically within the debug builds. This tool allows us to inspect and debug the webview without the need for external tools or a connected device, allowing us to quickly identify and fix issues.
With this tool, we are able to see in real time how many instances of webview are being created. Also, we can see the URL that is loaded in each webview, as well view the status code and description for each of them. In addition to these basic details, will also provide information about the navigation and presentation mode of each URL along with any other query parameters they may have.
Finally, it displays the webview’s navigation history with all the debug logs and statistics that may be generated during the webview flow giving us a clear understanding of what is happening within the webview and the application at a ny given time.
Animation that shows the overlay with information related to the loaded web.
To sum up, this webview monitor could be
valuable tool for any developer working with web-based applications. By providing
real-time insights into the behavior of the webview, and by offering a range of
detailed information and analysis, it can greatly
improve the efficiency and effectiveness of the development process.
And that’s it. We hope you enjoyed this final piece. If you found this article helpful, please give it a clap and share it with your friends!
This article is part of a series. If you haven’t read the first of them yet, it’s a good starting point to understand a little more about our journey and motivations.
[Part 1 — Tips and best practices]
And in the previous article, we delved into the technical aspects of how our framework specifically operates.
[Part 2 — Technical aspects]
And that’s it. We hope you enjoyed this final piece. If you found this article helpful, please give it a clap and share it with your friends!
This article is part of a series. If you haven’t read the first of them yet, it’s a good starting point to understand a little more about our journey and motivations.
[Part 1 — Tips and best practices]
And in the previous article, we delved into the technical aspects of how our framework specifically operates.
[Part 2 — Technical aspects]
