How Do I Change/Enhance/Modify The Firefox Developer Tools - firefox-developer-tools

I am trying to make some changes to the Firefox Dev Tools. I am starting by adding console.log statements. Where should the output show up? What are the alternatives? How should I (attempt) to debug the Firefox Dev Tools? Note that I have already expanded omni.ja and rebuilt omni.ja as need be.

This question is actually a duplicate of 61267253 and should be closed / deleted

Related

Chrome dev tools Network -> Preview tab not rendering html/css anymore, like Firefox does

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

Safari dev tools problem when debugging remotely

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.

Firefox inspector - CSS rules suggestions/hints

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"

CSS is different after launching Developer Tools?

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 :)

Does this seem like an IE8 float bug to you?

I've noticed a strange behavior in two different sites when using IE8.
The first site is in the site that I maintain xebra.com.
The second site is google analytics.
The behavior is that when an address is typed directly into the address bar of IE8, both sites display correctly,
But when one of the sites has already been loaded, and you press the refresh button or F5 key, the layout gets all screwed up:
See screenshots here: here
Something is causing IE8 to render in 'quirks mode' which causes the breakage.
You can duplicate this by browsing to your site in IE8 and selecting Tools > Developer Tools > Document Mode > Quirks Mode.
Make sure your document is always being served in standards mode.
EDIT My original answer had 'compatability mode' where it should have read 'quirks mode' - the two are different.
JS.Companion was what was causing this odd bug, and not IE8. Phew!
http://www.my-debugbar.com/wiki/CompanionJS/HomePage
I spent the whole morning trying to figure out what was going on, I removed companion.js and bingo my site is perfect! thanks for this.
That's really strange. I don't have the problem on my computer with Companion.JS installed and http://www.xebra.com/ web page (under Vista SP1).
I would be happyto correct the Companion.JS bug that generates this problem if you can provide more information about the problem.

Resources