I'm having a weird problem right now.
I'm trying to iron out a CSS bug in Chrome, but whenever I enter Developer Tools the bug is mysteriously fixed.
How would you go about a situation like this?
And why is the rendering engine playing tricks on me? ;)
This is the bug and it was reported number of times.
It was fixed 6 day ago.
Please wait for the next version of Dev channel build.
I would go with firefox instead.. The developers toolbar works well, and also firebug for firefox is way better for debugging :)
Related
Since quite some time ago (probably months) I noticed that Chrome dev tools does not render the html/css correctly anymore. It does render something, but it's not looking great, making it hard to use. This is how it looks in Firefox and how it looked like in Chrome too:
But currently in chrome it looks like this:
I know in Firefox the tab is called Response, but if I go there in chrome you just get raw HTML. An option you can switch in the Firefox tab.
I didn't have a lot of errors I had to debug trough the network tab but currently im back to it and starts to get annoying so I checked some Github issues and other pages on internet but I can't find anything similar that might help solve this question. I couldn't find any settings either. Am I doing something wrong?
Im using Chrome: 103.0.5060.66. Symfony version: 4.4.
This happens because of the improved security on the network preview tab introduced in Chrome 102:
https://developer.chrome.com/blog/new-in-devtools-102/#network-preview
It will be back starting from version 106. You can already have it in beta version 106.0.5249.40
Probably some of you faced similar problem of Safari dev tools.
When I debug CSS properties of elements on Safari dev tools, it's fine - I can enable/disable different properties and they're get commented/uncommented (see attached picture), but when I start debugging iPad pages remotely - it's different...
When I disable some CSS property, it disappears instead of getting commented. I have no other possibility to enable it. I must add it manually... It's annoying...
Do you know the solution?
I think I found a solution. I use iPad 4 which has no more iOS updates available (last one is ver.11).
However I could get rid of the problem by going to dev tools settings, selecting experimental tab and checking the "Legacy style editor" checkbox
I hope it will help someone of you.
I'm trying to find a way to debug my CSS animations in Chrome specifically. I downloaded the latest version of Chrome Canary since it was supposed to contain this feature. Multiple sources confirm that there should be a button in the DevTools under the style tab.
However, the button is simply not there. It's also not available in the most recent version of regular Chrome, or in the Chrome a colleague of mine uses. Is there some setting I'm missing?
It's very hard to find a good source for this problem, that's why I'm asking you guys for help :)
I'm not sure why there's no button, but you can open the animation tool by selecting it from the context menu in the console drawer.
My chrome version is 61 and the animation button is now moved to "More tools" under the 3 dots to the top right. Hope my answer can help those who view this post recently.
I have a problem with the inspector in Firefox browser. After some time of use, in the "rules" tab, system don't want to show me CSS syntax suggestions. After switching the inspector off and on, everything returns back to normal, but ... again ... after a few moments, the system stops showing me syntax hints.
with syntax hints without syntax hints
after a couple of minutes
Is there any FIX for this? I'm using newest "FireFox Developer Edition" (same thing on normal "Firefox").
UPDATE:
I discovered that inspector starts to work improperly when I restart a page which I have been "inspecting".
Are you using Firefox Developer Edition 41.0a2? It appears to have possibly been a bug that is being corrected.
I can confirm this happens in Firefox 40.0.2.
I also saw this in Firefox Developer Edition 41.0a2.
I updated Firefox Developer Edition to 42.0a2 and am no longer able to recreate this phenomenon.
Install firebug plugin for firefox. Ita a very good debugger tool. After installing enable it and right click on page and do "inspect element with firebug"
I have built a website(asp.net): http://avior-ins.co.il/
I can view the site on my computer(I have checked Firefox, safari, chrome and explorer and everything's OK), but the customer says that the CSS seems to be defective when he use iPad.
I don't own an iPad/iPhone, but I don't see any problem when I use my android phone(Motorola droid razr). I have also checked the site http://ipadpeek.com/, which is supposed to be a kind of iPad emulator and I don't see any problem.
Will you please check the site from Ipad and tell me what can cause the bug?
Thanks from advance!
In case you run into too much trouble developing a one-size-fits-all web page, you can have an ipad version of the page and then use detect/redirect strategy.
http://davidwalsh.name/detect-ipad
This fellow has a few nice approaches to that already worked-out.
Thank you all for the help. The real problem was an tag with text-indent -9999px.
It was placed on the site's menu and when I removed it, I looked ok.