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"
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'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 :)
Is there a way to debug a css file in IE? I wish to see if a particular background-image is loaded or not.
This is in reference to the question:
extjs gridfilter icon not showing in IE but shows in Firefox
Or for any version of IE, try FireBug Lite. You can simply bookmark the link given on that page (bookmarklet) and then, to open a FireBug like thingy whilst on IE, simply click on the bookmark you just added.
Use the built in browser troubleshooting tool (aka Developer Toolbar) by pressing F12.
It is built into IE8 and later, but you can download and install it in earlier versions.
Do you want to target IE specifically in your CSS? If so I wrote a blog post about this not so long ago, please have a read: http://ajthomas.co.uk/blog/?p=299.