I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
Related
Is there a way to get a list of the custom CSS changes you applied within the Chrome dev tools?
When you're playing with CSS in the Chrome dev tools to get your web page look right, it would come in handy to easily track the changes you made.
I know about workspaces, but the use case is an Angular 5 app where your CSS is bundled and possibly minified.
To clarify:
I have a page that is looking pretty far from what it should look like
I do 20 CSS fixes in dev tools until it looks good
now I want to get a (CSS) delta from the original page so I have a list of changes I should now implement in the real CSS styles.
You can see all changes via the Changes Drawer
In Dev Tools, you can locate the Changes Drawer via either:
A) Open Command Palette (Ctrl + Shift + P) and type "changes"
B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes
Further Reading
How to get a summary of your CSS changes in Chrome dev tools?
Export CSS changes from inspector (webkit, firebug, etc)
Updates
Dev Tools 98 added More precise changes to automatically pretty prints changes
Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize
Actually you could do exactly what you want:
Go to Sources > > Local Modifications
Going to the Sources tab, choosing your desired CSS file, and then right click and choose Local modifications will give you a diff style summary of your local changes.
Or - you could just save the changes directly to a local CSS file by mapping that local file so that chrome dev tools will automatically save any change that you made to this CSS file.
That depends on how you apply css fixes.
If you apply css code inline,you can't get a file with list of fixes you made.
If you made your changes in inspector-stylesheet you can find that file with all your fixes
Go to Source tab > from the left list open localhost > you can
see file called inspector-stylesheet.
Which will show all your fixes.
Another way to pick your css fixes from 'Elements' tab in dev tool you can easy copy edits you made and paste it in your css file of your project or you can edit source file itself from 'Source' tab in dev tool you have two things to do to keep what changes you made:
By pressing Ctrl + S or Cmd + S to save changes and automatically will save changes in your root css file in your project files.
You can copy and paste changes from dev tool to your css file in your code editor
Well, I learned something new 😯
How to monitor changes to inline styles in console
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
references: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
const targetNode = document
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
console.log({
mutation,
inline: mutation.target.style[0],
style: mutation.target.style[mutation.target.style[0]]
})
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
This does not solve the problem
but could be used as a starting point for a custom solution to the problem.
custom diffing of each element replacing old values with the latest values you could end up with a diff of all changes up to this point using your own maintained list.
This could be a pr to each of the browsers or created as a chrome extension. Goodluck, wanted to present a possible solution instead of saying it was impossible.
I know it's "another" subject, but you can try to launch it in some live checker extension in VS Code in order to follow everything...
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
Until recently, my Chrome browser was loading CSS source map files correctly. Now, it is not.
The setting is on:
And the CSS files have a source mapping tag at the bottom:
/*# sourceMappingURL=Home.cshtml.css.map */
But the Network tab and Fiddler2 show that Chrome is not even trying to load the source map file.
Is there something that I'm missing? Is the sourceMappingURL syntax correct? I've toggled the "Enable CSS source maps" setting on and off.
Chrome version: 44.0.2403.30 beta-m
Sourcemap files generated by Web Essentials in VS 2013.
You can try the following steps:
1- delete the map file and regenerate it again.
2- Using the chrome inspector, go to Settings > General and then click on the button "Restore defaults and reload"
When the CSS file has the sourcemapping embedded as base64, then it seems to work fine.
For example:
/*# sourceMappingURL=data:application/json;base64,eyJ2....5235== */
OMG! The problem made me crazy! I found that the CSS file is not complete.
Here is what I did to solve the problem:
Make sure that CSS maps are enabled in Dev tools settings.
Check the end of CSS file whether it contains a link to the source map.
Press Shift + Click on the refresh button to force resources update.
Your code seems to be okay, the only reason why it is not reflecting the changes because you are loading the cached CSS file. To load the new CSS file, you need to hold shift and press the reload button to ask chrome to reload all the files instead of to loading it from the cash.
Does each scss file need to be accesible from the outside to make this work? I have css maps configured but I have see that each .scss file that is being processed is not accesible from the browser
I'm modifying CSS using Firebug and FireDiff. I've had a couple of 'accidents' where I have 'saved a snapshot' but in fact just saved a diff (one or two changes), uploaded it to my web server and overwrote the full CSS file with a snippet. Fortunately I have been making periodic backups.
Question: how do I ensure that I save the whole file - either using Firebug itself or FireDiff?
Firebug
With Firebug itself you can save the CSS following these steps:
After you've made your changes switch to the CSS panel
Select the modified CSS file from the CSS Location Menu
Press Ctrl+A to select the whole CSS and copy it via Ctrl+C or by right-clicking on the selection and choosing Copy from the context menu
Paste the CSS into the text editor of your choice and save it
FireDiff
With FireDiff the steps are a bit different:
After you've made your changes switch to the Changes panel
Within the change log right-click on the CSS change you've made to the file you want to save and choose Save Snapshot from the context menu
Enter a file name into the save dialog and save the it
Notes:
FireDiff requires another extension called Fireformat to save snapshots.
As the word 'snapshot' indicates FireDiff saves the file including all changes up to the one you've chosen. If you want to save the current state of a file, you need to choose the last change to that file.
For both methods you need to take care in which file the CSS was saved. In case of inline CSS, i.e. CSS included in the HTML output via the <style> tag you need to save the CSS back to the HTML output.
Other extensions
Besides doing this in Firebug or using FireDiff there are Firebug extensions, which claim to allow you to upload your changes directly to your server via FTP. These extensions are cssUpdater and FireFile. Though they seem to not be maintained anymore and may not work with current versions of Firebug.
Using developer tools, I can amend a css file for a site I'm currently viewing in a browser.
I want to, effectively, do the same - but instead of amending the css file, loading a local css file, just for that particular domain.
Another way of phrasing it: "When any page of stackoverflow.com is loaded, load C:\test.css to the browser".
Yes, it's possible. Have a look at http://userstyles.org.
Userstyles.org offers CSS files for usage with the extension "Stylish", and Stylish recently announced that they are becoming evil (https://forum.userstyles.org/discussion/comment/109966/#Comment_109966) and can therefore not be used anymore.
One can use the styles with greasemonkey, but then the activation for various websites doesn't work anymore (the CSS is converted into a JS file and the list of sites where it should be applied onto is hardcoded inside an if-statement in that script). I.e. in order to use e.g. "dokuwiki highlight and full width" on a site using dokuwiki but not being http://dokuwiki.org, you have to edit that if-statement and reload.