An AngularJS application works fine on desktop, but is not rendering properly on mobile (actual code is showing). This is on an Android phone.
I would like to see what errors are showing in the console.
Is it possible to open JS console on chrome app on mobile (like it is on desktop)?
You can do it using remote debugging, here is official documentation. Basic process:
Connect your android device
Select your device: More tools > Inspect devices* from dev tools on pc/mac.
Authorize on your mobile.
Happy debugging!!
* This is now "Remote devices".
When you don't have a PC on hand, you could use Eruda, which is devtools for mobile browsers https://github.com/liriliri/eruda
It is provided as embeddable javascript and also a bookmarklet (pasting bookmarklet in chrome removes the javascript: prefix, so you have to type it yourself)
To use remote debugging first activate developer mode in Android.
In Android go to Settings, search build number, then click on it several times to activate developer mode
In Android go to Settings > Developer Options > Enable usb debugging
Connect to computer with usb cable
In desktop Chrome type chrome://inspect , then press enter
In mobile open url then check it, on this page on desktop chrome://inspect/#devices
The original answer doesn't seem to be valid anymore. From the current Chrome developer docs, these are the basic steps you need to go through:
Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
Select Enable USB Debugging.
On your development machine, open Chrome.
Go to chrome://inspect#devices.
Make sure that the Discover USB devices checkbox is enabled.
After that, open Chrome on your Android device (and confirm the USB Debugging prompt in case it pops up). Switch back to your PC and you should see the currently open browser tabs:
If your device tabs do not appear, you might need to trigger the USB Debugging prompt by activating file transfer on your mobile device.
Kiwi Browser is mobile Chromium and allows installing extensions. Install Kiwi and then install "Mini JS console" Chrome extension(just search in Google and install from Chrome extensions website, uBlock also works ;). It will become available in Kiwi menu at the bottom and will show the console output for the current page.
Edit 2022:
It's even better now. The console is built-in and available in the menu.
Please do yourself a favor and just hit the easy button:
download Web Inspector (Open Source) from the Play store.
A CAVEAT: ATTOW, console output does not accept rest params! I.e. if you have something like this:
console.log('one', 'two', 'three');
you will only see
one
logged to the console. You'll need to manually wrap the params in an Array and join, like so:
console.log([ 'one', 'two', 'three' ].join(' '));
to see the expected output.
But the app is open source! A patch may be imminent! The patcher could even be you!
I you only want to see what was printed in the console you could simple add the "printed" part somewhere in your HTML so it will appear in on the webpage. You could do it for yourself, but there is a javascript file that does this for you. You can read about it here:
http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
The code is available from Github; you can download it and paste it into a javascipt file and add it in to your HTML
The Kiwi browser not only allows you to use Chrome dev tools but you can also view the page at the same time.
If you use Android split screen you can open a window and move the dev tools to a new window.
Use Kiwi Browser app
Allows you to install all chrome extensions as well as access dev tools (console, ...)
Or
to access and test all the consoles of different mobile browsers, you can use the following similar websites:
https://www.browserstack.com/
Remotely debugging Firefox is another option. the steps are mentioned here
I am trying to connect to an ANT+ usb stick using Web Serial API in Google Chrome.
On linux (Ubuntu) it works out of the box, but on MacOS (v12.1) the device doesn’t show up into the search box. It does show up when using the web-serial-polyfill, but it is unfinished and missing features, and since the navigator.serial is present I wish to avoid using the polyfill.
var port = await navigator.serial.requestPort({ filters: [{ usbVendorId: 4047 }]});
Gets me ‘No compatible device found’. Requesting without params shows other devices, but not the ANT+ stick.
Any ideas why is that?
I am developing a website that able to print receipt. However, I can connect to my Bluetooth Thermal Printer and print a proper receipt using Chrome on MacBook.
But when i use any android device Chrome browser, the printing is either keep on stuck, or the results were printed as below.
Can anyone help on this.
We can only guess there. But I'd say bytes sent by your web bluetooth app varies enough so that the device understands it differently.
Can you try sending less bytes at once and see how it reacts?
Can you share your source code as well?
You may want to look into your android device logs as well. See full instructions at https://www.chromium.org/developers/how-tos/file-web-bluetooth-bugs#:~:text=following%20these%C2%A0instructions.-,Android,-ADB%20logs
adb logcat -v time | grep -E " |[Bb]luetooth|cr.Bluetooth|BtGatt|BluetoothGatt|bt_btif_config"
I have made a script to load all of the USB devices connected to Chrome using chrome.usb.getDevices. So far, it has listed a second-generation iPod touch as well as a mouse, keyboard, and two unknown items from Intel. However, it has not recognized any USB flash drives, and it does not recognize any Smart Cards that I have. I've also installed Chrome's Smart Card Connector app into Chrome, but I can still not get Chrome to recognize these Smart Cards. I can't continue to use Java nor ActiveX to for smartcard interactions in the browser. How can I get CAC/smartcard authentication through the browser without having to install a slew of other dependencies?
Edit: I also installed WinUSB as their drivers in place of their default HID drivers, but the results remained.
This Chrome USB Devices states that not all USB devices are supported and can be read:
Caveats
Not all devices can be accessed through the USB API. In general,
devices are not accessible because either the Operating System's
kernel or a native driver holds them off from user space code. Some
examples are devices with HID profiles on OSX systems, and USB pen
drives.
On most Linux systems, USB devices are mapped with read-only
permissions by default. To open a device through this API, your user
will need to have write access to it too. A simple solution is to set
a udev rule. Create a file /etc/udev/rules.d/50-yourdevicename.rules
with the following content:
SUBSYSTEM=="usb", ATTR{idVendor}=="[yourdevicevendor]", MODE="0664", GROUP="plugdev"
Using navigator.bluetooth.requestDevice(), I can access bluetooth devices I've already set up a pair with using native OSX bluetooth pairing, but no previously-unpaired devices appear, even when their attributes match my generic query. Available devices show up in a Chrome modal requesting user consent to pair, but the only device that shows up is the one I've already paired with.
Am I misunderstanding the intended use case here, or is there another way to establish a connection with a nearby (previously unpaired) device from Chrome?
Docs: https://webbluetoothcg.github.io/web-bluetooth/
(See Example 2)
function bluetoothConnect() {
navigator.bluetooth.requestDevice({filters: [{services: ['generic_access']}]})
.then(device => {console.log(`Connected to: ${device.name}`)})
.catch(console.error);
}
First, Mac OS X is not yet fully implemented as we speak. Only discovery and GATT server connect/disconnect are working for now. See the Chrome Implementation status at https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md. Check out Chrome OS, Linux and Android M (Android Lollipop workaround).
Regarding your specific issue, I believe that generic_access is not broadcasted by a nearby BLE device but is found because you've already paired (cached) this device. If your device is named "foo" for instance, you can go to https://googlechrome.github.io/samples/web-bluetooth/device-info.html and fill "foo" as the Device Name and hit "Get Bluetooth Device Info" button.
I would recommend you give a try to all Web Bluetooth samples at https://googlechrome.github.io/samples/web-bluetooth/index.html as well.
To complement the other answer, please be aware of the Chrome's chrome://bluetooth-internals tab/tool. This tool can not only list available devices and their services (which I don't think you can do with the Web Bluetooth API unless you requested the services in optionalServices or filters/services) and the characteristics of those services.
In the device list, there is a Forget button which becomes active once you connect to the devices GATT server using the Inspect button. This should allow you to full unpair and pair again in cases where you need to test the flow end to end.
Edit: Actually after doing some experimentation around this, the device still remains paired even after using the Forget button. Probably a bug in Chrome, however, the cache of the paired devices seems to be per-profile. This means the real answer is to:
Use the Incognito mode and in there the pairing flow will initiate from the get-go for each new Incognito session.