Why your API call fails is something you need to figure out now, based on the status code you get back, or a potential error message that you can find inside the response from the server ( if your app received a response!). If any of the elements inside the list on the left side is red, you should inspect that call in detail.
On the left hand side you can see the names of the different endpoints that your app is calling, on the right you got more tabs to drill down into the header information, the preview of your outgoing call and the actual response from the server. The trouble starts when you see a red error inside the log that indicates something with your API call went wrong.Īt that point you can dive into the Network tab of the debugging tools to inspect all the outgoing API calls from your application.
If your app connects to any kind of API, you might ( or might not) send and receive data. It’s also worth noting that if you prefer to use browsers like Edge or Brave, the same technique applies here since these browsers are based on Chromium. I recommend hiding the app preview since it’s not really adding any benefit to your debugging unless you want to select a DOM element, and it just feels clumsy and laggy.Īnyway, at this point you are ready to debug an Ionic app on every platform using the browser debugging tools, so let’s take a look at some concrete examples that will improve your Ionic debugging skills. To inspect your app with remote debugging, open Chrome and now navigate to chrome://inspect/devices, which will show you all connected devices.Ĭlick on inspect for the instance you want to debug and a new window with the familiar Chrome debugging tools comes up.
FIREFOX LIVERELOAD ANDROID
The process to connect with a running Android application is mostly the same, so again begin by deploying your app to a connected device: ionic cap run android -livereload -external Within this window you can now debug your running Ionic application just like you would do inside your normal browser preview. Voilà – a new window with all the known browser debugging tools comes up. Next select from the top develop menu that you now have the device and the running webview inside the device! Now the fun begins when you open Safari because this is not working with Chrome for iOS.įirst, enable Show Develop menu in menu bar within the preferences of Safari. Get started by deploying your Ionic app to either your connected device or a simulator, which you can do even with livereload when using Capacitor like this: ionic cap run ios -livereload -external It is called like that because we need to connect our browser debugging tools to a remote webview, so let’s do this for iOS first. This process is known as remote debugging and we now even got access to all the real native device logs that happen inside our apps! Yes, the web has come a long way! Remote Debugging iOS AppsĮven if we deploy our app to a native device, it’s still a web application and as such we can continue to use the browser debugging tools!
These options not only help to see your console message but do basically allow every debugging task from setting breakpoints to inspecting your memory consumption.
FIREFOX LIVERELOAD MAC
Within Chrome you can toggle the developer tools by pressing CMD+ option + i on a Mac ( Control+ Shift+ I on Windows) to toggle the developer tools area, which is your essential view for all further actions. I usually use Google Chrome, but Firefox or Safari and other major browsers offer mostly the same capabilities for debugging web applications these days. Since our Ionic app is basically a website, most of our debugging is like debugging a standard website.
FIREFOX LIVERELOAD HOW TO
In this guide we will go through different ways to debug Ionic apps, inspect API calls inside your app and figure out how to access the underlying database and even explore the stored app files, which are some of the most challenging tasks when debugging your Ionic app.īut before we do all of that, let’s start with the basics for debugging. This also means you need to be proficient in different debugging tools and understand when you need to apply which technique to confidently spot and fix every bug in your code. Simon also created the Built with Ionic book where he breaks down popular apps like Netflix and rebuilds them completely with Ionic styling and interactions!ĭebugging Ionic apps is not always easy, as apps usually behave differently on the browser and when deployed as a native mobile app. This is a guest post from Simon Grimm, Ionic Insider and educator at the Ionic Academy.
0 kommentar(er)
