I'm using Chrome developer tools for version 49.0.2623.110 m and I notice that the little box displaying the window WIDTHxHEIGHT when you resize is now gone or moved. Am I just not seeing it? Is it moved?
I use Viewport Resizer now but I really missed having both options to check window size...
I was looking for answers to this problem myself, and I found a couple of pages. Apparently, it's a bug in Chrome v49, that should be fixed in Chrome 50. Here are a couple of links to the discussions:
https://productforums.google.com/forum/#!topic/chrome/LhOfBFSBdx8
https://bugs.chromium.org/p/chromium/issues/detail?id=582421
Related
I was testing a website with the Developer Tool of Firefox and I was facing a weird bug. Then I checked the window width with a simple console log console.log($(window).width) and I saw that the reported width in developer tools wasn't the same that javascript was detecting.
I tried than with the Google DevTools and showed width was consistent with the console log width.
Is this a Firefox bug or am I doing something wrong? Actually on a real mobile device and on Google DevTools the website works as it should, but if I test the same page on Firefox I see a bug that actually doesn't exists (and for this reason I've lost some time).
This are a couple of screenshots to better explain what I mean:
Google Chrome
Firefox
Resizing the browser window doesn't effect the JavaScript $(window).width
The problem is in the documentation for developer tools IMHO.
They don't mention a thing about the Touch Simulation changing the behavior of the rendering.
AFAIK, the Touch Simulation activates some form of "logical pixels" mode, where lengths are translated using device DPI, or perhaps DPR.
Deactivate it and see for yourself.
Before Chrome 49 the page size was indicated on the top right of the page when we opened DevTools, and showing real time size when we resized the window. It was very practical for responsive design.
But since Chome 49 it seems to have gone.
Now I'm wondering if it was an extension that I've added a long time ago that is not working anymore, or was it a Chrome thing?
If it's a Chrome tool how can I put it back, as I don't see the option in the options.
Page Ruler is not as practical as we need to focus on an element and can't really see the real time width/height.
I've found my answer while digging in Google.
It's a bug and will be fixed on Chrome50 https://bugs.chromium.org/p/chromium/issues/detail?id=582421
I guess I will have to use Canary! (It works on Canary)
some time ago (probably after recent update) I've noticed picture in my chrome changed a bit: everything rendered slightly upscaled and looks blurry. This issue affects everything: tabs, searchbar, bookmarks panel and of course all content in opened pages.
Here is some pic:
As you can see on screenshot, here Firefox window overlaps Chrome window, both of them shows the same page, and you can notice difference in sizes and blurriness. Do you have any ideas how to solve it?
Chrome version: 43.0.2357.130 on Kubuntu 14.04 (64-bit), it has default scale 100%. Also I found some info about similar issue on windows, but this didn't helps me, since there is no DirectWrite settings or something like that in my chrome.
Thanks.
Some more deeper search gives me a link to chromium issue, which describes my situation. And there also I found a solution for me. In brief, you just need to run next console command:
xrandr --dpi 96x96
Hope, this helps somebody.
I know this question may not fit well here but this really is driving me crazy for few hours now :( I use chrome to simulate how websites look on different mobile devices. I clicked something wrong that led to a grid with rulers to appear. I don't know WTF to do to disable this grid. This is the screenshot:
I uninstalled and reinstalled the browser and it returns back.
I reset the developer tools to default settings and it's still there.
This is really becoming a nightmare for me for few hours now. I want the regular emulation without these rulers and grid and top bar. Thanks
There is a small blue button on the left of Elements which actually does the magic.
You didn't click anything wrong. Your Chrome updated itself to 38.2125 and the emulator now has those attributes. Further more, the touch function is broken.
To fix the problem, download the "Canary" version of Chrome. You're still required to see the grid, but the screen is improved and easier to see your layout. Also, the touch function is fixed.
Get Chrome Canary here: https://www.google.com/intl/en/chrome/browser/canary.html
That button just enables/disables the emulator. The OP is looking for a way to disable the background grid while emulating mobile devices.
If you're looking to disable the multi-colored grid lines that show up as an overlay, check out the console dock on the bottom of dev tools. There is a tab labeled rendering and try disabling "Show composited layer borders". If you're still seeing the rulers, that setting is in the Settings (gear) of dev tools, there is an option under the Elements heading for "Show rulers".
So I was using Chrome and IE together when all of a sudden Chrome decides to change its zoom level not only for the webpage, but the entire browser. I'm not sure if it happened when I restarted Chrome or if it happened when I decided to bring it to the front. So basically, all menu items, logos, icons, absolutely everything appears to have been zoomed in slightly. I have restored to original settings, disabled extensions (I don't use any extensions anyways), uninstalled and reinstalled, and nothing.
I've used the DPI settings in the properties of the Chrome application and nothing changes it. I've changed scaling in Windows and nothing helps.
Everything is larger in Chrome now and it's driving me crazy. Many menu items won't appear fully because of this. Note that this isn't just at the webpage level but at the entire browser level. I've included some images so you can compare. If you look at the youtube homepage, you'll see that everything is larger in Chrome than it is in Internet Explorer.
Scratch that apparently I need reputation in order to post pictures, ugh. If I can get 10 rep soon I'll post some pics.
I'm sorry if my description is rather vague but this isn't something I could search up. No other programs (including IE) are having this issue. THanks very much in advance if anyone can help. This is just driving me crazy.
No, Ctrl + 0 obviously does not work. This is an issue with the program as the entire program looks zoomed in. Everything, not just the webpage.
Found a "quick fix" solution from post #38 here:
Right click on the Chrome link on your desktop
Choose Properties and then add " /high-dpi-support=1 /force-device-scale-factor=1" to the existing Link to your path to chrome.exe.
Hope this works permanently. What a hassle.
If you're experiencing a "zoomed in" browser it's because you have an updated version of Chrome. Chrome and FireFox now adjusts the page zoom level according to your Windows settings to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25%. This is usually the default setting on your computer.
This means that your updated Chrome and/or FireFox browser will automatically set websites to 125%, and all other browsers remain at 100%.
What are possible solutions?
As of this writing, their isn't a known method of fixing this from a web coding standpoint, due to that it's created from the inner workings of the browser. That being said, their are still some things you can do from the "users" side to fix this:
The quickest way around this is to open up your browser and press on your keyboard "ctrl -" (control minus) twice. This will set your website content to 75%, which would be equivalent to 100% in all other browsers (but this will just fix the website content).
You can set your computers font-size settings in your control panel to "100%". This will make all of your computer fonts smaller.
I'm sure their is a better answer to this, but for now these are the 2 options that I'm seeing. In FireFox version 22 they also added this feature (as mentioned above), you can see the work around for FireFox here: https://support.mozilla.org/en-US/questions/962979
I'm sure a similar solution also exist with Chrome.
You can change your windows default zoom to 100% in display settings and make everything almost unreadable, or (a better way)
You can add a start parameter to your chrome shortcut:
"your-chrome-dir\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1
I know, it's too late, but just in case someone else has this problem...