I am trying to debug remote Chrome, the device could be connected, and inspect the tab starts fine.
But in the window of remote debug, everything is a mess. the GUI is terrible, which makes the functionality totally unusable, see picture below:
resize this window or change the resolution is not working.
some times tabs like elements, source, networks could presents, but under the source tab, there is search bar keep presents and covers all area of the codes area.
this is totally not working.
OS: Win7.
PC Chrome version: 63.0.3239.108 (Official Build) (64-bit)
I don't think this should related to Mobile Chrome or android version.
Is there any possible reason for this?
I think Chrome is a widely using browser this can't be a formal released bug for Chrome, right?
Related
OK. This one has me stumped. It's a "asking for a friend" type of question.
My wife is an artist. She uses GoDaddy as her hosting service to display her work. She uses their tools. She's created a website and several of her paintings are there.
Her computer is a 27" iMac with MacOS 10.15.7 Catalina, retina display etc.
After she's done, she goes to her website and some pictures of her work have the wrong size.
ALL THREE BROWSERS-> Firefox, Chrome and Safari.
And this is after blasting all cookies/caches etc. (everywhere)
When I look using my home computer (Linux Mint) with either Chrome or Firefox, it looks OK.
When I look using my work computer (Windows 10) using Chrome, Firefox, Edge and Explorer, it looks OK.
When she looks with her MacBook laptop using Firefox, Chrome or Safari, it looks OK.
So it's only on her computer that the website looks a bit funky. Strange thing is that when she uses the GoDaddy website to create/modify her own website, the "preview mode" looks OK.
It's only when she actually points any of her browsers to her website does the rendering behave strangely.
GoDaddy tech support suggested the usual "clear cache/cookies/whatever and reboot". Same problem.
I tried changing the IP address and MAC on her computer but there is no difference.
Ideas?
it may be of high resolution, the responsiveness of the screen varies between different screen size
This can happen because of many things like -
Using Extensions or other apps in browsers can cause this issue.
Open the site and right-click on the site and click on inspect where you find changes and see the code and refer to your code whether there is any change? if there is a change then this is because of Media queries that have a breakpoint based on the screen width.
If the above ones are not the issue download a fresh copy of the browser and open the site then check and inspect.
I'm experiencing black screen in google chrome (and a lot more...read below) after waking windows 10 up from sleep mode.
This issue appears in google chrome and all derived applications, in few words I'm experiencing this in:
Google chrome Version 80.0.3987.149 (pretty sure i was having this issue also before)
The new Microsoft Edge browser based on chromium
All the pwa (progressive web apps) installed with chrome or edge
All electron applications like:
Visual Studio Code
Whatsapp
All the Electron applications made by me.
I had this issue for a long time but the spreading of chrome based services is going to make this thing a lot annoying...
I'm using Windows 10 1909 home 64 bit (pretty sure I was having this issue also in windows 10 1903)
WORKAROUND: if in google chrome (or edge chromium) i keep a tab that in the closing prompts a javascript alert, in the moment when the alert is prompted, the issue is gone, the black screen is gone and i can return to see the whole tabs.
So after waking up windows 10 from sleep mode, if i see black screen in the browser i can just close it with the cross in the top right corner, in that moment the alert is prompted "are you sure to leave this page?", i answer "no i want to stay in this page" and the issue is gone.
Of course this is a workaround cause you can forget to keep that site in the tabs of chrome/edge, and this doesn't resolve the issue in visual studio code.
Starting google-chrome with the --use-gl=desktop seems to work with no side effects.
I had same issue with Fedora, Chrome and NVIDA drivers. At first I tried enbling the vulkan flag.
Go to chrome://flags and enable ignore-gpu-blacklist and enable-vulkan. However, Chrome performance suffers and others have pointed out with this settings.
Found the vulkan tip in a comment here. The use-gl-desktop tip here
(I am aware that there are similar threads such as this and this 3 years ago.
I tried their comments, but it did not work, so I re-ask the question, maybe there are changes during 3 years...)
I use Mac OS X El Capitan 10.11.4 and Chrome Version 50.0.2661.102 (64-bit). I start to use Chrome DevTools, and I dock it into separate window from Chrome web browser.
As a result, the DevTools and the web browser are considered 2 windows belonging to the same application (ie, Chrome). cmd` can be used to switch from the Chrome browser to the DevTools.
However, same as the old threads mentioned, cmd` can not switch back from the DevTools to the web browser.
I have tried the comment of Hugh Lee or TMB, however fnF6, cmdL, or ctrlL on the DevTools does not lead me to the address bar of web browser. Additionally, typing javascript: in the address bar of web browser returns nothing. Maybe they meant the address bar for DevTools, does it exist?
Does anyone know how to make the above hack works, or have a solution for the general problem?
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
I am working on a mobile website at the moment and I refreshed the page, Chrome quit unexpectedly, and since then all touch screen emulation is absent and/or failing.
Chrome Version: 36.0.1985.125 m,
OS: Windows 7 Ultimate SP1
Google Chrome suddenly and unexpectedly stopped emulating devices properly. All touch screen functionality has been disabled and apparently removed. When I emulate a device, the Sensors box fails to be checked and upon inspection, does not show any 'Emulate Touch Screen' option.
I have tried the following, all in conjunction:
Uninstalling/Reinstalling Chrome and deleting all personal settings, including uninstalling all extensions, restoring all defaults, etc.
Restarting the computer
Running anti-virus software
EDIT: Installed Chrome Canary which produced the exact same problem
Please let me know if there are any other relevant details that I might need to add.
Sorry about this. We overhauled the touch emulation in Chrome 36 to be much more accurate (sharing code with what really happens in Chrome Android): https://plus.sandbox.google.com/+RickByers/posts/CBCmhVttj5C. In the process we ended up disabling touch emulation when real touch support was present (at the time we thought this was no big deal because if you've got a real touchscreen why would you want to fake one with mouse?). But some Windows PCs report that they have a touchscreen when in fact they don't really (Eg. Visual Studio installs a touch screen emulator I believe).
We're fixing this at http://crbug.com/395531 - hopefully there will be a Chrome Canary build soon that re-enables touch emulation in these cases.
In the meantime you can mostly work around the issue by disabling Chrome's support for built-in touchscreens at chrome://flags/#touch-events. Make sure you set this back to 'Enabled' after Chrome is updated to fix the issue. With this disabled, some minor aspects of touch emulation (eg. DOM0 ontouchstart= handlers) will not work properly.
Stop the "Tablet PC Input Service" and restart chrome. If chrome thinks you have a touch screen, it won't let you emulate one.
I stumbled across the answer here:
https://github.com/Modernizr/Modernizr/issues/880