I'm trying to debug a website and in Chrome's inspect element I'm seeing 8 errors and 1 warning.
The Warning shows up right next to the problem.
However, the Errors don't show up anywhere and I can't locate them. Also, the errors and warnings show an underline when I hover over them (like links often do), but clicking on them does nothing... I'm fairly certain this is just a limitation, but I thought I'd see if something was screwed up with that too.
Solution
When I was hitting the console >_ icon it needed to be raised up. I mistakenly thought it was referring to the CSS, but the errors were console errors (not CSS errors).
Click on the "Show Drawer" icon (it looks like >_) Those errors are displayed there under the Console tab.
Related
I am not sure what started it, but now suddenly when trying to use Atom (on Ubuntu Linux), it opens fine, but keeps focus on the upper-left text of the open tab. For instance, if I try to click somewhere else in the file to move, the cursor, the cursor jumps back to the beginning of the file. If I click on another tab to look at a different file, it immediately jumps back to the original tab, upper left corner of the text. If I hit ctrl-f to search for something, focus jumps back to the text editor. If I try to switch to a different application like Chrome or the terminal window, Atom immediately comes back into focus.
Has anyone else run into this behavior or maybe knows what's going on?
I tried purging and re-installing but am still running into the same behavior.
I figured out that the behavior presents itself any time I try to edit a .ts file, at which point it automatically opens a file "child.js" in the TypeScript plugin directory and begins to display this behavior. I updated the TypeScript plugin and that seemed to fix it. Maybe this can be of help to anyone else who runs into the issue. (Bug link: https://github.com/TypeStrong/atom-typescript/issues/1098)
We've been having an odd issue that I'm not sure how to tackle, and I think this may be related to a recent Google Chrome update, but I'd like some way of sanity checking myself before I open an issue on the bug tracker.
Problem
We have an internal web application that our users use Google Chrome to access. Starting sometime early last week, we've noticed that when users middle click links, one or more of our stylesheets gets unapplied to the page.
Weirdly enough, zooming in / out or opening Chrome's Devtools re-applies these stylesheets to the page. If you open the sources tab in the Devtools and watch the stylesheets that are loaded, when the layout is working, we're seeing the full list of stylesheets. When a user middle clicks on a link, the stylesheets area flashes and the CSS file is missing from the list. Zooming in / out re-adds the missing CSS file to that sources list and renders the page correctly.
Before Middle Click
After Middle Click
Troubleshooting
Thinking this was some JavaScript function doing this, I watched the elements to make sure there weren't any changes to the DOM (thinking we may be adding a class to our wrapper elements on accident). No DOM changes that I can see, and I'm not seeing inline styles applied to HTML elements.
Figuring that the previous step wasn't enough, I removed all the JavaScript on the page trying to narrow down what file is doing this. After removing all JS from the page, we're still seeing the same thing. Someone middle clicks a link, then the page's styles go crazy.
I double checked it in Incognito mode, figuring it was one of my extensions. It still happens in Incognito mode.
Thinking our Stylus compiler was going nuts, I double checked the stylesheets for any invalid CSS and couldn't find any. I removed the source maps from all our stylesheets thinking it may be related to that, but it didn't fix the issue either.
I've also checked for the stylesheet being affected having a disabled attribute set on it, but that doesn't seem to be happening.
Wrapup
All in all, I'm not sure what's causing this outside of a browser bug. This is something that had popped up late last week which coincides with the last upgrade of Google Chrome, which hints to me that this probably relates to that update.
That being said I've not seen this issue affect other websites, which also points to the website being the issue so I'm not sure.
Is there any other way I can narrow this down to being a Chrome issue? I've not had this happen on any other browsers I've tested. (Working on putting together a MVP of the issue that's happening now.)
Your problem sounds similar to this.
Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=647151
Should be fixed shortly.
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I do a large part of my development work in the Chrome developer console, and love it, but recently something highly annoying has happened.
Every page load, I now get a log of every CSS property warning, a considerable list that fills the entire console with warnings. I know I can set the log level to filter out warnings, but I want to see some warnings, particularly script related. Also, this resets itself every page load, so all the CSS warnings fill up my console, and look visually upsetting.
See the screenshot:
I believe that this started happening immediately following the most recent chrome update, but I was also fooling around with some of the settings in the console. I've looked through the settings in the console and under chrome://flags but haven't found anything. Does anyone know why this is?
I've never had this happen to me, but have you tried deleting the history?
https://developers.google.com/chrome-developer-tools/docs/shortcuts#console
I have Products.Carousel 2.1b3 installed in my Plone 4.0.2 site. It worked alright up until a day or two ago.
First symptom was that when clicking on the Carousel tab for a folder, it wouldn't show the tabs (only the message above the tabs - the one which says that I should go to Contents tab to edit existing banners).
I deactivated and then reactivated the product in the Plone Control Panel. It seems to have corrected the tabs not appearing problem. After that, however some other strange symptons:
Some Carousels refuse to appear (it seems but I am not sure that the only Carousel appearing is the one for the Plone Site)
The width and height configuration are not respected
For the Carousel that does appear, there is no transition and the slider shows only the first banner
Finally, in the event.log, there is a Warning about plone.app.registry:
2011-04-07T17:45:55 WARNING OFS.Uninstalled Could not import class 'Registry' from module 'plone.app.registry.registry'
But I have no idea whether this started showing before or after the Carousel problems.
Any ideas on how I can fix it?
EDIT --
After some experimentation, it seems to be fixed by removing collective.carousel.
Does anyone know about any incompatibility between Products.Carousel and collective.carousel? Should one NOT install both at the same time in the same site?
Run bin/instance debug It's not uncommon to see errors reported there that you don't see in your normal log.
"Some Carousels refuse to appear" sounds likely to be a script problem - try using Firefox with Firebug to see if there are either any 404 (file not found) errors or javascript errors.
While OFS.Uninstalled is just a warning, I've seen sites completely broken by removing plone.app.registry. However, this isn't the usual symptom. I doubt it's the issue, but you can always add plone.app.registry to your buildout and see if your problems go away.