So I'm running my Rails app on a Nitrous.io server, and Chrome's web inspector is displaying some weird behavior that I've never seen before. When I try and modify some CSS in the web inspector, it automatically switches back to the previous CSS and doesn't make any live changes. I've never experienced this before and rely heavily on web inspector to work on the CSS of my site.
I'm currently running Chrome OS v29.0.1547.74 on a stable build.
I would post my css file but it's pretty long. Any idea where I should start looking to debug this? I really need to be able to make live changes in the browser to work on this site.
My CSS passes the W3C CSS Validator, all I get are warnings for 'unknown vendor prefixes'.
Related
I'm working on fixing a CLS issue. It would really speed up my development cycle if I was able to make HTML tweaks in the inspector, then be able to immediately run those through Lighthouse. Is this possible?
You can try using local overrides to make changes persist in Chrome Dev Tools. Here's a video that explains it: https://www.youtube.com/watch?v=xNzOUOtnxDc&t=656s
I just deleted an unused CSS file full of fonts and compared the Lighthouse JSON files before and after and it seemed to work.
This is the Lighthouse comparison tool I used: https://googlechrome.github.io/lighthouse-ci/viewer/
This was the first time I did it, so apologies if it doesn't work as intended.
Hope this helps!
I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.
So I recently updated my online portfolio, just a few minor changes to the design, it looked great in browsersync, then when I upload it, it looks horrible. It's like some of the CSS isn't being read. I can't figure it out. When I view it in an incognito browser, it looks just how it is supposed to - knowing that, I cleared all my cookies and data and still nothing changed. I'm new to web development, and this really boggles my mind. Does anyone know what is causing this?
Web browsers tend to locally save a version of the css so they don't have to request it from the server each time you visit the page which speeds up the load time. Try hard clearing the cache for your portfolio page then try again.
modern development tools like Chrome's web inspector can turn off caching and request the entire page from the server each time, that might help you.
Could possibly be that your browser is imposing it's default-styles onto your project, or more than likely that an addon/extension is changing your browsers' ability to display your CSS. I would suggest running through your extensions and see what could be causing it, or to quickly troubleshoot, download and install another browser and leave that clean (as in no additions) and use that to test.
This is kind of a long shot, but I'm at my wit's end. At some point in developing a locally hosted Foundation page, the Chrome Developer tools stopped displaying the stylesheet and line for each individual CSS rule when inspected, but instead just seems to show the media query for the element. I've noticed that other pages I've built with Foundation, locally hosted are doing the same thing. It only seems to be locally hosted Foundation pages that are giving me this problem. Locally hosted Bootstrap pages work as expected, as well as Foundation pages that are actually hosted. I have no idea what is going on here, or why the Developer Tools would just stop working in the middle of a build. I've checked all my settings, went as far as downloading Chrome Canary and am seeing the same results. I'm not running any kind of local server like MAMP, and this have never been an issue in the past.
Any help?
If you are using prefixfree.min.js just remove or comment it out and everything should go back to normal.
I'm pretty sure the answer was in my file folder structure. The parent folder contained a blank " "space, replaced with a - everything seems to work.
I have successfully installed both netbeans and the chrome extension for doing html/css/js work. It appears to work for the most part but I've seen some questionable activity that is... "limiting".
Netbeans > Chrome seems like a fragile interaction. In netbeans, I select run file, and the page opens in chrome always in a new window (is that right?). Part of the marketing here is that you're supposed to be able to edit the css without having to constantly go to the browser and reload. But in netbeans, when I go to the tab of the css file (in the same project), the chrome page bombs with the Dead Folder icon and the text "Something went wrong while displaying this webpage".
What's supposed to be the process here? It seems to work in principle, but not in practice.
[update]
I had also had the addon problem that if I did Run Main Project while looking at the css file, it would show the css file as if it were the main html file. After setting chrome as the default browser, this action shows the actual main html file. At that point, making any change to the css file, any typing at all, will bomb the chrome page.
Take a look at this tutorial.
Once you run a page/project in Chrome with NetBeans integration, in NetBeans there is a window CSS Styles and slightly different Navigator (in 7.3). Now in browser you can start Inspect mode (for instance right click on NetBeans logo in omnibar and check "Inspect in NetBeans mode") and then you can for instance click on elements in browser and if you do that, the CSS Styles window in IDE shows all css properties and rules applied to selected element. You can edit CSS from either CSS Styles or by plain old editing of CSS file in NetBeans. In both cases, changes are visible in Chrome without any reload (without even saving the css file). And you can also use JavaScript debugger in NetBeans.
I don't know what do you mean by "chrome page bombs", but page cannot be debugged by 2 "debuggers" at the same time in Chrome - so you can either use NetBeans or Chrome Developer tools.
There are many new features in the upcoming NetBeans 7.4 (you can download 7.4 Beta from netbeans.org). You can try it as well.