I'm working on a web scraper, and am examining some dynamic content. In the Elements inspector, the time class is pulsing blue. I can't find any documentation on what this is. Obviously it is being periodically updated. Is there a way to find out how?
It means the element is dynamically changed. It seems that there's no document about this, but we can draw this conclusion based on experience.
You can also refer to this similar thread. Edge is based on chromium, so it's the same in Edge developer tools.
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 have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).
Here's an example of how it helped me successfully change the color for an active jQuery UI Tab:
http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)
I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.
Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?
Thanks!
Using Chrome developer tools, you can force the element to be in the hovered state.
Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.
I'm currently changing the look of select elements on my page and I noticed that almost every browser displays all the effects differently. That is not so bad alone but I also noticed that some browsers do not support some effects at all, for example Chrome does not support background image, rounded corners and probably something else I've not yet noticed.
I have seen some pretty impressive drop down menus on some websites where everything has been custom made, starting from the glows to the appearance of the arrow button and so on.
How is it done? Is it done with some Javascript/jQuery plugin?
Can anyone point me to some good resources?
I would suggest you go down the path of a jquery plugin. Doing a search for "jquery select box" returns a number of useful results, eg:
http://www.designdim.com/2011/07/10-important-jquery-selectboxdropdown-plugins/
I have tried out a number of these before, and some are more flexible than others.
One that I really like that is not in that list is Chosen, although it doesn't fully support IE7 and 8.
In Webkit, will a 3D CSS transform set to repeat indefinitely, continue even when it or a parent element is hidden from view by styling (CSS)?
The reason I ask is that I am seeing unexpectedly high CPU usage on a page I am developing.
If anyone knows a good way to diagnose this issue (for example visualizing where CPU cycles are going on a page, as opposed to a blanket CPU usage per tab), I would be very grateful.
Anecdotal evidence (removal of the hidden CSS animation) would suggest that the animations do run in the background. Does anyone know how to prevent this?
In chrome 16.0.912.75, at least CSS animations appear to continue even when the element is set to visibility:hidden;. Setting display:none appears to resolve the issue.
you can debug this kind of situation with the developer tools
chrome / safari right click inspect element.
Go to the timeline tab and click on record, after that you can see what the browser is doing internally.
I'm currently working on a site, and somewhere in my mass of stylesheets, something is killing performance in IE. Are there any good CSS profilers out there? I'd like a tool that can pinpoint rules that are killing performance.
Before you ask, I've disabled JavaScript, opacity, and box-shadow/text-shadow rules. The page is still jumpy. :/ If I disable all CSS, it runs great.
I need a tool that can profile the page and report where the CSS bottlenecks are.
So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that border-radius on an element that contains many children (e.g. a body level div) performs incredibly poorly on IE9.
I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css
From there, you can install a bookmarklet to easily run the test on any page.
The Page Speed plugin from Google has a section that analyses your CSS and tells you about inefficient selectors, perhaps start there?
hth
Note: I know its a Firefox plugin, but should help optimize a bit :)
Hmm, never heard of such a tool.
If you find none, things to look out for manually will include
Any filter statements (the classic alpha=opacity and others - IE has a number of very advanced graphical filters that are extremely expensive)
Huge elements (like thousands of pixels large)
Huge background images - maybe remove them all for a moment?
I would strongly suspect the first point - alpha transparencies can be a terrible rendering bottleneck, especially on older systems.
I also have performance problems on a web project I'm currently working on. It runs well in Firefox, Chrome, even IE8. In IE9 it bogs down.
After some detective work I discovered that eliminating all box-shadow CSS lines improved performance considerably. I had shadows from banners, tables, boxes and tabs, each with just a subtle amount of shadow and blur, but apparently enough for IE9 to get all moody.
The Chrome dev tools used to contain a CSS Selector Profiler for doing just this sort of thing. You can see screen shots of it in this blog post.
The Chrome team pulled the feature in Chrome 30 stating that:
CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation. This time is also included into the Timeline "Recalculate Style" event.
As such, I believe the CSS selector profiler is not as useful as it [might have been] used to and can safely be dropped. This will also reduce the fraction of developers trying to micro-optimize already fast selectors.
You could try to use an old version of Chrome to dig into the issue, but I'd recommend taking a look at the Timeline tab of the current version of Chrome dev tools with will show you how long Chrome has taken to calculate styles (where selector performance is affected), layout and paint the page.
Opera is experimenting with css profiling in its profiler.
It can be enabled following the steps on this page.
Then open the profiler, start profiling, and refresh the page you wish to analyze.
Stop profiling after rendering finishes, then the results will be shown.