How can I get chrome to auto-reload generated css?
I've seen lots of sites advising me to check the "Auto-reload generated CSS" checkbox in dev tools settings, eg Chrome's "Auto-Reload Generated CSS" not reloading page when SASS recompiles CSS.
But I do not see that option there, my options page has the option to enable CSS source maps, but there is no option for "Auto-reload generated CSS"
(Unfortunately, my work internet proxy prevents upload of images, so i can't upload an image)
Has this option been removed from chrome dev tools? Or is there some hidden config setting I need to change?
I'm using chrome version 53.0.2785.116 m (64-bit) on Windows 7 SP1.
Thanks in advance for any help.
See https://crbug.com/642802:
When you add a folder to the workspace and establish mapping, this happens automatically now.
See Set Up Persistence with DevTools Workspaces:
In case you've already mapped your local folder to your workspace, but the browser is still serving the network folder contents to automatically stage persistent changes in the browser, map local files in the folder to a URL:
Related
There's a plugin in Visual Studio called Live Server. When you edit and save changes to an html/css file, you don't have to refresh the page if it's open in your browser, it refreshes automatically. Webstorm has similar functionality called Live Edit, but it works in debug mode only.
Also is it possible to make it work with Safari or at least another Chromium browser like Vivaldi, or corresponding extension works in Google Chrome only? Because Live Edit doesn't work without Google Chrome. Thank you.
Live Edit didn't require debugging initially, but we had to re-consider this approach due to multiple bugs/limitations, see WEB-8255 and linked tickets. We are currently investigating a possibility to add "live reload" capability to the built-in web server to make it behave like VSCode Live Server.
We don't have plans to support Live Edit in Safari; to make it work with Vivaldi (or other Chrome-based browsers), you have to configure it in Settings | Tools | Web Browsers:
In Settings | Tools | Web Browsers, press +
Use Chrome as a Family, specify a full path to Vivaldi executable as Path, enter a name:
I want to use the LiveEdit plugin for debugging my website on PhpStorm. I have configured the plugin in the settings and even downloaded the JetBrains Chrome Extension and applied to Microsoft edge. I have also allowed the extension to read and write and make changes to all and every website. Yet, I don't see LiveEdit working.
I also have applied <all_urls> in extension settings - no progress. What should I do?
This should work for Edge in principle (as new Edge is Chromium-based), fixing WEB-45326 should take care of this.
For now, I'd suggest setting up Edge as a new custom browser in Settings | Tools | Web Browsers:
press + to add a new browser
use Chrome as a Family, specify a full path to browser executable as Path, enter a name
Browser will be available with Chrome icon in run configuration dropdown
even downloaded the JetBrains Chrome Extension and applied to Microsoft edge
Please remove it; Chrome extension doesn't work reliably in new Chrome versions (WEB-37230), and it seems that the most recent Chrome update has introduced breaking changes that made it non-functional. Since PhpStorm 2018.3 this extension is not required for debugging/Live Edit, it's not actively maintained, we plan to sunset it completely in the upcoming release
While developing an Angular 2 application, I use Google Chrome for debugging etc..
Problem is - any change I make, both in the .js files (.ts file) and in the HTML template files I use - is not visible, until I clear the browser's cache manually.
I've tried loading without cache (CTRL + F5), and changing the browser's setting to load new resources on every visit of my site, but this does not help.
When changing my index.html file, for instance, the problem doesn't occur.
Any suggestions ?
In the developer tools > settings > network, there is an option "Disable cache (while DevTools is open)".
Enable that setting and leave the developer tools open while debugging.
Visual Studio 2013 have feature called browser link but i can't make it automatically refresh browser when i save html file. And if i need to use hotkey of browser link then what is benefit of it? Because i can press F5 in browser instead press hotkey of browser link. But if it refresh automatically when html file is modified then it will be very handy.
So my question is, is it possible to automate browser link when html file is modified?
I don't think it is possible by default.
And if i need to use hotkey of browser link then what is benefit of it?
Browser Link is a new feature that creates a communication channel between the development environment and one or more web browsers. You can use Browser Link to refresh your web application in several browsers at once, which is useful for cross-browser testing.
That is refreshing several browsers at once seems to be the main functionality of this feature.
To reload a page every time you make a change to it try one of these:
Tincr - For Chrome.
Auto Reload - For firefox
I have tried many ways to get browser refresh to work with VS 2013, other IDEs and text editors. In my search I have found the one (in my option) that works best is live-server.
Very easy to install with node nmp
https://www.npmjs.com/package/live-server
npm install -g live-server
Here it is on GitHub https://github.com/tapio/live-server
In Chrome, I have the WebGL Inspector extension installed. The debug option does not show up in the address bar for the page I'm working on (that I'm using WebGL in). It shows up for other pages on the web. What are the requirements for getting it to give me the debug option?
I guess that you are trying to debug a local file (file://). If so, navigate to chrome://settings/extensions, expand the WebGL Inspector item and check "Allow access to file URLs".
Note: (outdated?) "readme.md" says:
You cannot inspect pages on file:// in WebKit (possible with security settings?)
You can also install a web server on your local PC to dispatch your page from a http:// url.