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.
Related
I have created a personal Tabs app and deployed the same on MS teams.
Things are working as expected, but at 1 stage of time, my application goes back to the original "contentUrl" page as defined in the manifest.json file.
This might be an issue with my frontend code, so i wanted to understand how can we debug the frontend developer console to check if there's any error being thrown from my application?
The only way to figure out what is going on is to use the DevTools. To use DevTools in the desktop client, you must:
Ensure you have enabled developer preview.
Open up a tab so you have something to inspect with the DevTools.
Open the DevTools one of the following ways:
On Windows, you open DevTools via the Microsoft Teams icon in the
desktop tray.
The following example shows DevTools open and inspecting a tab configuration dialog:
Ref Doc-https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools
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
I've an iMac with OS X Yosemite v.10.10.3. I use Firefox Developer Edition 40.0a2. I've a ZTE Open C (FR version) with Firefox OS; Boot2Gecko 2.1.0.0-prerelease (B2G OS).
What I'd like to do is the following: I've a basic webpage (mostyl HTML, CSS and JS) opened in my browser on my Firefox OS phone. I'd like to get the devtools (Cmd+Shift+i) and be able to edit that webpage with my Firefox Developer Edition browser on my iMac.
I've already tried these things:
Use webIDE.
Follow this potential solution.
Connecting a Firefox OS device.
WebIDE Troubleshooting.
Comment déboguer facilement du web y compris sur tablettes et téléphones—french article.
With webIDE, I can build a new app for Firefox OS (with or without a base theme) and I can use the devtools to inspect the DOM and stuff like that. I just want to achieve the exact same thing but directly on my desktop computer.
Do you have any clue?
Feel free to ask me if you need more piece of informations. ;)
Current status
When I launch the Firefox OS browser app, I can inspect (via the devtools) the homepage (DOM stuff, etc.). But when I load another webpage (Google for example), I can't inspect the DOM. Any idea about that?
I often get this message: http://puu.sh/ir2Ju/32563e51bc.png when I switch to several apps I want to debug.
If I understand correctly, you're trying to connect the Firefox Developer Edition WebIDE on your desktop to a tab that is open on your Firefox OS phone. Something like this?
If that's right, once you connect to your phone in the WebIDE, you should see a list of open browser tabs at the bottom of the "Open App" menu, which is in the top left of the WebIDE panel.
When you connect your phone, you have to accept remote debugging.
Then on the left of the window, you should see a dropdown menu with the apps that you can debug. By default, you can only debug unprivileged applications.
Click on the app, the you want to debug and in the middle of the screen click on the "wrench". It is the button to activate debugging.
Now the complicated part. In order to debug privileged apps such as the web Browser. You have to root your phone and change some preferences. To check that you have a rooted phone. Click on the runtime menu and then runtime info.
If your adb is in root mode, then you can press the button to request higher privileges. You can also do that by hand.
There for more info:
https://developer.mozilla.org/fr/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29
https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client
Using a real device
On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:
adb shell
Your prompt should change to root#android. Next, stop B2G running using the following command:
stop b2g
Navigate to the following directory:
cd /data/b2g/mozilla/*.default/
Here, update the prefs.js file with the following line:
echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
After you've finished editing and saving the file, start B2G again using the following command:
start b2g
Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.
Next, reconnect to the App Manager and you should see certified apps appear for debugging.
When this is done, you should see the application "Browser" in the list of available apps for debugging. At the same time, you should see all other application of your phone available as debugging.
I am creating an add-on for mozilla firefox using Add-on SDK. I have gone through https://developer.mozilla.org/en-US/Add-ons/SDK regarding basics. However, I am now facing an issue with buttons. I want a button to be attached to the navigation toolbar. When I run the main.js file with "cfx run" the button shows up where it should until that firefox window is closed. If I create a .xpi file and open it in firefox it shows the button until we restart the browser. The bottom line is that add-on button vanishes after browser restart. Please, help me regarding this. Thanks in advance. The code is same as given in the mozilla developer tutorials.
Are there any errors? Can you show us some code so we can get a better idea of what you're doing?
To debug this sorts of initialization problems try this:
start the browser
open the browser console, then hit 'clear' to remove existing log entries so you can easily see which ones are caused by the add-on
install the add-on - any errors?
open the add-on manager, disable the add-on, then enable it - any errors?
restart the browser with the add-on installed, then open the browser console. any errors?
Can you reproduce this issue with a simple example add-on, for example this one?
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