I have FF (v.35), Opera (v.12), and IE (v.11) installed on my Win 7 x64 PC and wanted to debug a (locally stored) HTML file that loads a JS script.
After adding the file to a new project, I went to File > Settings > Tools > Web Browsers and unticked the web browsers that I do not have installed.
So those settings now looks like this:
After that I went to "Edit Configurations" and added the HTML file that I wanted to debug, as shown below:
(note that the HTML file is not empty, even though it is named that way)
Now if I click on the 'Debug (default)' button, I get these messages that Windows has a problem finding chrome and WebStorm is waiting for a connection from the Chrome plugin:
On another hand, if I click on the 'Run (default)' button it opens the page in Firefox as expected.
I am either doing something wrong or have something misconfigured.
How can I tell WebStorm not to use Chrome for debugging?
Thanks,
Simply put, JetBrains WebStorm does not support the JavaScript Debug configuration in any browser other than Chrome (or other Chrome-based browser such as Dartium).
To debug in FireFox versions 33-35 (for WebStorm v.10 this does not work in FF v.36), you have to enable Remote debugging in Firefox and then use the Firefox Remote run configuration, as explained here: https://youtrack.jetbrains.com/issue/WEB-13801#comment=27-904044.
ATM run/debug configuration of "JavaScript Debug" type only supports Chrome.
https://youtrack.jetbrains.com/issue/WEB-14987 -- watch this ticket (star/vote/comment) to get notified on progress (currently planned for WebStorm v11).
To debug using Firefox you have to use "Firefox Remote" type of configuration instead (for additional stuff /issues -- see related tickets).
Related
I've created an addon using the addon SDK and installed it in Firefox (version 35.0.1). The addon has the following files -
data/login.js (content script file)
lib/main.js (main addon code)
test/test-main.js (auto-generated)
package.json
In the main addon code I'm creating a panel, and the content script file is loaded using the contentScriptFile property of the panel. However when I launch the addon debugger, I'm able to see only the main.js script and not the content script. I've checked that the xpi file actually contains the content script file. So why isn't the debugger showing it?
I think I found it (using Firefox Developer Edition 42.0a2 though).
Open the Default Web developer Tools (Ctrl+shift+I)
Go to Settings (cog wheel top right)
Enable "Advanced Settings" > "Enable worker debugging (in development)"
Enable "Inspector" > "Show Browser styles" (for seeing your content style (files))
Reload the page
Try using the browser toolbox or the browser content toolbox which is not scoped to a single addon.
Afaik the addon debugger only shows scripts running in the same compartment as the addon main, which may miss scripts running in sandboxes/other compartments.
Its probably an error in your content script code that prevents the file from appearing in the debugger file list. I had this problem and it's difficult to find these errors as the Firefox error log often doesn't refer to the which file is in error or the line number. Check for unpaired braces that kind of thing
I have the Marionette/Require TodoMVC sample imported into Eclipse (Aptana V3) and have breakpoints set, but they never hit.
The non-Marionette/Require version debugs just fine.
I assume this has to do with how things are modularized with Require.js? Anything I can do so I can debug and not have to go back to console.log?
Thanks!
You can also use Backbone Eye (http://dhruvaray.github.io/spa-eye/)!
[Disclaimer : I am the author]
You need to debug the client code from the browser like firebug if running client in Firefox. Or Chrome Dev tool if Chrome is used.
Here are the steps:
From Eclipse, right click the 'index.html' file
Goto Run-As menu --> Select JavaScript Web Application
It will launch Web Browser and load the index.html file and Aptana internal server will be running without you doing anything.
Browser setting is"Preferences/General/Web Browser"
Then you can follow the firebug to debug if using Firefox and to set breakpoints.
I am exploring WebStorm's trial version and would like to use the LiveEdit features.
I am not able to use the LiveEdit features after performing the following actions:
Made sure that LiveEdit is turned on
Installed the Chrome extension
Restarted the browser after installing the extension (I still suspect it is not required)
Run the HTML page in chrome
When I modify the HTML body, I don't see the changes reflected in Chrome.
I read on a forum that netty is not required.
Do we need it?
What else do I need to configure so that I can use the LiveEdit feature?
PS: I am using WebStorm 5.0.
Do you happen to have IntelliJ open by chance?
The point is that the port, 63342, is 'seized' by another app (even if it has nothing to do with HTML debugging).
When the port is busy, LiveEdit tries the next one, 63343. If you right click the JB icon on Chrome, choose Options, increment the port by one, and press Apply, you will magically connect. I wish Jetbrains would have bothered to inform the user what is the port that they are currently attempting to use.
In my PC it happened when I had Mac on. Either one of the following worked:
1. Kill IntelliJ IDEA (that was also open) and try again
2. Increment the port by one as I mentioned above.
I had to go to Run -> Debug (CTRL+F5 on Windows)
What helped in my case was activating "Can accept external connections" under the Settings -> Build, Execute, Deployment -> Debugger
WebStorm Settings
More details as requested:
Installed the JetBrains IDE Extension for Chrome
Make sure the LiveEdit Plugin is installed and activated (Settings -> Plugins)
Make sure "Can accept external connections" is checked (Settings -> Build, Execute, Deployment -> Debugger) AND Port is the same as in the Chrome Extension
Make sure Update ist set to "Auto in (ms)" e.g. 300 (Settings -> Build, Execute, Deployment -> Debugger -> Live Edit)
In my case live edit was just disabled (for some reason)
For anyone googling this thread, LiveEdit is now supported without a plugin. Just go into settings and uncheck "Use JetBrains IDE Support extension for debugging and Live Edit".
Without the extension, the debugging and live edit are more reliable based on my personal experience.
I couldn't make Chrome and Webstorm to link with each other. Chrome plugin was set to 63343 port or something like that.
I am on Windows. I opened command line with administrator privileges and typed:
netstat -a -b
to see all programs and ports they are listening to. I then found first entry regarding WebStorm.exe and saw that it was listening on port 30897. I set that port number in my chrome plugin options, and everything worked.
A quick fix: in the Chrome addon configuration, use the ip 0.0.0.0 for the host.
Turning off the automatic connection configuration from Internet Explorer properties worked for me smoothly. IE is the boss.
I understand that I can log to the console when using a Firefox extension with the cfx run command.
Is there a way to log to a console after the extension has been packaged with cfx xpi? Logging to Firebug is fine if possible.
I have found two blog posts about this (here and here). Both are rather old and don't work any more.
I'm using version 1.10 of the add-on SDK and FF15.
You need to do 2 things:
enable logging for addons
• in about:config, add a new option extensions.sdk.console.logLevel and give it the value "all"
• restart Firefox
in Firefox open the Browser Console:
• Tools -> Web developer -> Browser console
• NOTE: this is different from the usual Web Console used to debug web pages
You should see addons logs there now.
TLDR:
Go to about:config url and create key extensions.sdk.console.logLevel with value all
See log messages either in Browser console (Ctrl+Shift+J) or in terminal you started Firefox from.
cfx or its successor jpm creates this configuration key automatically in development firefox profile.
From logging documentation:
extensions.sdk.console.logLevel: if set, this determines the logging level for all installed SDK-based add-ons.
extensions.extensionID.sdk.console.logLevel, where extensionID is an add-on's Program ID. If set, this determines the logging level for
the specified add-on. This overrides the global preference if both
preferences are set.
I will summarize recent changes that has taken with Firefox since this question got posted -- basically updated #LucaBonavita answer.
In about:config, check if option extensions.sdk.console.logLevel is enabled. If not, toggle to enable. You might need to create it if it does not exist
Open Browser Console
Menu Bar -> Tools -> Browser Tools -> Browser Console
Enable Show Content Messages in browser console.
Now, console.log triggered by Firefox addon/extension should display
Tested on Firefox 94.0.2 (64-bit) and 95.0b12 (64-bit)
Have you tried console.log() with Firebug? (I know you have tried Application.console.log() and Firebug.console.log() already)
I just tried it in the Web Console on FF16 running Firebug 1.10.4 and it seems to work:
Here are some more examples from the Firebug Wiki itself: FirebugWiki Console API
Additionally, you can write messages of different types in the console, such as: console.debug(), console.info(), console.warn(), console.error()
If you run console.log from Add-on code, it send up in the 'Messages' tab of the Error Console window:
I recently installed Webstorm for my html5 / css / javascript project. I have been unable to run or debug sucessfully from inside the IDE. I have a typical web setup with and index.html file and css and js folders. I'm using MAMP for my local web server and it starts and runs my site no problem when run inside my browser. I can't run because the "Run" button is greyed out. When I try to debug (I set a breakppint in a js file that I know should execute up front) Firefox opens but just shows (http://) with no full path to my index.html AND I see a message in the IDE: Remote URL isn't specified for 'kazaam_localDB.js' so breakpoints won't work in it. Set remote URL for 'kazaam_localDB.js
I did configure my local server when I created a "new project from existing files". I did notice the first time I did try to debug a message cam up saying it needed to configure Firefox with an add-on or extension, but I'm not sure that succeeded because I can't debug...
Ok here is what you have to do:
Ok stop and exit Firefox THEN retry debugger from webstorm. You should now see now the extension has been installed in Firefox.
When you set breakpoint in js file in a local file WebStorm it needs to know which URL corresponds to that file on the server. To specify URL mapping for local files you can either click on 'Set remote url' link in the warning popup or open Run | 'Edit Configurations' dialog and select the run configuration under 'JavaScript Debug' node.