Is it possible to change columns width in Firefox Developer Tools? How can I do it?
When I point over column edge (like Status, etc. on the screenshot) there's no resize tool so I can see whole content.
Update: This feature is now available and enabled by default in Firefox 67. You can disable it (are you crazy?) using devtools.netmonitor.features.resizeColumns flag.
Original answer: As you probably know there is no option to change the column(s) size (as of FF57), the only option you have is hide/show columns. it's easy to do, just right-click on any column, you should see the list of columns and can select/un-select them.
But that's it?! no, you can change the column(s) size using CSS (hack the dev tools), here is the steps:
Open up the dev tools (using F12 or ...)
Click on the gear button, up right corner Go to Settings, shortcut: F1
Check this 2 options:
Enable browser chrome and add-on debugging toolboxes
Enable remote debugging
Hit Ctrl+Shift+Alt+I and Click OK (on security prompt) to open Browser Toolbox
You should be able to inspect the Dev tools using opened Browser Toolbox
Play with CSS (same as you do with normal web page)
Save your custom CSS in userChrome.css file
Need more info about userChrome.css, head to userchrome.org
Here is steps to create/modify userChrome.css:
Open up about:support
Click on Open Folder (in Profile Folder row)
Open/Create chrome directory
Open/Create userChrome.css file
Do what I said in first section
To demonstrate how it works, I change the background color of one of Network tab's columns to red.
And here is my userChrome.css file content (for above example)
.requests-list-file.requests-list-column {
background-color: red !important;
color: #fff !important;
}
I used !important just for time's sake, don't use of that if you can
While there seems to be some recent progress on the feature request and its dependency, the latter was created in 2016 so it's fairly safe to assume it could be a while yet before Firefox supports column resizing by default.
In the meantime, here's the CSS I've added to my userChrome.css:
.requests-list-header-button {
padding-inline-start: 0px !important;
padding-inline-end: 0px !important;
}
.requests-list-method {
min-width: 30px !important;
}
.requests-list-status {
min-width: 40px !important;
}
.requests-list-file {
min-width: 100px !important;
}
I wanted to enlarge the File column, but found that reducing the width of the Status and Method columns instead made a big improvement alone. The styles also remove side padding from the column headers to avoid the text being truncated with ….
These are the classes for the default columns:
requests-list-status
requests-list-method
requests-list-file
requests-list-domain
requests-list-cause
requests-list-type
requests-list-transferred
requests-list-size
requests-list-waterfall
Note that if you reduce column widths too much, it may throw off the alignment. See Mehdi's answer if you don't know where to save your userChrome.css or you need to find classes of other columns.
Related
In the VSCode editor when you pull the scroll bar down to the bottom of the file, all you see is a blank page, since the text has scrolled up past the top of the text editor window. This makes scrolling to the bottom difficult because you can't just pull the scroll bar quickly all the way down but have to carefully position the cursor so you can still see your code.
Very similar to How to make Visual Studio editor stop scrolling past bottom of a file?, but comments have pointed out that question/answer is for Visual Studio. This answer is for VSCode on the macOS and Windows.
The correct answer is seen here: https://stackoverflow.com/a/40588828/1189470
There is a configuration option provided in VSCode for the functionality you specified. To enable it, go to File -> Preferences -> user settings
On the right side of the editor in settings.json paste the below line at the bottom (before closing bracket), save and close.
"editor.scrollBeyondLastLine": false
This will prevent the editor from scrolling beyond the last line.
This is now exposed as a simple checkbox labeled "Editor: Scroll Beyond Last Line" in File/Apple -> Preferences.
If just for readability you would like some space at the bottom of the file - a configurable amount - try this setting as of v1.43:
editor.padding.bottom in pixels
Editor> Padding: Bottom
Controls the amount of space between the bottom edge of the editor and
the last line.
and/or
editor.padding.top // but this isn't sticky in the sense that you can scroll right past the padding top and it is gone. It doesn't stay.
In the Firefox developer tools rules view the selectors are pink. Sometimes there grayed out selectors together with the pink ones. What do they do?
In my experience, the greyed out html elements are those with display: none;
If a rule has multiple selectors, the ones that apply to the selected element are brighter (for me, green; but apparently for you, pink) and the ones that do not apply to the selected element are dimmed.
I've just started using SASS with Sublime Text 2 and it's great. I'm using the SCSS syntax.
However, I've been using Emmet and it does not seem to work with SCSS well when using tab (for me). With Emmet, I usually write: float and press tab, it converts it to float;. This is only after I made the following change to the preferences, for SCSS:
{
"preferences": {
"sass.propertyEnd": ";"
}
}
However, I also commonly write a class or element name: body, press tab and it creates body { }, with the cursor within the brackets. This seems to have stopped working, and since I've changed the preferences, it just ends the property with `;.
Is there a way to get this autocomplete function back, with element names and attributes?
I'm not clear on why you wanted to set propertyEnd initially, but I can highly recommend the even shorter expansions Emmet has to offer:
Ex: Type fl followed by tab and you should get float: left; with the 'left' already highlighted for you to change. fr also expands to float: right;.
I'm not sure if these are standard with Emmet or if they come with the SCSS Package for Sublime, but they save me a lot of time. If you get used to them it's even quicker then typing out a full float before hitting tab.
I've created a textarea element, and applied a style of text-align: center; to it. Now, whenever I type something and then press enter to go to a new line, the text on the previous line will be bumped over the left a little. Why is this happening? I've tested this in Firefox, and the problem is not present. It is present in Internet Explorer 8 and 9. Any ideas?
SOLVED: I found that adding a css style of white-space: pre; to the text area fixes the problem.
I got this problem with Firefox and input elements.
JsFiddle
In this menu, if you navigate to "Strumenti" -> "Colonne" -> "Prova6", you will see a table inside a li with two inputs and one combobox.
The inputs seems to be disabled but only with Firefox: with Chrome or IE it's all working as expected.
Any ideas?
After a deep search, I finally found the problem:
$( ".sortable" ).disableSelection();
This line, included in this jqueryUI demo, disable the input in FF.
JsFiddle of the solution
There is also this css -moz-user-select: none; that I personally wrote for disable selection over the text of my menu that cause a wired behavior, alwasys in FF: I will delete it for my solution.