I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/
Related
I have a wordpress website. I usually make changes in CSS file of theme without any problem but there is file in which CSS changes do not appear. But they do appear while inspecting element.
But while inspecting it shows some digits after the file name. The file name is theme.css, but inspector show me the file name: theme.css?ver=15350008013:1
CSS is compacted and all codes are in one line.
Any change in the CSS file not happen but in the inspector shown. Why CSS editing not working?
This is fairly standard of most caching plugins for Wordpress.
theme.css?ver=15350008013:1
Is requesting a cached version of the file.
The CSS being all in one line is a minified version of the file. This is done to reduce the load on the server by making the file smaller.
Suggestions:
Look through your theme settings to see if there is any mention
of caching.
Look through your plugins and see if there is any
mention of caching.
Once found, clear / flush the cache.
Your changes should now be loaded by the server.
Generally what happens when you clear out the cache is that your plugin / theme will be unable to find a cached version and will minifiy and generate you a new version based off the original and you will see a new number at the end of the request string to tell the browser that the version it has downloaded previously is old and that it needs the new one.
We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:
...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({
outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...
Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:
Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.
Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.
I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:
1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code.
i.e we can refer the the exact line which caused our compiled css rule but not edit it
2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.
Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.
For eg: when I change some property in the inspector it is also changed in the css source file.
Initially
Inspector
Source File
After Changing the property
Inspector
Source File
3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.
When I say source files it means files present in the source panel of the chrome and style editor in the firefox
4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )
I am trying to validate the home page of my Joomla. The issue is that I have the site on my local host so I can not simply copy the URL into http://validator.w3.org/ to validate.
My next thought was to open the index page in my browser and then run firebug to access the source code, and then copy and paste the code into the validator.
This seemed to work okay however when the code returns errors, I now don't know where to access the html to correct them.
Thoughts?
If you have not much knowledge about the way Joomla works, you will have to learn about the file locations.
Normaly, most changes should be done on the index.php file located in your template folder (root/templates/name_of_your_template/index.php)
If the changes you need to make aren't located in this file, you can have a look at the modules, component or plugin files that output these error and that becomes more serious.
If there is a template override for the module/component/plugin you need to modify, the files should be located in root/templates/name_of_your_template/html/name_of_the_module_component_or_plugin
If there is no template overide for the module/component/plugin that outputs the error, you will have to learn about template overrides.
Depending on your browser, there are many extensions that will validate non-accessible (i.e. localhost) pages
In Google Chrome - https://chrome.google.com/webstore/detail/html-validator/cgndfbhngibokieehnjhbjkkhbfmhojo?hl=en
Once it's installed, click on the icon and validate local page.
For example - I added /slots and put all of the contents of the website there but it is showing as a directory tree not as the functioning website.
http://sharedsquared.org/slots/
I have done this before successfully, I thought I just added the folder to the directory and it worked.
Your CSS and JS code are not loading. In Chrome, open developer tools, and see the Javascript console. You're getting 3 404 errors. Your application is in a folder /slots, change the path to your css and js files to:
/slots/Content/reset.css
/slots/Content/slots.css
/slots/scripts/slots.js
or:
./Content/reset.css
./Content/slots.css
./scripts/slots.js
-Jim
After setting up source maps for my scss files, and getting sass debugging up and running for canary, I'm hitting a small but frustrating snag. When I first load or reload the page and inspect an element, I get a reference to the .scss file in the Matched CSS Rules window. screenshot 1.
When I go to switch up the styles, for instance changing the background color, as soon as I'm done making the change, the file path instantly changes to the compiled css file. screenshot 2. Any ideas for why this might be happening?
Indeed, when you modify the CSS, the source mapping between CSS and SCSS is broken, since it is no longer correct. To restore it, you should save the updated SCSS onto disk in the DevTools Sources panel (with sass running in the watch mode) and have DevTools reload your CSS. Then your source mapping will be fine.