I want to debug my ionic application in WebStorm.
I am able to run the app in browser. But how can I debug?
I tried: ionic serve --debug which doesn't seem to trigger any debugging?
How can I debug the app when it runs in browser?
With Chrome you can type chrome://inspect into your address bar
As soon as you are running your Android app, you can inspect the app when you are running it with the "ionic run android" or "ionic emulate android" command
The version of Android, however, must be higher than 4.3 I think...
According to the documentation there's a few different way's to do this. Also could you try one of these listed below since you have tried ionic serve already?
ionic run
ionic emulate
The run or emulate command will deploy the app to the specified platform devices/emulators. You can also run live reload on the specified platform device by adding the --livereload option. The live reload functionality is similar to ionic serve, but instead of developing and debugging an app using a standard browser, the compiled hybrid app itself is watching for any changes to its files and reloading the app when needed. This reduces the requirement to constantly rebuild the app for small changes.
Hope this get's you going! Let me know how it work's out for you.
I found this tool very useful, you can attach your device and get a real time inspector on your Cordova app(for iOS and Android platforms).
The browser is where I do most of my debugging for ionic. What browser are you using to do the debugging? I use Chrome and turn on DevTools. There is a source tab where you can browse your app code to find spots for breakpoints. For example, you can set a breakpoint in the code for a controller on a click event and step through the code. Then, you can use the console to execute commands to test values and inspect objects, etc. Are you unable to make this work? Or, unfamiliar w/ the DevTools? If unfamiliar, there is a resource available here. If not working, are the breakpoints not being hit?
There are a few ways to debug your ionic app.
In the browser you can catch the errors in the console.
If you are emulating your app on a simulator or a mobile device you can install the cardova plugin that displays js errors in the xcode console. So you can emulate your device and catch errors on xcode.
Here is how you add the plugin:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
An alternative is using ionicLab. It worked for me doing the steps: Install the program and prepare all the project dependencies prior to testing. Then, click on Serve option from Testing which is under Platform menu. When the project has been executed, click on the arrow icon of the Preview bar.
As a result, Ionic will throw a Chrome window with the loaded project, so, you can use Developer Tools as it's used commonly. You ought to watch the javascript files, which you use in your project, so that you can debug them.
Simply run: ionic serve -l and inspect from browser developer options.
Related
I'm trying to use expo-dev-client to add react-native-sms-retriever library to my project because expo doesn't have a library that supports reading sms messages. In expo documentation, it's suggested that I should use expo-dev-client to add custom native code. You can see the documentation here: https://docs.expo.dev/workflow/customizing/#developing-apps-with-custom-native-code
I followed all of the steps in starting guide for expo-dev-client. https://docs.expo.dev/clients/getting-started/
But when I start my app using "expo start --dev-client" and run on android, a white screen is shown for a second and then I'm redirected to expo go application page.
in console, the following 2 lines are written:
› Opening on Android...
› Opening com.droppgroup.masterclean://expo-development-client/?url=http%3A%2F%2F127.0.0.1%3A8081 on LDN_L21
I tried this on real device and 2 other emulators but I got the same result. I reinstalled expo go application and it still doesn't work.
Any suggestions on what I can do to make this work?
The issue may be a problem with Expo config plugins, which configure native code for an Expo project, by configuring Info.plist for example. I am currently experiencing a similar issue, though after scanning the QR code, I am directed to a black screen in my Expo Dev Client which crashes and takes me back to the home page. The Dev Client worked perfected until I ran expo add react-native-bluetooth-classic, since I am trying to access iOS bluetooth APIs. I am currently working on this issue, but I just wanted to point you in the direction of config plugins since the examples Expo gives for customizing your runtime have config plugins registred in the "plugins" property of app.json.
It may be necessary to create your own plugin, though I am unsure.
Please let me know if you come up with any fixes, and so will I.
our PWA lives here: https://m.quemesa.com and we also have native apps with the same codebase.
However, we are not targeting the Cordova Browser platform (because it does not seem to be officially supported and I can’t see what benefit it adds) so we have to add slightly different code for our PWA compared to our native app builds. For example, In the PWA, we use the pure Google Analytics solution which requires 2 lines of javascript in the index.html.
For our native builds, we use the Cordova GA plugin, so this is not required. In the PWA we don’t need to link to Cordova.js and Vendor.js for exmaple (they get a 404 error). In the native apps we do.
Currently I am manually editing (yuck) the output folder before uploading to Azure for the PWA.
Is there some way to edit the Ionic Build Process so that I can either have 2 versions of the Index and it grabs the one it wants for the output folder depending on the build type OR it can modify the html file at build time?
The current ionic build tool alone doesn't support this.
You could just have 2 versions of index.html and a small script to swap between them and build both versions.
It's also something you could do with a "full" CI build tool. Since you mentioned Azure you could make use of Visual Studio Team Services. There are existing tasks available for npm (to install ionic, run a PWA build) and running command/PowerShell scripts. It may be easier to start off by setting up an "agent" VM with everything it needs to build your app (node, ionic, Android studio, etc) then build your build process up from there.
I use gulp-preprocessto update index.html on build depending on platform targeted. The idea of the preprocess is to generate a target index.html before the ionic serve/build with the exact declarations required for the mode selected, pwa or native. More details on this post "Using Ionic/Cordova app sources as PWA"
I am using the free postman app on win 7.
I am unable to see application menu and update tab on settings dialog.
I have enabled debugging for packed apps as shown below.
Debugging for packed apps Mac, Windows, Linux, Chrome OS Enables
debugging context menu options such as Inspect Element for packed
applications. #debug-packed-apps Disable
Is there any way to get these items?
I am also using Postman Windows app on Win7.
I am getting all those options.
What version are using, the current is v4.10.3.
You may try to uninstall the existing one and re-install the current version.
So there is a native app and there is a chrome app i.e. Postman for windows and Postman for Chrome.
The Postman for Windows app has the options Certificates and Update but i didn't see the same on Chrome App.
Also, the interceptor is an add-on on the chrome app whereas the windows native app provides a proxy settings option.
When I run my ionic project to my mobile it was working good, and when I open developer tools it's fine.
I could able to view all console statement in my developer tool window, now when I run it again app runs well in the browser and in my mobile , I am not able to see any console statement.
What I get is
device ready has not fired after 5 seconds.
cordova.js:1223
Failed to load resource
file:///android_asset/www/build/index.js.map
could someone help me to view my console statements
This should be fixed in cordova-android 6.1.0. It has not been added to the npm-registry yet, so you can use it by placing this to your config.xml:
<engine name="android" spec="https://github.com/apache/cordova-android.git#6.1.0"/>
I want to write a unit testing code for a Firefox OS packaged app.
src/manifest.webapp
src/app.html
src/app.js
test/manifest.webapp
test/unittest.html
test/unittest.js
Is there a way to load app.js from unittest.html?
<script src="../src/app.js"></script>
This doesn't work when I launch unittest.html as a packaged app.
Made an example and it works for me. Take a look at https://dl.dropboxusercontent.com/u/134884/packagedtest.zip . I tried it in a Firefox 1.2 Simulator using the App Manager from Firefox Nightly, if it makes any difference.
Something else must be the issue. Use the developer tools to connect to the simulator to see if there are any relevant errors in the console. If you are using the App Manager, just click the "Debug" button bellow the app to do that. If you are using the Simulator 1.1 add-on, click the "Connect" button next to the app.