I have the rikaikun japanese translator and i made changes to the css folder, it runs good but after 2 seconds it tells me that the extension could be broken. How can i keep these simple css changes without breaking the extension? (I Modified the color values on the css file)
I copied the contents of the extension and loaded it again to chrome on development mode, now it doesn't crash.
Related
I'm on a Mac, macOS High Sierra 10.13.6
Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.
I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.
So to sum it up:
I open Chrome
I load my page locally (a localhost environment)
I open Developer Tools
I pick an element on my page
I click on the name of the resource on the right (a CSS or SCSS file)
I make changes to the source of the CSS/SCSS file file via the sources tab
I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
Chrome updates the styles in the page as it should
I make another change in Sources panel
I save the changes
Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
Chrome does not update the styles in the page. Never again until i reload.
I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.
Can someone point me in the right direction here?
After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain #import on top of the file. But other imports worked.
Why?
The imported file was for fonts. It contained various #font-face definitions. And on the bottom i had two `#import' statements referring to external resources via http.
I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.
I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.
The SASS documentation has this to say:
Plain CSS #imports
Because #import is also defined in CSS, Sass needs a way of compiling plain CSS
#imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.
In other words, i basically wrote a normal CSS #import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.
So to save others time who might stumble upon this: Get rid of your #imports and you'll be good.
The accepted answer of this question contains a good explanation.
I am working with the developer console in chrome, and while working with the CSS I wonder why there are sass files loaded into the project. I am using the bulma framework and I have included the CSS file which does not have any reference to any sass file that I can see.
However it loads anyway, and it precedes inline styling aswell so its annoying.
Why is the sass files loaded and how do I prevent them from being loaded in the first place, does the browser natively support them?
I tried googling but didnt find a good answer.
ANSWER:
I am guessing it is "load sourcemaps" in the console that is the reason, so I have disabled it now.
I am trying to get SASS source maps and the auto reloading/saving to disk to work. I have everything set up with grunt-contrib-sass and watch task to recompile my .scss on changes, and my source maps are working correctly in Chrome in the way that I can edit the SASS and it gets saved to disk. My problem is that when I edit the SASS, the page reloads as if there is no CSS at all. If I then reload the page, my applied changes are indeed there.
Any idea why this happens?
Before sass-change in dev tools:http://cl.ly/image/1R2o2I113H3y
After: http://cl.ly/image/1m0V3b0J420X
I am using Google Canary 33.0.1738.0
Don't know what is causing it but I have found a nice extension as a work around for something like that. I started useing it becuase I didn't want to reload the entire page every time I made a style update. There is an option under css to reload linked style sheets. Web Developer
I'm new to pre-prossesors and am still trying to figure out the workflow for editing documents created with less. So say I have a template I downloaded off the internet where the css was created with less. So I have : somefile.less, and somefile.css. Say I go make changes to somefile.css, will that then update the corresponding rules in the less file? or how does that work? Also do I need to install some extras to be able to edit the .less file and have it update the css? lastly at what point are the less rules converted to css? is it when the document is delivered to the browser via http or does it happen locally before launch. Thanks.
When using something like LESS or SCSS you don't edit the CSS directly, the CSS is compiled from your less/scss files.
You can either use command line tools to compile the changes, or an application. For example, I use CodeKit for OSX (not-free) which monitors my folders & files and as soon as I save an SCSS file, the CSS files are compiled and my browser dynamically updates the changes automatically.
There are however loads of free solutions, just look up "less comiler [your os]".
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/