How to debug JavaScript code with mobile browsers - browser

I know about firebug and the developer tools for the major modern desktop browsers, but I can't find any way of debugging JavaScript code on mobile browsers.
What are some high level techniques I can use to debug code on mobile browsers?

Android devices can be put into developer mode by going through settings>Phone status then tapping on "Build number" 7 times. This allows you to do a bunch of things (see step 5) including USB debugging. (Some devices might have Build number under Software Info)
To activate USB debugging, look in Settings for the newly appeared "{ } Developer Options", open this and switch on USB debugging. Connect your device using a direct USB connection.
In Chrome on your desktop, in the usual developer tools panel used for debugging, look in the menu for more tools>remote devices. With Discover USB devices selected, you should now see your mobile device on the side.
Select it to see a list of all the chrome tabs you have open and the ability to enter URLs directly.
Selecting one of the links will open up a new window with a mirror of your device screen on the left and all the familiar chrome debug tools on the right. You can still control your device directly or use the mouse on the mirrored screen. It even rotates.
full details on remote debugging from google and how to enable developer mode (link as above) from askvg.com

Android provides a tool set for these purposes:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Apple does it a similar way:
https://developer.apple.com/safari/tools/
Tutorial: https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

You can debug on Safari Mobile with any iPhone/iPad. In Developer menu you can find your device and you can then debug your code with inspector.
If you have an Android Device instead, you can debug on Chrome Desktop (remember to active the debug mode) with chrome://inspect

On the IPhone you can go into settings>Safari>advanced and turn web inspector on

Sometimes I get bugs reported by customers that are not reproducible every time or in our testing. For such cases I recommend Lucky Orange. It records the user activity and also has the option to record console messages.
PS - I'm not an affiliate, I use them for my own projects and like it.

Another solution for basic debugging (which many times is all is needed), is having a console polyfill on mobile without the need to plug into USB on desktop.
mobileConsole is such a console polyfill.
Hope it helps someone, I found it useful.

Related

Why is Firefox Sync icon showing in my task bar when my Mac is completely offline?

I've just loaded FF onto a new Macbook Pro (Monterey), and have also recently signed up for Firefox Sync - to import bookmarks, passwords, etc into this new installation. I'm perplexed at what I'm seeing on the new machine, though. I have the firewall on, all Sharing settings off, Bluetooth off, wifi off. No ethernet. The machine is hypothetically completely air-gapped.
But the new machine is displaying the Firefox sync icon (superimposed on the logo is a little picture of a laptop, hovering over it says "from laptop"). This icon appears when I open Firefox on the old machine. It's very unsettling. Nothing on the new machine indicates there should be any communication between FF instances.
Can anyone tell me how this would be happening? Is there some undisclosed p2p action going on between the machines based on physical proximity?
This appears to be an Apple OS feature called "Handoff". It works with multiple browsers, and offers to share browser tabs between your devices through iCloud, apparently. It also does clipboard sharing, and some other things.
It can be disabled through System Preferences > General > uncheck "Allow Handoff between this Mac and your iCloud devices". (For more: https://howchoo.com/macos/how-to-disable-chrome-tab-sharing-handoff-in-macos - article is about Chrome, but this seems to work with Firefox as well)
I have no explanation how your machine was still communicating with all the networking interfaces apparently turned off, though.

Why does Chrome DevTools debugger screen appear green when debugging chromecast?

When I use the Chrome DevTools debugger to debug a chromecast custom receiver the screen is green.
I have disabled hardware acceleration in Chrome. This happens on both Windows and Mac. It happens from all PCs in my home.
No error messages are provided. Here is what it looks like.
Sir i think there might be something wrong with the chromecast,
i had the similiar issue here.
i want to debug webview app using emulator and it just shows green screen but i still tap on the screen. then i using real device to test my app and it works. it shows the page how it should be.

AT-SPI for Google Chrome in Linux

I have been finding the way to get the urls of opened tabs of the browsers of Firefox and Chrome using Accessibiltiy.
I found that Firefox can get the urls using at-spi, but Chrome can get the url of focused tab a few months ago.
I have gotten a new result recently during the test. It is that I cannot access the child of Chrome using Accessibility, so I don't even know the url of focused tab.
"atspi_accessible_get_child_count" returns 0.
But as I said earlier, it worked on Chrome 31 version.
According to Assistive technology support, there are not tools to test accessibility in Linux.
Chrome does not support Accessibility anymore?
There is the answer in Chrome Accessibility.
That says accessibility of Chromium on desktop Linux is not really supported currently.
You need to start Chrome like this:
ACCESSIBILITY_ENABLED=1 chrome --force-renderer-accessibility
Both of these are necessary. For electron apps, ACCESSIBILITY_ENABLED=1 seems to be enough, at least that was the case with VSCodium and Signal Desktop.
On Windows, this is not necessary because a11y enables itself once a known screen reader is detected (afaik), but Orca under Linux is apparently not known.

Opening app from different android Browser

Till now I have been using the default browser with my Samsung Galaxy S2. When Browsing if I found and clicked on a link that was from Wikipedia or IMDB for instance it would ask and give the choice if I wanted to open them in the "Internet" Browser or the installed IMDB/Wikipedia App. I have since tried other Browser Apps. (Firefox, Dolphin, Skyfire, Opera etc) and none of these appear to pop up with the option to open them in an app. They go straight to the website. The only app I have found that does offer the choice is Chrome, but it seems to crash a bit too often. Am just wondering if I am missing something in the the other browsers I have looked at. I like Dolphin and Firefox, but would like to see them offer the option to open sites in installed apps. Is there options to get them to do this? Thanks!
It is because those browsers (Firefox, Dolphin, Skyfire, Opera) you have tested at the end of 2012 don't support or have problems with calling external intents.
Here is the issue about implementation that feature on Firefox.
Related information - how to use intent filters to open external Android app from browser.

Control a wince device from desktop

I would like to know if there is a tool simillar to mymobiler for Wince 5.0 which I can use to control the device from my desktop.
I use mymobiler (v1.25) but I believe it controls only devices running on WM5 and above.
Any help would be highly apprecited as the screen of my device has stopped working.
I use MyMobiler myself when I am coding for WinCE5.0 (not very often but I do know that it works.)
In your extracted MyMobiler zip file is three versions of remote.exe.
remote.exe
remote.exe.50
remote.exe.40
The only one I have gotten to work on wince5 is remote.exe.40
Just rename the existing remote.exe file (remote.exe.wm) [you may have to click tools, folder options, and uncheck hide extensions for known file types]
Next rename remote.exe.40 to remote.exe.
After that you are good to go. Copy remote.exe to the device through activesync (xp) or WMDC (>XP) and launch it on the device. It was a bit funny connecting for me the first time - I click connect on pc, then had to click the tray icon on the device, and click connect.
Good Luck!
Link to Video Showing it Running 1
This does work, the auto-install doesn't seem to work but if you copy the remote.exe over as mentioned (any location will do), then start remote.exe, click on the MYMobiler icon in the tray and select Connect, it will attach to your PC like the WinMobile version does.
Also, check the ini files in the MyMobiler directory. There's some details on the features/options.
I can confirm that Dave and Mike's solutions work on Windows CE 7 as well.
I was getting an error with the AYGSHELL.dll library when starting My Mobile after the gun was connected.
Run Mymobiler.exe before you connect the scanner to the PC and then connect to the PC using the tray icon from the gun. No error.

Resources