How to debug ionic 2 native - debugging

What is the best way to debug ionic 2 native features like the camera?
My app keeps crashing after i give permission to use the camera on my android device. Google chrome dev tools won't work in my case.
All help is appreciated!

The disadvantages of Ionic framework is hard to debug when call native plugin.
I have suggestion. Should you put breakpoint 'debugger' or "console.log()" before and after your function call Camera ?. And open chrome with url : 'chrome://inspect/#devices' to check what's happen ?
cheer!

Chrome did leave me with an error:
file:///storage/emulated/0/Android/data/io.ionic.starter/cache/.Pic.jpg exposed beyond app through ClipData.Item.getUri()
I do want to know how to fix this but i will start a diffrend question

I think that you could use chrome for debugging , steps you will follow :
connect your pc with your android or IOS device
open chrome and right click , then choose inspect
from the top bar choose more tools then choose remote devices
then click on your connected device in devices settings
write the command ionic cordova run android --device in your terminal to run your app.
click inspect your device on chrome

Related

Debugging navtivescript vue

I'm really new to developing an Android app using NativeScript Vue.
I'm struggling to understand what the debugging capabilities are. I have created a sample project using the template https://github.com/nativescript-vue/vue-cli-template) and have read about vue devtools. I'm wanting to put breakpoints in my JavaScript somewhere (in Chrome?) so I can step through my code, I just can't work out if this is possible?
Can anyone help?
Thanks
Did you try tns debug [ios|android]?
This will by default initiate a debugger with Chrome Dev Tools. You will see a URL in console once app is launched in your Simulator / Device, just have hit that with Chrome.

Appium Desktop for Windows: How to call device's browser. Error "...com.android.browser not found"

TL;DR:
When I have an emulator open, and I try to call the browser using Appium, I get an error saying that the browser isn't callable, even though there is a browser in the device. Not sure what it's called, so I can call it in Desired Capabilities.
Long story long:
I'm new to Appium so trying to get a basic emulator session going. I'm new to Java too, but I'm not using Java here and the Appium site video didn't require Java to get a basic session going, so this isn't a "your code is rubbish" Java issue. (Video link I watched: https://youtu.be/IOSUBda2-g4, though this didnt' call a browser on the device so wasn't a helpful guide for newbies like me).
On Win10, I installed Appium Desktop for Windows (current version 1.2.0 beta).
I have Android Studio installed (v2.3.3), and an image for a Pixel device.
I open Android Studio > Tools > Android > AVD Manager > Pixel API 25 (which is set up using Android 7.1.1 and API 25) and I start the emulator.
The emulator opens, and the first thing I see is "Photos has stopped Close app" and an X. Somewhat worrying but hey, I installed the image from AVD Manager so I got what I got.
If I then go to Appium Desktop (host 0.0.0.0, port 4723) and start the server (v1.6.5), I get the console.
I click Start New Session, and the settings screen comes up.
I am on the Automatic Server tab.
I go to Saved capabilities tab.
I have these settings saved:
{
"platformName": "Android",
"deviceName": "Android Emulator",
"browserName": "Browser",
"avd": "Pixel_API_25",
"platformVersion": "7.1.1",
"": ""
}
NOTE: The last empty entry is because the delete button on Appium for the Desired Capabilities has no effect in this version of Appium Desktop.
I click "Start session" in Appium Desktop.
Since the emulator is already started, I get error "An unknown server-side error occurred while processing the command. Original error: Could not find package com.android.browser on the device"
There is a very simple browser on the Pixel phone, but I can't invoke it because I don't know what it is called. There is no Chrome or Firefox installed by default. If I go on the device I can run a Google search in this basic browser, but I don't know what it is called to try to invoke it from Appium.
I'm trying to use the guidance in https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md but I'm lost, and trying stuff with no success.
QUESTION: What is the browser called so I can invoke it?
Why am I trying to do this?
I actually wanted to invoke a basic Calculator.apk that I have locally, but that didn't work either (it never started when I specified "app": "C:\android\Calculator.apk"), so I thought I should start with a basic browser session rather than APKs.
I tried the same as above with API 26 but that didn't work either.
I haven't solved the APK invoke issue, but that's likely another issue.
Any assistance with the DCs much appreciated.
Mike

React native debug on windows

I have a react native android app that i am currently debugging on a windows machine with a android emulator.
I can hit http://localhost:8081/debugger-ui
And it tells me that
React Native JS code runs inside this Chrome tab.
Press ⌘⌥J to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience.
Status: Waiting, press ⌘R in simulator to reload and connect.
When I open up the chrome developer tool, I do not see my react code being loaded into the "source" of that tab.
So my question is, how do I make it so that my phone loads the react stuff into the chrome tab? I wish to at least see the console.log stuff appearing in my chrome developer tool.
OK. Found what to do:
Ctrl + M to open up some "developer menu"
click on enable remote JS debugging
Depending on your react native version, chrome may or may not open up the debugging tab. But in any case, go to localhost:8081/debugger-ui should do it.

Network panel not working in weinre

I wanted to write an AJAX based hybrid Android application.
I tried to get my head around weinre but I can't get the network panel to appear. It does not show regular network interactions and for any XHR interaction it states "status pending" and "type pending".
Has anybody else faced this problem?.
This link did/did not solve the problem: https://issues.apache.org/jira/browse/CB-5424
Weinre is pretty limited, and nowadays better solutions exist to inspect your Hybrid app:
On Android 4.4 and above (or lower Android if you're using CrossWalk), you can use Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging Just point to chrome://inspect/#devices and you should see your device and hybrid apps and browsers. You may need to first run adb start-server for Chrome to see your device
On iOS, you can use Safari (on a Mac): you need to enable Web Inspector on Safari on iOS, and use the Developper mode of Safari on the Mac. See eg http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

Remote console.log() on iOS devices

I am developing a web app that involves touchEvent. It will be much more easier to debug those if I can view the console remotely on my Mac.
Can I make my Mobile Safari on the iOS device store the console log somewhere in the system. I have already jailbreak my iPad.
Thanks!
plug iphone into computer
settings > safari > advanced > web inspector (turn on)
open safari on your computer
run your web app on your iphone in the safari browser
on your computer in safari, go to Develop -> "name of your iphone" and then find the correct tab under "Safari" opens Web Inspector.
doing these steps enables the safari debug tools on your desktop to reflect and respond to the connected iphone.
hope that helps.
Just turn on the debugging console in Mobile Safari. This is enabled in Settings/Safari/Developer.
One File Remote Console.log for node.js
Solution: Server side console log.
In iOS6, you can now use the Remote Web Inspector on OSX to connector to the iPhone via USB. See the Apple documentation for more information.
You can use a remote javascript console. There a few available.
weinre
spotneedle
jsconsole
Not sure if I'm allowed to re-post my answer from another question, but at this link here I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
mobile-console-log is also a utility for debugging directly from your mobile into Chrome Devtools

Resources