Does anyone know what kind of syntax highlighter (and what theme, if it has any) does Firefox Quantum (v57+) use in it's Inspector panel of their developer tools?
I believe it was introduced with their new Photon UI, but I'm not sure whether it's just an updated code coloring theme or a totally new coloring processor.
Their blog article:
https://hacks.mozilla.org/2017/09/developer-edition-devtools-update-now-with-photon-ui/
As far as I know, the general tree view within the Firefox DevTools Inspector is developed by Mozilla. Though the editor used when editing a node (context menu > Edit As HTML) is CodeMirror, which is also used in other parts of the DevTools like the Debugger.
The theme is self-created to fit to the Photon layout.
Related
If you hover over an area, devtools does not highlight the area:
Is there any setting to get this feature back?
I know, there are free tools, plugins and stuff, but it was quite handy editing map areas within Firebug / Firefox devtools.
That's not possible yet. There's an enhancement request filed for implementing this feature, though.
I have just started using the Firefox Developer Tools. When I am in the Style Editor, I can't seem to grab the scrollbar thumb to scroll through my style sheets. I assume I'm missing something but can't find what. I have restarted the developer tools, and restarted Firefox, but that didn't help.
My cursor stays as if it is selecting text, even when I hover over the tiny scrollbar thumb, thus it doesn't let me grab the it. Obviously this is important as style sheets can have many lines!
I am using Firefox 50.1.0 currently.
This is a known bug filed as bug 1265807 .
A workaround for this is to switch to the Firebug theme, which uses the OS default scrollbars:
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
So I have been trying for a couple of hours to set a dark theme for Eclipse Juno, the blinding white in your face is very tiring and strains the eyes after a short time. I managed to find a theme that darkens eclipse but still a few problems remain.
See image
I have no control over the background color of the menubar. Is it possible to change it? I tried everything in Win7 "Window Color and Appearance" but aside from being able to change the fontsize of the window title the colors do not change.
I have no control over the fontsize used for the titles in the various view panels of Eclipse, like the projectexplorer or editor.
No control over scrollbar color.
These are minor issues but would make the end result of the themes so much better. Is it at all possible to do anything with any of those issues on Win7?
Does this help for item 2?
The font size for the view and editor titles can be changed in Preferences. Select General->Appearance->Colors and Fonts. In the panel on the right, expand 'View and Editor Folders' and select 'Part title font' then click the 'Edit...' button.
On this subject, this Eclipse Themes plugin is also worth a look:
https://github.com/jeeeyul/eclipse-themes/
This is an excellent article about Eclipse theming:
http://www.vogella.com/articles/Eclipse4CSS/article.html
As for the menubar and scrollbar, the aforementioned article states:
SWT currently has some limitations for styling. For example it is not
possible to style menus and table headers. In addition some platforms
do not allow the styling of certain widgets, e.g. the Button or the
ScrollBar widget.
In order to make these widgets fit nicely you can install custom Windows theme, such as this one: http://vi20rickrmetal12us.deviantart.com/art/Pre-Black-VS-for-Windows-7-180497508 (before you can install a custom theme, you have to patch your system with Universal Theme Patcher or similar tool).
I hit the same wall some time ago. I found this resources very useful at that point:
A eclipse 4 dark theme described in the blog post of its author. It can be downloaded from github here. You can see also the content of the code.
The home of various eclipse themes here.
Another stackoverflow quetion dealing with similar problems here.
Currently I am using InteliJ Idea with its darkula theme.
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.