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
Related
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.
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.
I cannot seem to find the little dotted box in my Chrome properties inspector that let me see psuedo elements like :hover, :active, :focus, :visited
Here is a link to what I see:
Instead there is a new little animations icon there. Yay for that, it sounds handy, but I would like the dotted box back, please.
I can right click on an element and "Force element state" to change the psuedo class, but this method is slower. I like the old way.
I've been looking all over the place, for example this link shows the old way: See :hover state in Chrome Developer Tools
I even looked in Chrome's change log and at their developer site instructions (https://developer.chrome.com/devtools) but no love!
Thanks guys,
-B
for anyone else it appears that the middle icon in the image above, the pushpin icon, now replaces the dotted box. Pressing on the pushpin brings up the same controls as before.
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.
NOTE: I have rephrased the title because I'm not getting any answers. Surely someone out there has experienced this problem and knows what to do. Thank you!
I have an iPhone web app that works almost perfectly in Safari on the desktop. Only two things do not work correctly on the desktop:
Radio buttons do not appear. They are operational because you can check one if you know where it is; it simply is invisible.
When SELECT is used, the little box with the default selection in it and the little down arrow do not appear. However, the actual text of the default selection DOES appear. If I click on that text the drop-down menu appears as it should.
In both cases the problem seems to have to do with icons missing or not rendered as needed.
What is the problem and how can I correct it?
Thank you.
Dave
Have you tried changing your user agent to Mobile Safari? If you turn on the Develop menu in Safari advanced prefs, you can then test the app in different environments. It's just a thought.