How can I debug an Outlook App running in Desktop - javascript

I've been working on an Outlook Add-in, which is now working fine as a prototype in Outlook Web App and indeed works - usually - in Desktop too; but I find sometimes the App freezes in Desktop (not in the Web App) but I can't find how to debug the Desktop; none of the given Microsoft options seem to apply - am I missing something?
Tech note: I've tried Microsoft Edge DevTools, but it can't see the app to attach to it; I'm thinking that might be because the Outlook Add-in only runs momentarily …?

Here is Microsoft's docs for how to test and debug addins.

Related

Javascript: debugging on mobile

I've created a simple app using requirejs, angularjs and ui-grid. All it does is to get some data from an excel file and show it on the grid.
It works nicely when I view it on my desktop, but on mobile (Samsung Galaxy S3) it gives an error (shows the {{myBoundVar}} as if angualr app has not started). On Nexus 4, it shows the site, but with an empty grid (although I can see it has taken the data, since I see the grid's headers which are taken from the excel).
I can't seem to debug it, since using remote debugging shows the site correctly (just like it shows it correctly on desktop).
Is there a way to debug directly on mobile (e.g. just see the JS errors)?
You are looking for Remote Debugging on Android with Chrome which allows you to open a live Chrome DevTools window for your website on your android from your Chrome Desktop isntallation as long as you are running Android KitKat or above.
Simply enable developer options on your device, connect it's USB to your computer and visit chrome://inspect in your Chrome browser. More detailed instructions are at https://developer.chrome.com/devtools/docs/remote-debugging.

Can one debug javascript on a samsung tablet's native browser

I am currently working on a HTML/JS application that will be embedded in an iOS and an Android app. Because the android app is not yet finished I am testing this on the chrome browser in Android. I fixed all issues there but when I open the same web app in the native browser nothing really works as expected.
So my question is : Is there a way to debug in a native browser on an android device?
In chrome this was pretty easy with remote debugging.
(Please do not advice me to use 'log' statements for debugging because that's not what I am looking for here)
And just to spill my guts : the Samsung Tablet's native browser is the only device that's causing me a headache!
Typing about:debug in the address bar of the native browser will toggle the 'Debug' options in the settings menu.
The 'Show JavaScript Console' option will allow you to see JavaScript errors in your webpage.
NB I believe the JavaScript Console will only be displayed if there is an error.
HTH
Nick.
The new Samsung Internet browser (I think you meant this browser with "Samsung Tablet's native browser") is now based on the Chromium browser and thus supports its remote debugging interface.
Enable USB debugging on your device as described here.
Then connect your device via USB (Oh, surprise!).
Visit chrome://inspect on your computers Google Chrome browser and you will be guided to create the connection:
Then you just have to click on the devices inspect link and an developer tools window will pop up.
More info like why there is an Samsung Internet Browser at all can be found here.
You can easily debug your web application with Web Inspector Remote (weinre).
Look at this post in order to find out how to install and use weinre.
I hope it will help you if this question is still actual.
If you have updated your device you can go to settings -> Debug -> 'Remote Debug Enable'
Once enabled you can debug the native browser just like you can debug chrome.
You can try vorlon solution too, it has a nice web interface & very easy to install
& It's free
But if you can't see clear console errors with volron, you probably want to use #Nick's solution, sometimes complex errors prevents even vorlon or weiner from catching them. So once you fix blocking these issues, probably volron will start catching them properly

Remote debugging javascript on iPad from a Windows machine possible?

I have an iPad with iOS 6.1 connected to a windows 8 machine. I would like to be able to debug some javascript code running on the iPad.
The safari on iPad has a web inspect option that needs the iPad to be connected by wire to computer and then can be accessed in Safari for desktop's develop menu. I installed Safari 5 for Windows but don't see the iPad detected in the develop menu.
Any other ideas ?
The Firefox Tools Adaptor allows one to use Firefox DevTools for Safari on iOS.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
For remote debuggin I use Weinre.
Weinre has almost everything you need, but lacks a JavaScript debugger.
It has a WebInspector for DOM manipulations, network traffic, timeline, resources and a console.
Checkout this project on GitHub: weinre-remote-debug to setup weinre locally.
Another option described on this page is jsconsole.com. By appending a <script> tag to your page (or running a bookmarklet on your device) you get access to a JS console.
To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.
Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!
It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.
Source: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/

How to see the javascript errors of PhoneGap app in Xcode?

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.

Best way to debug Javascript on an iPhone app?

I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck

Categories

Resources