As I am trying to figure out the 'CSS Grid', I stumbled over Firefox Developement Edition. By the way, a great tool for learning CSS Grid. It would be even nicer if I could use the editor to actually change stuff. Unfortunately, I do not know how to save the changes I made (img).
help is much appreciated.
Your screenshot shows the Inspector-View of the dev tools. You can save files to you local disc with in the Style-Editor-View. There is a little save-button for each style-file.
However you also can mark style properties with the mouse and copy and paste them anywhere.
In modern Firefox, there is a new feature for this!
In the inspector, in the right pane, the fourth tab should be Changes.
It contains a button to Copy All Changes you made to the clipboard as a stylesheet.
You can then use the extension Stylish, create a new style in there, paste those styles into the text box, add a URL patten for which it should apply via the buttons below, give it a name, save the thing, and you’re set.
One caveat: If you disabled CSS rules on that page, they will appear as comments and do nothing. So you need to uncomment them, and set their value to something like none or initial or unset.
E.g. to force those brain-dead sites that are designed for tablets only to use the full width of your screen, you’d disable max-width, which would appear as /* max-width: 80rem; */ or something in your styles. So you’d turn that into max-width: none;.
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
I would really love to see all my live css changes summarized somewhere in Chrome browser, there are a couple of question about this at SO, but nothing works for me. Especially this particular answers which seems to be the most straightforward way to achieve what I need.
Export CSS changes from inspector (webkit, firebug, etc)
I've changed a few css properties, but don't see anything in this tab:
FYI - I'm using webpack dev server to serve this page if that's relevant
Here is how I make my changes appear:
Once you select the element to modify click the + sign under the styles tab.
The new inspector style sheet appears under the changes tab in the left hand column. The right hand pane includes your new changes.
If you made css changes in the Inspect > Elements pane, and didn't happen to use the method of https://stackoverflow.com/a/69634283/6200445 , then one way to see the changes is to do a git compare of the DOM structures. Its not a perfect solution, but you can compare the dom structures (via edit HTML on ) in two commits, comparing some baseline (commit) with your live css changes (second commit)
In my case the git compare had a few irrelevant changes but it caught all my css changes.
I would like to overwrite CSS style in Google homepage.
I'm able to do it with DevTools/Overrides but DevTools has to be always open.
I checked some Chrome extensions and they work everywhere but not in this default tab (without url).
There is an option in the right bottom corner to change the background but no way to define the entire CSS style.
I remember something like this was possible, any CSS to any website on FF and Chrome, maybe they remove it.
Is there any way to change the CSS and make it permanent?
Any help will be really appreciate : )
DevTools only makes client-side changes (changes that only you and your device can see). These changes do not affect the css that is sent to you over the internet. However, the changes you make in DevTools are erased every time the page is reloaded, and the default code from the server is restored. As a result, you can’t make permanent css changes to code from a server that you do not own; all client-side changes are temporary.
My preferred CSS workflow (at least when tweaking existing CSS) is to edit directly in the browser using the 3-panel Inspector panel, then copy the edited styles to my stylesheet.
Sometimes I'll edit the styles for many elements and forget that I edited some element (since you can only see if it's edited AFAICT by selecting exactly that element and looking for rules with a green bar to the left). Then I'll fail to manually copy that element's style changes to my stylesheet and, on reload, lose the changes.
Is there somewhere I can see all the places where I've edited styles using Inspector -- including adding new rules -- so that I can copy them all at once?
The Firefox devtools now have a "Changes" tab with a Git-like panel showing all your changes.
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.