I am working on a simple enough beginner tutorial in Javascript in Microsoft Visual Studio 2019, but am encountering an error when trying to utilize the prompt() function. My problem is as follows:
'use strict';
var msg = 'You entered:';
let promptInput = prompt("What would you like to enter");
console.log(msg);
console.log(promptInput);
However, and I suspect this is because the program is running in the console and not a browser, I am getting a prompt() function not defined error.
Console Error Prompt
How might I fix this? Is it because I am using node.js that the program runs in the console and not a browser?
I have come across a solution, but not a complete fix to my problem. I learned that there is a way to run JS code in a the most common browsers (Edge, Chrome, Firefox) using what is called 'Developer Tools'. You can find 'Developer Tools' in the Settings --> More Tools --> Developer Tools dropdown menu on Microsoft edge or by pressing CTRL+SHIFT+I. Once you have the 'Developer Tools' sidebar open, navigate to the console tab, clear the console of any existing code, and paste your JS code into the console. Then, press enter, and you will see your code manifest itself within your open browser window. I hope this helps, thanks.
I would like to see, which function is keeping my JS thread the most busy. But in any profiling option I just cant see any JS related stuff.
1) Profiling
The most useful would be the V8 profiler, which is accessible in debug mode (in Chrome DevTools or React Native Debugger). Somebody here suggests to look for debuggerWorker.js, but in my Profiling session this thread is missing.
2) Systrace
I found the JS thread (mqt_js), but it is collapsed and cant be drilled into. Any ideas?
I run systrace.py --time=20 -o trace.html sched gfx view -a com.my.rnapp
3) RN "Enable Sampling Profiler"
I even tried the (undocumented) "Enable Sampling Profiler" option in RN debug menu, it seems working, and shows a message with trace location, but file is unfortunately empty everytime. (eg. /data/user/0/com.my.rnapp/cache/sampling-profiler-trace119834863.cpuprofile). Checked using adb shell and ls -la.
Other info:
tested both dev/prod versions, local metro bundler/bundled app
React Native 0.61.1
Emulator with Android API 25 (physical device as well)
macOS 10.14
ad (1) ok - it seems you have to hit "Run profiling", and then reload the APP (rr). Only then RNDebuggerWorker.js appears. Wicked. 😎
I just installed Node.JS tools for visual studio and created a new Blank Node.js Web Application. Without any other modifications to the project, whenever I click on >Internet explorer or hit the F5 key, a console window displaying Debugger listening on [::]:5858 appears and that's it, the debug button becomes enabled again and the console window remains open.
I then tried accessing localhost:1337 (the default port configured both in the project properties and in the code itself) and it tells me the page doesn't exist. I then tried localhost:8080 and still nothing. The only one that seems to work is localhost:5858 that only seems to display some debug info.
However, if I choose to start without debugging then Visual Studio happily launches the same console window AND the browser which immediately starts to load localhost:1337 and once it's finished I am greeted by the "Hello world" message that the project is written to display.
I tried reinstalling the extension, the entire IDE and finally I tried it on a separate machine that ended up exhibiting the same behavior.
Any clues? Any steps I have overlooked?
1) Inside your project, right click on the js script and select Set as Node.js Start up File
2) Right Click on the Project and click on Debug -> Start New Instance
Your debug session is started. This procedure is for console project.
With iOS, Action App Extension, one could run a JavaScript code against HTML. However, after quite some search on Google, I have not found any document explaining how to debug in this situation (insert a break point or simply add/view console out statement).
It's not too hard, although recently I've had an issue with the page showing up when connected to the simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
Ensure that on the device Settings->Safari->Advanced->Web Inspector is on
(Make sure you've Trusted the computer from the device)
Start MobileSafari on your device by running from Xcode and choosing Safari
-- this isn't necessary but you can decode the iOS Objective-C/Swift code as well. You can just start MobileSafari manually and it will be visible in desktop Safari.
Start Safari on your desktop, make sure Show Develop menu in menu bar is on in Preferences.
In the Develop menu you will see your device name, say 'BSharer's iPhone'
select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device page on your desktop.
There are options to 'Automatically start debugger etc...', but I've found that when I tried these my code would not execute.
You can't place debugger statements in the app extension JavaScript as it isn't injected until your App Extension starts. Instead I would add a debugger; statement to my app extension JavaScript code which will pause the debugger in the app extension JavaScript code at the debugger; statement.
Start your app extension by selecting it in the Share menu, set any other breakpoints you are interested in, then hit the continue button on the debugger.
You will also catch uncaught exceptions of course.
The official documentation for this is here.
Make sure you remove the debugger; line from production code.
I want to debug my PhoneGap app in Xcode, but its Console can not show javascript errors.
The most elegant way to view and debug JavaScript errors in your Cordova/PhoneGap App is by attaching the Web Inspector from your Safari browser to the Web View in your iOS App (but, like Tom Clarkson already mentioned, you will need at least iOS 6).
On your iPad or iPhone use the Settings App to enable Web Inspector in the Advanced Settings for Safari
Connect your device to a Mac via USB (it will then appear under the Develop menu of Safari)
Start your App
Navigate to the Web View you want to debug
On the Mac, from the Safari Develop menu, select the name of your device and the App (its HTML-page), from its sub menu
A Web Inspector window will open, enabling you to browse the DOM, set breakpoints etc.
Apples documentation on setting this up
A thorough third party tutorial
Alternatively you could connect Chrome’s Web Inspector to iOS devices after installing iOS WebKit Debug Proxy. This also opens up the ability to do the inspection from Linux or Windows.
Remote access to your iOS’s HTML, CSS and JavaScript has gotten even more flexible nowadays because you can install the RemoteDebug iOS WebKit Adapter on top of aforementioned Debug Proxy. Because this adapter translates the WebKit Remote Debugging Protocol to the Chrome Debugging Protocol, these (on all their supported platforms) become available as alternative debugging and inspection tools:
Visual Studio Code
Chrome DevTools
Mozilla Debugger
BTW, remote debugging with the Safari Web Inspector works even in combination with the iOS Simulator.
Minimum version of Desktop Safari per iOS version
For each version of iOS you will need a specific minimum version of Desktop Safari in order to use remote web inspection, see the list below.
iOS 6
Safari 6+
iOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Safari 9+/10+? Please comment; always try Safari Technology Preview
iOS 11
Safari 11+
iOS 12
Safari 12+
Paste the following somewhere near the start of your document so that it gets executed before any of your other JavaScript.
<script type="text/javascript">
window.onerror = function(message, url, lineNumber) {
console.log("Error: "+message+" in "+url+" at line "+lineNumber);
}
</script>
And enjoy viewing details of your Javascript errors in the Xcode console window.
UPDATE: The above technique will log errors such as undefined variables. But syntax errors such as missing commas will still cause the entire script to break without logging anything.
Therefore you should add the following to the start of your onDeviceReady function:
console.log('Javascript OK');
If you don't see "JavaScript OK" appearing in your log window when the app launches, then it means you have a syntax error somewhere.
To save hunting for missing commas, the easiest thing is to paste your code into a Javascript validator such as this one:
http://www.javascriptlint.com/online_lint.php
and let it find the error for you.
Hopefully that takes some of the pain out of debugging.
Note that with 0.9.2 (released today), console.log has been standardized across the platforms for logging (with debug.log deprecated).
There is a function that is available on the desktop WebView that is not exposed in the iOS UIWebView that will catch all errors (I'm trying to hack that functionality into a plugin, which uses private APIs, but the plugin would only be for development), but for now do what Kris suggested above and put try catch blocks on code and use console.log
To quickly catch possible syntax errors, when developing I have the page loaded in desktop Safari and quickly refresh it with the webkit error console viewable.
debug.log will send messages to the XCode console in Phonegap (allowing you to either log the result of an exception or do some debugging), however, you are correct that you have to debug other javascript errors in Safari (either on the desktop or on the iphone with Debug Console turned on). I have yet to find a Javascript error, that was caused by running on the iphone and wasn't present when debugging with the console turned on in Safari (though I know there are a few differences between the WebView and Safari on the iphone).
I just came across Weinre
It's a remote javascript debugger for phonegap. You can either setup your own Weinre server, or use the one at http://debug.phonegap.com/
It seems to work well - very impressed so far.
If you use iOS 6, you can simply attach the safari web inspector (on the develop menu of desktop safari) to your app and get full javascript debugging.
There are a couple of areas where it is a bit limited - startup errors and plugin calls - but it works well for pretty much anything else.
For making javascript debugging work in Xcode I would take a look at the following.
http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/
As as far as additional troubleshooting goes...
To start with you could run the app in safari on you pc and utilize safari's debugger (or chrome as both are running similar rendering engines). This won't hit on the advanced logic errors and many of your api issues but it at the very least should help with troubleshooting many issues (basic javascript, HTML5 etc....).
To view all errors in javascript console, I agree to use this event listener
<script type="text/javascript">
window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>
However, unless you have the cordova plugin installed, it wont show on XCodes "console". Go to your project folder and type this:
? cordova plugin add cordova-plugin-console
This will allow the javascript command 'console.log('some string') to show on XCode.
Note you will need git, etc... but if you are editing your phonegap project in xcode, you will most probably have it!
PS Make sure you put the cordova.js script plug-in before any use of console.log
<script type="text/javascript" src="/cordova.js"></script>
Put this in the beginning of your index.html
<script type="text/javascript">
window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>
Here's a simple way that worked for me:
cd to the directory containing your index.html file in the terminal
Start a http server using python by invoking (I used python 2.7):
python -m SimpleHTTPServer
View the page in safari by entering the address of the HTTPServer in a browser, for me the URL was:
http://0.0.0.0:8000/
Open developer tools:
In chrome this is alt+command+i. View the console tab, may need to refresh the page.
In Safari: Safari --> Preferences --> Advanced --> check "Show Develop Menu". Develop menu --> Show error console (or alt+command+c). Refresh the page. Hitting CTRL+5 opens the issues tab.