I want to remote debug a remote webpage and inject my own stylesheet into it locally using WebStorm, so that any changes I make to the CSS are immediately reflected on the page. Is there any way of achieving this?
You can achieve this with Chrome's Developers Tools. Using Ctrl + Shift + I.
There you can edit css-rules and any changes will be reflected on the page immediately.
Related
I am using React and when I update my live application there is usually problems with the new CSS not being loaded.
Right now it just say:
import './app.css'
For a html website I would just add a parameter. Can I add this in a React application as well? Something like:
import './app.css?v=1.2'
Or is this not recommended for a React application?
I think this is not the problem with the way your application is compiled I think this has to do with how your browser caches CSS. When you load a website your browser caches files and if it reloads and sees the same name as in the cache it will not download a new version but use the old one. I do not know why this is showing up because hot reloading should refresh this but if you reload using CTRL + Shift + R (or CMD + Shift + R) it should not happen. For the specifics search on why cache is not getting cleared.
What tool/editor do you recommend to (live) test your local CSS changes against an externally hosted site?
A site lives on a domain.test (no server access), and I need to write extensive CSS overrides to reskin the entire site. All changes will be in a single CSS file with no preprocessor.
The ideal setup is using the comfort of my regular code editor (Visual Studio Code) and having the site open in a browser and have the CSS auto-refresh as I save my CSS changes in a local directory.
It's a big site, so I'm open to setting up a complex setup rather than relying on testing edits using browser inspect mode or mounting CSS files using Firefox.
:: I can inject JS script/library to the site if it helps with my setup.
Bonus: If I can do that for Vanilla JS too.
I would do it as follows with ModHeader and ScriptAutoRunner (chrome extensions).
With ModHeader replace the site's CSS and JS to local files using the "Redirect URL" function. (If necessary use ScriptAutoRunner to inject JS).
In one of these JS files create a rule to download every 2 seconds via ajax (any other way) your local files and check if there is equality with the last request or not. If the file has changed then reload the page (to update).
I know there are some tools that show CSS changes in real time without you having to reload, but I don't use them and the way I mentioned you can also make them run when the JS is updated.
I want to raise this question again.
What was suggested in the answer to this question is to use old fashioned approach:
Store css in public folder, and incude it via <link href=
Add public folder to google chrome devtools workspace
Not a rocket science at all. Works, but two things I don't like with this approach:
It's still not native and for production I will have to move files from public folder
Each time you edit css, meteor notices changes and reloads application. Author of that answer ignored it.
Basically this result I want:
I start meteor project, open chrome developer tools
Each time I edit css in chrome developer tools it automatically changes in project.
Problems:
Meteor performs concatenation of all css files even with --debug flag on. But provides source maps.
Meteor will still reload after file changes, but fortunately for styles meteor performs soft injection, I would call it, so page will not really be reloaded. It's okay and not really a problem.
Because of 1st problem and this bug I can not get it work.
This feature is very important for me in terms of productivity.
I would offer a good bounty for some guru, who could give me a direction to solve this. Maybe you point me to some starting points to make a plugin for chrome, this also would be acceptable
The way I do it is pretty simple.
Open your website
Right click -> inspect element
Click on Settings - (the wheel in the top right corner).
3.1. Select General tab and look for Sources label (around the bottom). There search for Enable CSS source maps and Auto-reload generated CSS. Check both. You can check all the features if you want.
Select Workspace tab and add the project folder.
Refresh devtools/browser and repeat everything to step 2.
Now, open the Source panel (Elements - Network - Source). Navigate through your folder and find the css file.
Right click on it and select Map to file system resouce. A window with few css files should appear (depends on your projects config).
7.1 Select the css file for your project. A popup asking you to restart devtools will appear. Click ok. Enjoy.
I haven't tested this with Meteor, but for Harpjs & static HTML files the Chrome LiveReload extension will inject changes in Chrome Dev to the actual file.
I develop on a remotely hosted site that I push files to via SFTP. I would like to set up my site so that I can see any CSS and HTML changes reflected immediately without the need to manually refresh my browser. I've looked at using mixture and browser sync for this but they appear to only work on locally hosted sites. Any suggestions on how to go about setting this up on remotely hosted project?
You might want to try "Emmet LiveStyle", this is a plugin for Chrome and for Sublime Text editor that lets you live code CSS (not HTML) and changes are reflected immediately without the need to refresh the browser.
Then you can use "Sublime SFTP" package for Sublime Text to automatically upload CSS files on save.
I use this setup and it works perfectly.
I started out with a basic site.master. After I laid out several pages, I have found that I need to make changes to the site.master. The changes show up while I am working in Visual Studio, but when I run the application, they don't take effect. What do I need to do to have them show up?
When you make changes to CSS or javascript (or any other static content, for that matter), you need to clear out the browser cache to ensure the latest version is loaded from your server.
You can force a reload from the server by using Ctrl + F5 on most browsers.