I found it is very difficult to debug ionic code in chrome debugger.
Actually, it is only angular2 project, but with ionic component. When I open chrome dev tool and select "go to file", I can not find the .ts file that I want to debug at all.
This is strange to me. I can easily debug any angular2 project, why not in ionic?
I want to use ionic3/angular4 to develop a mobile web.
Is ionic also using webpact, if so, I think I just need to enable sourcemap and then debug it in chrome dev tool.
Have you ever successfully debugged ionic .ts file in chrom?
Very simple
Open package.json add below code .
"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
}
do chrome://inspect you can see the source file
If you are using Visual Studio Code you can install the Cordova Tools extension, which will let you debug on the device, it is a very powerful tool for VSCode which is also the best Editor/IDE that I have found to develop Ionic 3 and Angular 4 apps.
The procedure is straight forward:
Delete existing launch.json file from .vscode directory and go to Debugger and click on the little gear icon.
Select Cordova as the debugger.
The extension will create 12 configs for you actually, we need the first one which is 'Run Android on device'
Now, this is what I do (Mac OS X Sierra), depending on how and what components you have installed in your system this may change. I open Android Studio and then connect my usb cable which is attached to my android test device.
Once I see my device listed in the Android Monitor Panel and the debug processes running in the Logcat tab, I switch to my VSCode Window and issue in the terminal: ionic cordova android run, then wait for the app to launch on the phone.
Once the app is showing in the device, click the debug button in VSCode and the debugger should attach.
Now your the debugger should hit your breakpoints and let you debug your typescript code with the app running on your test device.
I guess you could also debug directly from the Chrome Developer Tools, but it may require you to configure some more additional options regarding location of your source map files within tsconfig.json. I rather recommend you vscode as it has tons of useful features, it's free and also has extensions for Ionic 3 snippets, autocompletion and CLI commands from the UI.
I am searching from 2 months regarding app icon in ionic. but failed to set app icon.
I want to mention what i have done.
after running => ionic resources --icon
I can see the images in this folder \resources\android\icon.
I think there is no problem in my project
even i have tried to make scratch project and done the same but same result.
ionic version 2.1.12
npm version 4.0.2
node version 5.7.0
android version "6.0.0"
android platform 23 or 24
There could be some problem with the image file you are using. You can use (.png), (.psd) and (.ai) files. Try using the file in some other format instead of which you already are. Save the file within the resources directory at the root of the Cordova project. The icon image’s minimum size should be 192 by 192 px, and there should be no rounded corners. Then run this command.
Run ionic resources from CLI.
After that following folders will be created
resources > android,
resources > ios.
Add icon.png (or icon.psd or icon.ai) file in resource folder and run ionic resources command again. This will generate the splash image as well.
I had same problem. in my case new changes were not reflected to
/platform/android/res/ directory..
So I just copied content of /res (from project root directory) to
/platform/android/res.
Then it worked for me.
Try to update your android platform to the latest version:
cordova platform update android#6.1.0
And then run ionic resources --icon again.
I am developing an app for Androind using Ionic framework.
The app uses Cordova Medila plugin and to use that I need to include:
<script src="cordova.js"></script>
in my html code. This is required to be able to run the code on Android, however there is not a cordova.js in the www directory and Ionic finds it in one of its subfolders when it wants to build for Android.
I need to debug the code and want to run the JavaScript line by line in Chrome, but becuase chrome cannot find cordova.js, it gives error (like "gap_init:2").
I tried to find a copy of cordova.js in a sub-folder of the app that belongs to Android platform and copy it to www\js folder but when tried to run my html code I got strange errors during loading of the html file.
My question is:
Is it possible to debug these applications in Chrome? If it is how? If it is not, are there IDEs or tools that can be used for debug?
Try the link chorme inspect, we used to debug the android apps
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en
cordova.js you cant see in www directory it will automatic added cordova.js when you deploy your code on android device using this command "ionic run android"
Yes, you can debug cordova apps in chrome.
here are the steps
goto cordova project path
add a browser platform using command cordova platform add browser
run browser platform using command cordova run browser
after doing so, your app will run in new window of chrome with all plugins proxy added as required
like this
all the JS's will be added automatically and you will be able to see the code of cordova.js and debug it from sources tab.
I am using XCode 5.0.2 and Cordova 3.4.0-0.1.3 - What I find is after creating the project using the Cordova CLI and opening in XCode, no changes to the index.html file and index.js file are ever carried over to the simulator when I click run.
I have to open terminal and issues a Cordova Build command and then run the simulator and it works
I followed all the instructions here:
Phonegap - developing and launching app on simulator
xcode 4 + phonegap ... not update JS upon build?
And none of it works! any one a have a solution to this, because having to switch back and forth is becoming a pain.
You can add a pre-action script to your XCode project's build. To do this:
Select Product > Scheme > Edit Scheme from the menu (or ⌘ < on keyboard)
Select Build > Pre-actions from the left
Click + and select "New Run Script Action"
Add a script like this:
cd /path/to/your/cordova/project/
cordova prepare ios > xcode-prepare-results.txt
Now XCode should always run cordova prepare before building your project so you don't have to jump to terminal. You can see the output of prepare in the file xcode-prepare-results.txt.
Note, that depending on how your cordova executable is set up and which shell you use, you might have to either change the shell or modify your PATH in order for the script to find cordova.
So after much searching I seem to have found a solution that works, here is what I did. After looking at other Stackoverflow questions I found someone that said this worked for them.
Find the file called copy-www-build-step.sh.
Mine was in
[project_folder]/platforms/ios/cordova/lib/copy-www-build-step.sh
In that file, find the lines beginning rsync -a "...
Add -c to the rsync lines, so they ready rsync -a -c "...
Well I tried that and it did not work on its own. I also tried the answer from Ville and that pulled closer but no cigar. Finally I took what the command from Ville and put it in the copy-www-build-step.sh file
so my top line is now
cd /path/to/your/cordova/project/
cordova prepare
SRC_DIR="www/"
DST_DIR="$BUILT_PRODUCTS_DIR/$FULL_PRODUCT_NAME/www"
COPY_HIDDEN=
ORIG_IFS=$IFS
IFS=$(echo -en "\n\b")
.....
.....
.....etc etc
And now I make change , and click run , bam all is updated. I hope this helps someone else.
Other answers in this thread either didn't work for me or screwed up cordova plugins e.g. InAppBrowser, so i finally came up with this:
Edit the file copy-www-build-step.sh and add the following row in the beginning:
cp -fR ../../www/ www/
so it should look like:
...
cp -fR ../../www/ www/ # new code
SRC_DIR="www/"
...
This way your code will be updated properly and your plugins will work
I also edited the copy-www-build-step.sh file, however you don't want to use an absolute path from your User folder. If you are working with other developers you would have to change that every time you check out code.
It's not a big deal, just change:
SRC_DIR="www/"
To:
SRC_DIR="../../www/"
UPDATE
Worked for me on Cordova and Phonegap.
To have the source files automatically copied from the www source directory to the platforms/ios/www directory when you click the Run button in XCode:
In XCode, choose Product->Scheme->Edit Scheme...
Expand the triangle for Build->Pre-actions
Click the "+" to create a new Pre-action
You can leave the "Shell" setting blank.
Set "Provide build settings from" to the project you are building. This is important.
In the script area enter:
cd ${PROJECT_DIR}/../..
echo "--- Start ---" > xcode-prepare-ios-results.txt
echo "Running cordova prepare ios command..."
pwd >> xcode-prepare-ios-results.txt
cordova prepare ios --verbose >> xcode-prepare-ios-results.txt
echo "--- Finished ---" >> xcode-prepare-ios-results.txt
This works for me with XCode 8.2 and Apache Cordova 6.x
I suggest you clean before build your xcode project. And one more thing, make sure you build again your project using cordova build, not inside xcode because it's totally different.
cordova build yourproject
#Ksliman
I modified you code a bit to work on my system and make slight bit more generic.
top of file copy-www-build-step.sh
## New Code Begin ###
cd ../../
PATH=${PATH}:/usr/local/bin
cordova prepare ios
## New Code End ###
SRC_DIR="www/"
simply type:
cordova prepare
on your terminal and run your project again in Xcode
Simple solutions is to build the app with cordova using:
sudo cordova build ios
Then go to xcode > Product > Clean
Then go to xcode > Run (Play Button)
Run "cordova prepare ios" during the building phases:
Open Xcode.
Select your project.
Go to "Build Phases".
Go on "+" to add a "New Run Script Phase".
Move this section before "Copy www directory".
Add the following lines (for Mac):
cd /Users/*/YOUR_PROJECT_FOLDER (Change your project folder)
/Users/*/.nvm/versions/node/v?.?.?/bin/node node_modules/cordova/bin/cordova prepare ios (Change the path to node version)
After "Play" the www-folder will automatically refresh!
All I had to do was to include the full absolute src path for my project. For example:
From your project directory, vim platforms/ios/cordova/lib/copy-www-build-step.sh
change SRC_DIR to the absolute path of your www, SRC_DIR="/Users/michael/Documents/Development/SampleMobileApp/www/"
Save, build, and you should be good to go.
I found that sometimes Cordova gets confused... you need to do a "cordova platform rm ios" (just leave your plugins alone), and then do a "cordova platform add iOS", which will reinstall all your plugins into your platform... then try your build again.
Every time I use cordova build its overrides content in my platform specific www file. So I use cordova compile instead.
From help:
compile <platforms> compiles platform project without preparing it
It is important to just compile the changes not to build entire projects especially if you creating mobile app for many platforms and you have to do some platform specific improvements.
For me, there was an error in my code. I simply needed to run npm start to locate it.
If you are directly changing html from the Xcode, then you should change the code/html of the staging folder, not main folder
In the staging folder you will get same structure which you have in the main folder, but it will reflected directly in the xcode (iOS) build
Staging folder
Note: The changes you made in the xcode will be replace when you build again from the cordova build/run, so please copy your changes in the main folder before doing firing cordova commands
You can get more information from this answer: Purpose of Staging folder in PhoneGap 3.4? Only changes to index.html in this folder get recognized?
This is the correct solution taken from:
Cordova + Xcode 7.3 (html + Javascript) not changed or updated when build and emulate
I have seen a few references to this topic, but it's not 100% clear to me.
Inside the top level of a cordova project you have these folders '.cordova', 'merges', 'platforms', 'plugins', 'www'. I would think you edit the top level 'www' folder and it would update the files inside platforms\<platform>\assets\www because editing files directly in this path get overwrote, from what I have read and I experienced this once before deploying an app.
I can't find documentation on this (searching cordova update project just covers updating cordova itself, at least from what I am seeing maybe I'm being blind here).
How do the files in the root 'www' update the project files? I am sure there is a command for this but is it true I have to run an update command every time I make an edit in say Dreamweaver, because when I make an update it obviously doesnt make changes into the directory because it doesnt have anything telling it to.
So what I am asking.
You should edit the html/css/javascript inside the cordova projects root 'www'?
What are some solutions to updating the platform code from the main files?
Edit the content of www folder in main project directory and run cordova build command to copy these files to your platform specific directories. So the process will be like
Edit the content of www folder in project directory.
Debug the changes with any browser or emulator like Ripple.
Run cordova build command to test it in Android emulator or in a real device.
To use cordova command line tools, you need to install cordova command line interface. It can be found here.