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:
Related
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
How do I get Chrome extension code to work with JetBrains Live Edit extension during development?
I'm trying to develop a Chrome extension in PHPStorm 8 and I would like for the code to work with the Live Edit feature the way a normal HTML/JS page would. However, I don't know how to configure it correctly so that I don't have to hit Reload on the Chrome extension page each time I make a change.
Debugging/live editing Chrome extensions is not currently supported. Please vote for WEB-9708
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
I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.
To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.
Ideally, this would be:
in RubyMine itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...
...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
Thanks to #CrazyCoder & #LazyOne for the pointers...
After a bit more research, I've confirmed and gotten more detail:
The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007
Detailed Instructions
Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
Run Rubymine > Settings > Plugins (type "plugins" in the search
box in settings)
Click the Install Plugin from disk button at the bottom of the list
Navigate to where you downloaded the plugin and select/open it
Activate by checking it on the plugin list
(You will likely have to) restart RubyMine
Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
I believe there is also an extension for FireFox, which I believe ALSO DOES support
Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
(Launch) Debug your project
Edit as you normally would
Observations/Opinions
The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.
However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.
I am looking for a way to launch a file located on our local file network for use via our local intranet using Firefox or Chrome.
The link works well in IE:
View Report
but in Firefox it shows:
View Report
is there a way to get the link to render properly?...Just a simple click from a href tag.
For Chrome, a new extension was just posted today! It's called LocalLinks and it replicates the functionality of the locallink add-on for Firefox! You'll find it on the Google Extensions page, or you can get to it directly here:
https://chrome.google.com/extensions/detail/jllpkdkcdjndhggodimiphkghogcpida
Enjoy!
This is not enabled in firefox for security reasons (remember that most computers have files and applications of a sensitive nature located in similar locations, like C:\System\Windows)
you can try adding this to the user.js file for any user that needs to be able to access these links:
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "file:///[[PUT SERVER NAME HERE]]";);
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
Just remember that this is a security risk.
Firefox seems to want file://///Start/Of/My/Network/file.xlsx
Chrome and IE handles that too.
file://Start/Of/My/Network/file.xlsx appears to work in Chrome as well, sometimes firefox hics up on it..
There is the LocalLink add-on for firefox. It uses a context menu though...
Use IE tab (available for Chrome and Firefox) and set that to handle all links of the form file:/// by adding an autourls entry like this:
r/file:///.*
Technically this isn't opening the file in the original browser, but it gives you all the windows explorer integration you'd expect from whatever IE version you've got installed when dealing with local file links. I would advise against doing this except in cases when the browser isn't being used to access the web - e.g. for viewing internal wiki or intranet pages, due to the obvious security risk.