How to debug Cordova code on VS code
Question
I am new to Cordova and android apps. We are learning it in class, so all this code is just copied and pasted with the purpose of learning how to build a project and run it on your phone.
So in calculator.js, calculator.css, and index.html below.
When I tried to build the project I keep getting.
:app:generateDebugBuildConfig
FAILURE: Build failed with an exception.
FAILED
* What went wrong:
Execution failed for task ':app:generateDebugBuildConfig'.
> Failed to create C:\Users\mrgaw\Desktop\JS workspace\SWD106\MyCordovaApps\calculator\platforms\android\app\build\generated\source\buildConfig\debug\con\example\calculator
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
I get that there is something wrong as a result the project did not build. What I dont get is what went wrong. It was never really explained on how to debug this so I'm actually not quite sure of what steps to really take to debug the code. Any pointers, tips, or advice would help. I'm basically trying to learn how to debug code so I can learn whats wrong.
function registerEventHandlers() { zero.addEventListener("click", buttonInputClickHandler, false); one.addEventListener("click", buttonInputClickHandler, false); two.addEventListener("click", buttonInputClickHandler, false); three.addEventListener("click", buttonInputClickHandler, false); four.addEventListener("click", buttonInputClickHandler, false); five.addEventListener("click", buttonInputClickHandler, false); six.addEventListener("click", buttonInputClickHandler, false); seven.addEventListener("click", buttonInputClickHandler, false); eight.addEventListener("click", buttonInputClickHandler, false); nine.addEventListener("click", buttonInputClickHandler, false); add.addEventListener("click", buttonInputClickHandler, false); subtract.addEventListener("click", buttonInputClickHandler, false); multiply.addEventListener("click", buttonInputClickHandler, false); divide.addEventListener("click", buttonInputClickHandler, false); point.addEventListener("click", buttonInputClickHandler, false); equals.addEventListener("click", buttonEqualsClickHandler, false); clear.addEventListener("click", buttonClearClickHandler, false); } // handle click event for buttons that enter and display input function buttonInputClickHandler(eventArg) { var display = document.getElementById("display"); display.value = display.value + eventArg.target.value; } // handle click event for equals button that evaluates and displays result function buttonEqualsClickHandler(eventArg) { var display = document.getElementById("display"); display.value = eval(display.value); } // handle click event for clearing display function buttonClearClickHandler(eventArg) { var display = document.getElementById("display"); display.value = ""; }
#calculator { display: block; width: auto; border: 2px solid black; padding: 5px; } #display { display: block; font-size: x-large; font-family: monospace; text-align: right; margin: auto; width: calc(100% - 10px); } .key { display: block; box-sizing: border-box; -moz-box-sizing: border-box; width: calc(25% - 10px); height: 100px; margin: 5px; background: yellow; float: left; font-size: x-large; font-family: monospace; } #equals { width: calc(100% - 10px); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/calculator.css"> <title>Calculator</title> </head> <body onload="registerEventHandlers()"> <div id="deviceready"> <div id="calculator"> <input type="text" id="display"> <input class='key' type="button" id="seven" value="7"> <input class='key' type="button" id="eight" value="8"> <input class='key' type="button" id="nine" value="9"> <input class='key' type="button" id="divide" value="/"> <input class='key' type="button" id="four" value="4"> <input class='key' type="button" id="five" value="5"> <input class='key' type="button" id="six" value="6"> <input class='key' type="button" id="multiply" value="*"> <input class='key' type="button" id="one" value="1"> <input class='key' type="button" id="two" value="2"> <input class='key' type="button" id="three" value="3"> <input class='key' type="button" id="subtract" value="-"> <input class='key' type="button" id="zero" value="0"> <input class='key' type="button" id="point" value="."> <input class='key' type="button" id="clear" value="Clear"> <input class='key' type="button" id="add" value="+"> <input class='key' type="button" id="equals" value="="> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/calculator.js"></script> </body> </html>
1 answers
solution1
0 2018-06-24 01:31:31
You do not "debug on VS code". You can debug with Visual Studio 2017 and Tools for Apache Cordova, or using Chrome Remote Dubugging. Check out the Debugging Cordova Apps section. You should check out all guides from that site or from the Microsoft TACO website if you go with VS2017 ( much easier for learning and developing too)
Notice that your cordova app will be built regardless of the amount of errors in your JS files, because they are separate things. If the app builds but then it closes itself, then you have JS errors and you must start debugging in this case using Visual Studio or Chrome and the Emulator or an Android device.
Also, I wouldn't use paths with spaces for Cordova apps. Cordova might be easier than JAVA but it can become extremely complex to understand all its possible issues for the novice user, so you really must read (much) more and code less to begin with.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.