PhpStorm Live Edit feature not working? [PhpStorm 2020.2] - javascript

I use VS Code + 'Live Server' plug-in very often so everytime I save, the project will be refreshed automatically.
Today I was playing around with PhpStorm, newest version with legit subscription license (I've been using phpstorm for couple years) but it seemed that 'Live Edit' plug-in not working even I tried to look it up on internet. However, none of them helped!
I appreciate any help! Thanks
What I did:
Installed Jetbrains IDE extension on Chrome
Installed 'Live Edit' plug in on PhpStorm
Settings as below:

To Live Edit feature works only when the JavaScript debug session is started for the URL your app is running on.
To start one, in the menu Run - Edit Configurations, create a new config of the type JavaScript Debug and specify the URL of your app (e.g. localhost:3000). Save the config and start the debugger.
To use Live Edit for an .html file, you can also use the IDE built-in server and start debugger – right-click on the file in project view or editor and select Debug filename.html.

Related

When I hit a breakpoint WebStorm opens a new read-only version of the file in Vagrant

I have recently setup Vagrant with WebStorm IDE and the app is running well but when debugging or putting a breakpoint on a code line, a new read-only version of the same file opens instead of hitting where breakpoint is put.
Any help, dear members ?
Looks similar to WEB-34370, please follow this ticket for updates

Server-side debugging not working [Meteor 1.2]

Before I get into the details, please note:
I'm using Meteor 1.2 and the latest version of WebStorm 11.
Client-side debugging works fine, at least using the Chrome Web Inspector, client-side logging is shown in the console.
My issue is I can’t get server-side debugging to work. I’ve now tried all of the following to no avail:
Running meteor debug and launching Node Inspector (it hooks into my Meteor instance but doesn’t log anything server side or hit any breakpoints I've set using debugging; statements in the code, code execution was not suspended)
Launching Meteor from WebStorm, putting console.log() statements all over the place. Nothing would get printed, breakpoints wouldn’t be hit
Running meteor shell and trying to see logging there
Using Atom IDE instead, however this is not suitable for me because of a company proxy which the Atom plugin manager isn't able to circumvent (doesn't route proxy info).
WS 11.0.2 definitely broke this. Although not listed on JetBrains' website, typing in the download executable URL for WS 11.0.1 by hand (http://download.jetbrains.com/webstorm/WebStorm-11.0.1.exe) allowed me to get back to the previous minor version. After installing 11.0.1, I am able to debug my code in the WebStorm IDE, set and hit breakpoints and see server-side logging.

Debugging JavaScript Angular application in WebStorm using Google Chrome

I'm trying to debug some controller code in an Angular application in WebStorm using Google Chrome.
My Debug Settings :
When running theses Debug settings :
1) Chorme flickers in the Taskbar as if it is trying to connect.
2) I don't see the Debugging Tab (Indication) usually shown at the top of the page (like a brownish header)
3) In WebStorm's Debugger window i get the following message
"cannot connect , ensure that Web Inspector is closed "
Additionally I was able to debug my code using Chrome development tools.
Any idea what is interfering the Webstorm's Debugger from connecting to Chrome ?
Have you installed "JetBrains IDE Support" extension for chrome?
if your web server is running in localhost:63342, try:
Setting the URL parameter to http:// localhost:63342
Bind your index.html file to http:// localhost:63342/index.html
If you have any question, please have a look to this post which describes how to debug Angular with Intellij, step by step:
http://ignaciosuay.com/how-to-debug-angularjs-with-intellij/
I encounter the same problem as you,but I have find the solution.You just lack a simple but important step,which is Overriding the default CORS settings.You can follow:
Right-click the JetBrains Chrome extension icon and choose Options
on the context menu. A web page with Chrome extension options opens
showing the parameters to connect to WebStorm.
Change the port which you can find in your WebStorm.Then,you can
debug your AngularJS app in the Chrome.
You also can see https://www.jetbrains.com/webstorm/help/using-jetbrains-chrome-extension.html
first check Jetbrains IDE Support install on your chrome then right click on icon go to option check port, I use routing in my angular application for this reason in URL of webstorm javascript debug not selected the specific html file just for example (http://localhost:63342/sampleproject/) write on urlbox then breakpoint in controllers worked . this solution worked for me

How to debug an AngularJS app using sublime text and Live Reload

I'm developing an AngularJS app, and would like to use Sublime Text in combination with Live Reload to do my debugging. I was using WebStorm before, where I could just select my index.html, and right-click -> debug.
How do I achieve the same functionality using ST with Live Reload?
First - what tool or process do I use on my Mac, to serve my index.html to my Chrome browser?
The goal is to be able to edit a given html or JS file in ST, and have Chrom auto reload when the edited file is saved.
WebStorm debugs both PHP and JS at the same time, if i'm not mistaken.
But since AngularJS is javascript, you could just use the google chrome developer tools or Firefox's firebug.

How to build & deploy a Samsung SmartTV app without the IDE (e.g: on Linux)

Problem:
I'd like to try building a proof-of-concept app using the Samsung SmartTV SDK 2.5 (I have a 2011 model TV - UA55D8000).
Unfortunaltely, the SDK comes in two varieties that only seem to work on Microsoft Windows. It's weird because there's no reason it should be the case: the televisions themselves run Linux and applications are written in JavaScript.
This presents two problems:
As I don't have Microsoft Windows at home, I can't use the build environment (nor the TV emulator) that come with the SDK. (The SDK files themselves are just JavaScript)
Even if I had access to Windows, it's very hard to automate building & testing of the Apps without access to traditional build tools (e.g: Make, Ant, Autotools, etc)
How can I build Samsung Smart TV Applications on Linux? (i.e: without using the Windows-based build tools that come with the SDK)
What I've figured out so far:
From what I can gather, a JavaScript-mode application is simply zip file containing an XML config file, one or more JavaScript files (including supplied JavaScript interface libraries for platform SDK functions), and any required assets (HTML, images, etc).
Also, from what I gather, deployment involves placing the zip file and an XML manifest file on a web-server network accessible to the TV, logging in as 'develop' on the TV and 'syncing' the application to the installed applications on the TV.
Could someone point me to a source for the full deployment requirements & app bundle requirements? Or even just a working sample?
I've had a reasonable amount of success setting up a development environment on my Ubuntu machine and I'd like to share my methods here for anyone looking to do the same. This answer is intended to be platform independent, so the same advice should work on any fully fledged operating system.
Introduction
First off, the question's assumptions regarding app structure are correct. A JavaScript application consists of the following items:
config.xml, a simple configuration file defining various settings and deployment information. See Writing the config.xml File on the official developer site.
widget.info, a very small file with a few lines used to define the opacity of the application's body. This may not be required for full-screen applications.
index.html, the main HTML file for your application.
Images, sounds and other resources.
You can write these files using your favourite editor. I'm happily using vim with linting plugins for my JS and CSS.
Testing
As of version 4.0 of the SDK, a Linux version of the emulator is now available. This allows you to test your apps as they would appear on 2011-2013 TVs. For older TVs, you can run SDK 1.5's emulator in Wine, but emulators belonging to SDK 2.0 and newer will not run.
It is possible to run the emulators in a Windows virtual machine, and, with a little bit of trickery, you can make the emulators use your own application folder to look for apps. This involves sharing your development folders with your virtual machine, then creating a symbolic link to those folders, replacing the "apps" folder inside the SDK's installation directory. A quick overview of this process is available in an article titled, Your Windows IDE sucks? Replace it with Your Favorite Editor on the Mac!
Deployment
Samsung Smart TVs have a built-in developer account that allows you to send an application over from your computer for live testing on the television itself. You enter the IP address of your deployment server and the TV will look for a file called widgetlist.xml on that server. An example of the format is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
<list>
<widget id="MyTVApp">
<title>MyTVApp</title>
<compression size="3383543" type="zip"/>
<description>A basic application for Samsung TVs</description>
<download>http://192.168.1.83/Widget/MyTVApp_0.1_America_20120709.zip</download>
</widget>
</list>
</rsp>
After that, it will download each app listed using the URL in the <download> tag. All you have to do is zip up the files, modify the widgetlist.xml accordingly and make sure both files are hosted in a web server running on your machine. You can use Apache, lighttpd or anything. I have a small node.js/connect app that will build the widgetlist.xml dynamically based on the zip files I have in a directory labelled deploy.
So there you have it. Development of Samsung Smart TV apps is not impossible without Windows. In fact, there's quite a few options available. Hooray!
They have now released Smart TV SDK 4.0 which includes support for Linux & Mac OS X: http://www.samsungdforum.com/SamsungDForum/NewsView?newsID=27
"In addition to the Eclipse-based App Editor, a new Linux-based Emulator has been released.
This Emulator executes in an Ubuntu virtual machine that is run in the Virtual Box virtualization tool."
■ Features for 2013 Platform on Linux (First Release)
Apps Framework
App Engine / WebKit
UniPlayer
SEF (Service Extension Framework)
You need to register to Samsung D forum and then you can download the SDK from https://www.samsungdforum.com/Devtools/SdkDownload
One tip that I have not seen mentioned in any of the answers, is that the TV will attempt to open a socket connection on port 45634 of the machine where the app was downloaded from (the one with the widgetlist.xml).
All debugging (alerts() calls), will be sent over this port, allowing for remote debugging.
I use NetCat to open a port and dump all logs, like so:
nc -l 45634
I've created this Answer for a topic that I know nothing about, but nevertheless I did spot something that threw a red flag in my direction... bounty or not.
First, I looked at your WineHQ Bug Report to see if this issue was resolved, but it's still pending as of this writing. I noticed that bug report had a reference link to the discussion which I clicked and followed.
Looking at the machine-code generated dump-error in that discussion proved informative.
Reference:
Z:\home\andy.wine\drive_c\Program Files (x86)\Samsung\Samsung TV
SDK(3.5.2)\Emulator\Emulator2012_v3.5\bin\Emulator2.exe
The above Path is the location of the file that caused the dump. That path is the red flag I mentioned.
Let me back up a tiny bit and explain about what I learned about Windows XP SP3 and IE8 which very well may apply here, or you can skip down to the line with the bold text.
I worked on a webpage project that used a lightbox plugin called Shadowbox. That project wasn't on a local server, just in a subfolder of a subfolder. It works fine in Firefox and Chrome but IE choked and didn't render any CSS from the plugins style sheet. Because I was very familiar with Shadowbox, I was 100% convinced it was not the plugin. So I started to think outside the box, and through trials and tribulations I discovered the culprit was just the actual path!
I had created a subfolder for the project that used /test(v1)/ in the Path and that's what broke IE8. Once I removed the parentheses, the CSS was loaded correctly. This same solution was also the cause of a CSS issue for a forum member who used Vista and IE9, so then it's conceivable these issues lie with Wine as well.
What issue is that? It's using illegal characters, the parentheses, in the path name. I will stop short and say the URL name only because it's the file path leading to the index.html file (and only relative paths were used in coding - parentheses could not be escaped - and base tag failed).
Firefox and Chrome were forgiving, but not IE. Even though you may not be using IE, it's possible that this issue extends outside of that.
My solution is not to use parentheses or whitespaces in any portion of your file path. While this may not solve this particular bug, at the very least you will not have sandbox Wine issues for when that file path becomes a URL path for whatever requirement (e.g., accessing a SWF object to be used as a video player). If IE browsers are unforgiving, so too can other embedded browsers or programing modules.
Recommended:
Z:\home\andy.wine\drive_c\Samsung\Samsung_TV
SDK_3.5.2\Emulator\Emulator2012_v3.5\bin\Emulator2.exe
Notice the above does not use the Program Files (x86) folder since that can't be changed per OS requirements. Having such a path will surely reduce, if not eliminate, any unforeseen errors. Cheers!
I know it's an old question, but since I'm delving into the process, I figured I'd share some links. Enjoy!
Decent quick start guide on developing for the Smart TV platform: http://www.samsungdforum.com/Guide/c02/index.html.
These are the minimum project requirements and some example files: http://www.samsungdforum.com/Guide/art00011/index.html.
For people who like doing everything with command line, smarttvjs (http://smarttvjs.org) has made it very easy:
$smarttvjs init #create sample project
... do some development (IDE
is nor required)
$smarttvjs build samsung (create a package for
samsung)
$smarttvjs run samsung #launch simulator

Categories

Resources