It is very difficult to program when you are trying to inspect an element, say:
Then you refresh the page, and chrome throws you back to:
Forcing you to open the path all over again.
Not very nice or productive use of my energy.
Now, I have mentioned this in the past and even filed a bug report and I remember it being taken care of at one point, but it seems to be back now. I can not find the old info to link to.
All chrome has to do is reselect the previous selected element after a delay ( which I assume must be defined statically in order to guarantee that at that time the element do exist again).
Ideally, chrome dev tools would allow us to programmatically allow us to select any NODE to do this selection programmatically, but i don't think we will get there.
This is very frustrating to deal with.
Any tips? Is this possible in other browsers? Firefox, firebug, safari?
Related
I noticed recently that when using Chrome or Safari for developing, I see this little indicator in the upper-left of the screen that shows me the load time of the page. If I click on it will change positions I think, and disclose a larger panel showing more info about the page load.
I feel a little silly but I don't know what this is -- it isn't an extension AFAIK (I disabled all extension), it happens in BOTH Safari and Chrome, and it only happens when developing on 127.0.0.1 or localhost
SO.. my question is, can I 1) disable it, or 2) move it to another corner on the window?
It's a patently straightforward usecase: All I want to do is take a screenshot of the "Hello World" that is below the indicator, but it is covered up.
I don't remember seeing this until recently I am assuming it is something I just never noticed or something new in Webkit
UPDATE 2021-03-13
Does it let you inspect it in developer tools, perhaps by using mouseover selection? Its attributes and CSS classes might give you something specific to search for.
Yes I can inspect it. it seems to be on my page. I wonder is this from Ruby on Rails? huh?
it looks like so:
Does it happen in Firefox? If so, it's probably not a browser thing, but a server thing.
Yes! Another good call my friend. So, not webkit or browser you're right.
What http server are you using? Could it be adding the thing automatically?
It must be something new in Ruby on Rails that I never noticed before. I will confirm and post here again.
What you're looking at is called https://github.com/MiniProfiler/rack-mini-profiler and can be enabled and disabled at will using Alt+P.
You can verify this by clicking an entry and clicking more. At least on the version I am using, it will report that you are looking at rack-mini-profiler, like so:
I've been through approximately 2/3 of all the vscode extensions but haven't found what I'm looking for yet.
I'm looking for a vscode extension like live server that highlights the portion of the browser you're working on in vscode. For example: if I click on or highlight a p tag it highlights the portion of the browser and puts a highlighted border around the same paragraph in the browser and while I'm typing it automatically updates as I type.
I'm not sure if you will be able to find something exactly what you are looking for. THe closest you can get, I believe, is DevTools for Chrome extension, which is just devtools put into the editor window, for highlighting DOM elements etc.; and Debugger for Chrome, for, well, debugging scripts (breakpoints etc., which sadly don't work in the first one; while at the same time the second doesn't deal with DOM at all I think).
I've been looking for an answer for a while now and I can't seem to find any reasons why this is an issue. I have various places in my style sheets where I use cursor: pointer for UI elements like buttons and links. The majority of the time it works as I expect, but occasionally they just don't want to work. I'd love to say I have a specific example in the style sheets that would ensure replication but that's been the issue. When it happens, it's not just for one element, it's for all of them. I've experienced this across the board with modern browsers and it seems to just be completely random which makes it hard to troubleshoot.
The only thing I've been able to confirm 100% is that if it does happen, I can open developer tools, then select an element to inspect that is supposed to have the cursor: pointer and the effect begins working everywhere again. I'm not sure what's going on here and it's driving me up the wall.
Is there any documentation surrounding this issue or something similar?
I experience it in localhost.
I haven't noticed it in production.
I haven't noticed it on JS Fiddle or Codepen when creating wireframes.
Is it a localhost issue? I've even thought it may be related to something I had done prior, but it happens even as I just navigate the site while debugging, sometimes it works on one page, but come back to the same page later in the session and it may not work anymore.
I know this one's tough and there's not a lot to go on. I don't usually make posts without code, but I'm just wondering if anyone else has experienced the same or a similar issue and resolved it.
I too have experienced this. It's actually not a code issue at all. I've found that the cursor: pointer bug you're experiencing is directly related to the Visual Studio 2017 (and newer) remote debugging browser window.
Solution
In Visual Studio, disable "Enable JavaScript Debugging for ASP.NET (Chrome & IE)".
At the top of your Visual Studio window, go to Debug -> Options. The highlighted item in the screenshow below must be unchecked:
This was a feature added in 2017, and while it helps with debugging JavaScript and TypeScript, it does so by launching a plain browser window ("remote debugger"); that is, no extensions, no bookmarks, no history, etc. The remote debugging browser window seems to have its fair share of bugs.
I saw this same behavior but not while debugging through visual studio. If I hit F12 to go to the Chrome dev tools, then click on an html element. The cursor goes to the style listed according to the style sheet.
Recently in my company we had cross browser testing on very big application. We have prepared selenium webdriver script for functional regression testing, however, there is not more scope covered for cross browser testing and that made us to test whole application in all browser (IE 9,10, 11, FF, Chrome, Safari). We have perform this testing as we also include GUI testing like image, button etc., Now, the question is, is there any way we can automate this?
My idea was to get all the element of page and get the location of all elements and save it in xml file, for example let assume that we wrote script for google.com and we got all the list of element with there location (x,y) for IE 9 browser, now run same script with rest all the browser and save the element location and than compare each element location with different browsers out, this how we can get the details information about element location in different browser, we can also use size, isdisplay, isenabled method to verify element. Using location method we can find which element does not exist or not located on correct place...
This are my thought, can I get any input from you?
Thanks!
Your thoughts are mostly correct, except the fact that you cannot compare exact locations of elements in browsers (they will usually differ) but you can compare how the elements are related to each other (e.g. element x should be on the right side of element y, etc.).
I know of two commercial solutions that offer functionality similar to what you described: Mogotest and CrossBrowserTesting. They both offer free trials, so have a look at them. Browsera claims to have such functionality too, but I've never used it so I cannot comment on it.
If you prefer to implement such system by your own then there are two sources you may find helpful:
Web Consistency Testing
WebDiff: Automated Identification of Cross-browser Issues in Web Applications
There is quite high level of false positive issues with this approach. There are multiple cases where you'd see a given button reported to be 3 times larger on some browser while it's not. Apart from this it's a good one since it would also tell you the difference
I use Chrome's Developer Tools a lot and on the whole I prefer it to Firebug, but one thing that I've been noticing lately is that sometimes it fails to show my pseudoelements in the styles area. Sometimes it does, so I know it works occasionally, but some, seemingly, random times it doesn't. The obvious response to that would be "are you sure they are set up properly?" Which I consider each and every time it happens. But the elements are visible in the template, they just don't show up in the styles so I can't edit them.
I'm referring to :before and :after mainly because thats what I use the most.
Has anyone else had this problem? If you haven't, I'm sure this will be hard to answer, but I'll supply any more information I can. I would show you the example where I'm having trouble but it's on a private server.