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
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:
How we can enable live sass in devtools?
Base on Umaar post in own blog
https://umaar.com/dev-tips/103-live-sass/
To clarify "Enable CSS Source Maps" only allow your browser to show mappings between scss and css. Live SASS is is still experimental feauture. You'll be able to enable it by pressing SHIFT button six times on the experimental tab in the dev tools settings.
I tried it in latest unstable chrome build on Linux and it doesn't seem to work, so you'll need latest Canary build.
UPDATE:
It works in 53.0.2763.0 dev build on Linux.
Update:
Looking at this again, there appears to be a new experimental feature that is apparently in Chrome Canary, which takes out the need to run sass watch I think. However, I am unable to actually find where this gets enabled. I left my original answer as it may be of use still.
This is no longer an experimental feature. In Settings, make sure 'Enable CSS source maps' is enabled and (optionally) 'Auto-reload generated CSS'.
You can add your source files as a Workspace and live edit:
On a side note, to enable experimental features in Chrome, navigate to chrome://flags/, enable Developer Tools experiments and restart Chrome.
In Settings, you will see a new Experiments section:
i wanted to build a custom browser install that would fit the following specs, i found ways to do it using enterprise deployement, but my intent is to distribute it to friends and family without having to go through the enterprise distribution.
Can be sourced from Firefox or Chromium (or even other as webkit)
Should be easy to customize (ideally no C++ coding)
Should be able to embed extension or hard code the extension within the browser. (i've coded a custom adblock that is lighter and faster than the ones on FF or Chrome store and would also like to embed TOR connection extension)
Remove the ability to install other extensions (i want to ensure this browser cannot be victim of bloatware extensions installs)
Customize UI
Protect the browser against Search engine / HP / New tab settings change.
If you could point me to the right direction it would be awesome and i'll make sure to share this browser's link here once done.
I just saw this in the corner of my eye and figured I'd share this question/answer to possibly help you:
Standard way to build a Chrome extension into Chromium
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've tried everything. I've tried ctrl-shift-R. I've tried ctrl-F5. I've checked the Disable Cache box in the developer tools. I've completely cleared my browser cache. But I cannot for the life of me get Chrome (Version 24.0.1312.57 m for Windows 7 - the most up-to-date version) to reload a specific piece of inline javascript (meaning it's in my html page, not in a separate js file.)
Is there any other way I'm missing to get this done, or do I need to completely uninstall Chrome and reload? Please don't tell me to use Firefox instead; the code works in javascript but doesn't in Chrome, and I need to be able to test it there.