I was debugging my website using the developer tools, if you refer to my image, there are 2 styles.css overwrite one another.
It is weird though, because I remember I have only one style.css file attached but it is showing 2 style.css instead. I have checked the location but is exactly pointing to the same path with the same css file(but the content of the css is different.)
The only difference I can spot is the number after the css file name shown by the Devtools
style.css:839
style.css:190
What does it means actually?
It is the line number of the selector present in your file(style.css). In line number 190, you have added a style for the selector(providedSupport). In same file, you have added style for same selector at line number 839
Have a look at Chrome dev tools, this has more feature : Refer this link
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.
Im using SCSS preprocessor (Sass, Compass => SCSS style) with Sublime Text 3 and build system to create css file, it also generates *.map (source-map with original destination of all scss files).
I see too strange behavior.
See screenshot:
(for example: element header and his location is in other file then google chrome showing).
Sometimes google chrome shows up the correct location, see
,but mostly bad.
Source map is here
Any help?
I want to build an entire layout directly from chrome dev tools. So I came over workspaces in chrome dev tools.
But there are 2 limitations I'm facing after I map styles and html to file system resource
If I do some html change from elements panel - like edit html or delete a node - it is not mapped to my workspace html file so that I can save it - is there a way to see such changes??
After I've mapped by css file - and my local css file does not have a rule for a selector say
wrapper{ font-family:"Courier New"}
then I can't persist the change I make from elements panel by directly selecting an element.
See images below:
"Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)"
From https://developers.google.com/web/tools/setup/setup-workflow:
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 )
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.