Change Chrome Dev Tools Touch Cursor - windows

Im currently developing a web app which is mostly in dark colors. The app is operated via touch, so i set my chrome dev tools to emulate a mobile device. The problem is now that the cursor is dark on dark and i find it hard to find the cursor. Is there a way to somehow change the appearance of the mobile cursor?
I'm on windows 10 and have the latest chrome version 107.0.5304.88
I searched the installation files of chrome to somehow find the icon/picture which is used for the cursor but i don't know much about desktop apps so i didn't find anything

Add device type
Mobile (no touch)

Related

How to do a Flutter Firebase app for both Mobile and Desktop at the same time

I see many samples and videos on how to do firebase for mobile and they call this "multiplatform". However, I don't see much on the desktop. There is one video on firebase flutter Windows by using a web and it seems to work. However, I do not see any tutorials for both mobile and desktop. Firebase would be a great example on syncing between desktop and mobile. We have such an app in development right now. Desktop development is new, but I'm surprised how little there is.
There is a library called firebase_dart, but the documentation seems weak.
The package firedart with the video listed above works in both desktop (linux and android without much modification..
What needed to be modified?
I had difficulty with the button on the very top of the phone, so I
added a sized box.
I had difficulty with debugPrint or print so I
added a Text widget with the results (to string).
That also worked.
Although I would like to not use fluent_ui, it does work for both desktop and mobile. I'm not sure what to do with realtime db, but I think I can make the firedart work for user sync between mobile and desktop.
It would be better if I could get firebase_dart to work.
https://www.youtube.com/watch?v=Tw7L2NkhwPc

Share screen of Microsoft Windows 10 apps using webrtc

When a Windows 10 computer wants to share some of its screens using webrtc protocol (firefox navigator), a list of the windows that can be shared appears. In this list, only "normal" applications appears, not the one related to "apps". By example, spotify window appears, but OneNote window is not listed.
It seems (?) webrtc screen share is not compatible with UWP apps.
Knows someone a way to share the screen of an app via webrtc ?
Note: following link allows to reproduce this issue:
https://mozilla.github.io/webrtc-landing/gum_test.html
you do not need share anything, just push "window" and see the list of windows that appears.
I believe Chromium (the open source version - not sure about Chrome) faces the same problem as UWP requires to use a new Win 10 API which shows it's own window selector. And then obviously that selector doesn't work on other problems. So it's a common problem on Win 10, with no known good solution as far as I can tell.

Chrome's emulate touch screen circle not visible

I have a strange issue whit my emulate touch functionality on Google Chrome version 49.0.2623.110 m.
I'm using laptop + monitor (both Dell) and running Windows 8.
The issue is that while Chrome is on my secondary monitor and touch screen emulation is enabled I cannot see a touch screen pointer (black circle) nor any kind of pointer, but when I move my Chrome to my main laptop display it would show. I tried disabling laptop display while using external monitor and it is the same, I cannot see the pointer. This was not a problem with previous Chrome version.
Did anyone had similar issues with this version?
Thank you
EDIT:
I've change the laptop, updated to win10 and updated Chrome to 50.0.2661.87 m version and I still have the same issue (colleague of mine has the same problem as well).
A colleague of mine "solved" the problem by enabling Windows' Mouse pointer trails at minimum length. I find it too annoying to work with the setting enable, but it does work if you really need it.
Mouse settings
They did some changes in recent version of Dev Tools and some options are now gone. Ensure you have "Mobile" or "Desktop with touch" selected, as you can see on the screenshot.

Opera Mobile Emulator for Windows no longer available?

I wish to implement the suggestion in this post:
Visual Studio 2012 Mobile Device Emulators
but Opera Mobile Emulator seems to no longer come in a Windows version. Anyone else experiencing this issue?
Yes, that's not just you.
People at Opera forums discovered a direct link to the Windows version:
http://www.opera.com/download/get.pl?sub=++++&id=35131
Considering that the link in the article on this topic has no mention of the Opera Mobile Emulator, I concluded that the desktop version is no longer supported. However, all major browsers have a built-in mobile emulator in the developer tools.
For Opera, these are the steps to access it:
Select the tab with the web page to be tested
Open Menu > Developer > Developer Tools or CTRL + SHIFT + I
Select the "Toggle device toolbar" icon at the top left (looks like a phone next to a tablet)
Select the device from the first drop-down menu on the toolbar. It will be "Responsive" by default, or the last device used.
It's a similar process on other major browsers, like Chrome, Firefox and Edge. Comparing to physical devices I'd say it's reasonably accurate for testing layouts. It doesn't have the latest phones like iPhone 12 at this time, but you can add a custom device by specifying the viewport height and width.
My understanding is that each browser tests how it would behave on its own mobile version, which means, it's best to test it on the developer tools on all supported browsers. On this topic, there are tips and links to commercial testing tools on the MDN article on cross browser testing. My main take away is test a lot, and fix or provide fallback solutions.

browser add-on to test mobile design

Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.
If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.
However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.
Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.
Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)

Resources