Chrome Dev Tool Shrinks screen when inspecting an element - google-chrome-devtools

I am creating a dev. site to eventually replace an existing site and every time I inspect an element the body of the page shrinks down to a third of the left half of the page. It is also happening randomly with the slider where the image shows on only half the page from time to time. If I refresh the page it corrects it until I inspect an element again. It is making it impossible to work on this site and I have disabled the theme and gone to a stock theme as well as one by one disabled plugins trying to figure out what is causing this glitch and I have yet to determine what could be causing this issue. How can I fix it?

If you're using chrome dev tools (assuming the dev-tools window opens separate from chrome, not in the same window) my guess is that your device toolbar may be toggled.
Click this to turn it off, as it's used to test your site on a different screen sizes and could be shrinking your screen whenever you inspect something.

It's possible that you have your Dev tools Emulator on which helps you emulate the web page in different device sizes. Try closing the emulator by clicking on it.

Related

Enable for Smart Displays

I've published my game Popcorn Quiz, but in the directory browser it seems that the Smart Display option is greyed out. It is available and tested against in the simulator so I assumed that it would be available when live.
Am I missing a setting in deploy options?
Thanks
If you see a smart display icon (even if it looks greyed out), then the action can be invoked on smart display devices.
We are investigating the icon color issue.

Visual web gui menu item displays wrong in IE 11

The project I'm developing for recently switched to .Net4.5 and Visual Web GUI 10.0.4 and a context menu item that works in Firefox doesn't work in IE11 (our official supported' browser).
I can't post images here yet, so here's a link:
[img]http://i.imgur.com/oIEca4l.png[/img]
notice that the firefox windows has 'invoice together' while the IE window has arrows in a box, and that's it.
Here are all the properites for the menu item:
[img]http://i.imgur.com/vHB4Ak6.png[/img]
The only reference to it in the code is displaying a message box when the 'invoice together' is clicked.
I'm thinking it's an IE display issue, but I'm curious to know if anyone knows a way to fix it?
Thanks
I experienced the same or most probably very similar issue on one of several virtual machines. I have content menu on ListView control. There was no visible menu items' text and there were left and right arrow sliders on the menu.
The web site worked fine on FF, Chrome. Interesting thing was that this context menu problem was not reproduced on other virtual machines with IE11. Only on single one. IE version 11.0.9600.18053 / 11.0.24 (kb3093983) was used on all test machines.
I noticed a slight difference in font's rendering also. Font's size seems smaller.
What I did was applying back IE's default settings and restarting client's machine. This somehow fixed the context menu and font's rendering.
My self explanation is that something in "get font and render it" communication between browser and client OS went wrong. From this came wrong looking menu with sliders.
Hope this helps!
Reduce fonts size on IE, it would help.

How to clear error list of chrome app?

First introduction to chrome apps. I'm trying to get some sort of workflow down. I've enabled the checkbox to collect errors, but can not seem to clear them between executions of the app. I assumed closing the app them re launching it would do the trick. The only thing that works right now is deleting the app then reloading the package.
To clear the list of errors at "Collect errors":
Toggle the "Developer mode" checkbox (disable, then re-enable).
Click on the Reload link (reload extension/app).
Refreshing the page instead of reloading the app/extension also works.
Using the 39.0.2171.95 64-bit Chromium all I need to do is toggle the Developer mode
I think the solution suggested by Rob does not work anymore for recent versions of Chrome.
You clear the errors by following the steps below.
Go to chrome://extensions
If it's not enabled, enable the Developer mode, see below.
Click on the Errors button (in red in the picture below) on the extension.
Now you can either delete each single error by clicking on the trashbin icon next to it, or you can just clear all errors by clicking on the Clear all button depicted below.

How can one suppress automatic refresh of open browser windows on the iPhone, iPad, etc. when switching back into them?

The question is: How can one suppress the annoying auto-refresh of open web browsers in Safari, etc., when the user of an iPhone or iPad switches back into it after switching out of it? There appears to be no setting that can do this on these devices.
Today I inadvertently discovered a way to stop this annoying behavior, even though it does not qualify as a real fix, it is a method of suppressing the behavior by taking a simple action every time prior to switching out from Safari or another browser. Not ideal, but it does give you control (finally) of the browser such that the behavior is suppressed. The link to the answer is here:
https://discussions.apple.com/message/25254749#25254749
If you don't feel like surfing there, here's the trick:
In Safari or another browser app, touch and hold on a piece of text (a single word or letter is fine), then lift your finger off the screen. The word or letter will be selected and the familiar little pop-up that says "Copy | Define" appears. Touch "Define" and the screen that shows the word's definition or says it couldn't find a definition pops up. Now, do not touch anything else; not "Done", "Search the Web", or anything else. Now press the Home button (i.e., the one on the bottom portion of the front face panel of the iPhone with the square in it). You will be switched back to the springboard with all your app icons and from there can do anything else you want. Then, touch the browser icon for the browser you were in and you'll switch back into it. The definition screen covering the browser window will still be there. Touch "Done", and the screen drops away. Blessedly, the open browser window(s) will not reload.
Update:
In Mercury, the trick hasn't failed me so far. However in Safari, sometimes it fails to work when many apps are backgrounded and many browser windows are open. Possibly because Safari is bundled with iOS and written by devs in the same company, the Springboard may have more hooks into it and been programmed to have more discretionary power over its behavior. And a blocking process initiated by Springboard is cancellable by Springboard; if not, then it'd hardly be consistently useful as an OS. But I have noticed that by placing Safari in its select-browser state (touch the lower-right one-square-on-top-of-the-other icon in Safari that causes the browser windows to stack tilting forward, pseudo-3D style) and then switching out to the Springboard and doing whatever, etc., then back into Safari, that also seems to work, even with a lot of browser windows and apps open. But as we all know, some web pages have Javascript that force an auto-refresh based on last date-time of retrieval which they store in their DOM, usually in a hidden field or some other place. So that can't be helped when a browser window becomes active. However lacking that, the window doesn't refresh. So in terms of getting consistently positive results when trying to suppress auto-reload when using Safari, I recommend this approach more often than the more general one I described first.

Using chrome for web development - how to dock the inspector?

I know Firebug is the standard, but I find myself using Chrome a lot (screen space, speed, etc.) Anyway, I think their inspector is pretty good, too. Certainly good enough that I don't want to fire up FF and navigate thru a site every time that I want to take a peak at the DOM.
However, probably the most annoying part is that I can't dock the Chrome inspector to the bottom of Chrome. I see that there's a dock button, but it doesn't seem to do anything.
Any tips? suggestions? Is it supposed to do something else? Thanks.
There is now a button on chrome that allows you to dock the element inspector to the main browser window, just like firebug. It is located in the bottom left of the window and looks like a little rectangle with a smaller offset rectangle in it.
Seems to be something they're working on as we speak. So for now, I guess you'll just have to change the window size, to place the inspector underneath it, or whatever your preference is (except docking, of course)...
Ah .. found my answer here. Seems like it is dockable in Safari and not in Chrome, both based on webkit.
Seems like the proposed to solution is to remove the docking button! That's unfortunate. I won't use it if I have to constantly tab back and forth.
http://code.google.com/p/chromium/issues/detail?id=25