webstorm 10 chrome extension debugging - debugging

I installed the extension in chrome and the run and debug icons show up in the Webstorm IDE. I start a debugging session and it opens the page in chrome and live updates occur when I change the HTML. The debug window also opens in the IDE in webstorm and I can see all of the usual elements of a debug session, except: I can only view the HTML page - I can't view other assets like js files that are loaded via script tags - and I can't set breakpoints in the script in the HTML file, let alone in the other assets and I can't set breakpoints in the editor in the IDE.
Is this working or not?

One of the best things about debugging with WebStorm is that you put breakpoints in your original files in the editor. Here's an example: https://youtu.be/JnMvok0Yks8?t=10m22s

Related

how to debug and step through vscode itself?

I am interested in stepping through the markdown preview code in vscode and seeing how it works. As far as I can tell, this is not an extension, it's a core part of vscode. I found some documentation on how to debug an extension, but cannot find how to debug code that is just part of vscode. Presumably it's all javascript or typescript.
Taking for example editing markdown, how can I intercept and see what happens in markdown mode, and how can I set a breakpoint, and step through refresh preview in the preview?

Firebug command line & editor not working

When I type few commands like this:
$("#popup").click();
var x = 1;
x;
the commands are simply copied to the prompt window.
They are not executed !
What is wrong with my Firebug (Firefox) addon, please ?
Firefox v 43, Firebug v2.0.12b1
but with Chrome everything works fine
According to a thread in the Firebug forum, this may be caused by a conflict with other extensions. The extensions named there are:
Wappalyzer
Ghostery 5.2.1
The easiest Xdebug 1.2
Skype Click to Call
A Greasemonkey script
Nimbus Screen Capture
1Password
Coupons at Checkout
So, if you have one of those extensions installed or a Greasemonkey script running, disabling it and try it again.
If that doesn't help, I suggest you follow the steps described in the Firebug first aid page and report that bug. The steps are:
Open the Firefox Error Console (Ctrl/⌘+Shift+J). Any errors related to Firebug? Copy them and remember to include them in your report.
Create a new profile, install Firebug, reproduce the problem. Still a bug? Report the problem, else
Return to your previous profile, open the Add-ons Manager via Ctrl/⌘+Shift+A or Firefox menu button > Add-ons or about:addons to disable all extensions except Firebug. Solved? Enable the other extensions again one by one until you find the buggy one and report it, else
Open the troubleshooting information via Firefox menu button > ? > Troubleshooting Information, click Show Folder, open prefs.js in a text editor, copy all lines containing extensions.firebug into a separate text file, reset all options (via Firebug icon menu (upper left corner) > Options > Reset All Firebug Options), reproduce the problem. Solved? Report the problem attaching the created file, else
In the profile folder go to firebug/, move the file breakpoints.json (if it doesn't exist, go to step 4) out of that folder, reproduce the problem. Solved? Report the problem attaching your breakpoints.json (Attention: breakpoints.json contains the URLs of all breakpoints you set, so make sure there's nothing, that shouldn't be public), else
In the profile folder under firebug/ move the file annotations.json (if it doesn't exist, go to step 5) out of that folder, reproduce the problem. Solved? Report the problem attaching your annotations.json (Attention: annotations.json contains the URLs of all pages you enabled Firebug for, so make sure there's nothing, that shouldn't be public)

Setting breakpoints in a JavaScript file (run in IE) in Visual Studio

I'm working on a web page as part of an ASP .Net application. When I include my JavaScript within a script node in the page I can set breakpoints in the JavaScript in Visual Studio and when I debug the project (which launches the page locally in IE) the breakpoint is successfully caught in Visual Studio and I can use it to inspect variables, step through, and do all the usual Visual Studio debugging stuff. However, when I move my JavaScript to a separate script file breakpoints stop working, and I see the message 'The breakpoint will not currently be hit. No symbols have been loaded for this document.'
I know I could take advantage of the browser's debugging tools but how do I get Visual Studio to hit breakpoints in a JavaScript file in an ASP .Net application?
It would also be good to understand why the breakpoint works when the JavaScript is included in a script node within the HTML page, and fails when it is moved to a separate JavaScript file?
Here are the steps:
1) First open Visual studio -> select your project in solution explorer.-> Right click and choose option "browse with" then set IE as default browser.
2) Now open IE. Go to,
Tools -> Internet option -> Advance -> uncheck the checkbox having "Disable Script Debugging (Internet Explorer) and then click Apply and OK and you are done.
3) Now you can set breakpoints in your JS file and then hit the debug button in VS.
I think the point I made in the question about having the JavaScript in the HTML file versus in a separate script file may have been misleading. It tried copying it back and it still did not work!
I have made two changes and now it is fixed (though I am not sure which one fixed it).
Firstly I checked the closing curly brackets on each function in my JavaScript (after reading robert4's answer to What can be the reasons for JavaScript breakpoint is not hit) and added a missing semi-colon after the function I'd recently added.
Secondly I held down the Ctrl key and clicked refresh in the IE launched by Visual Studio which should force a page reload (instead of loading from IE's cache).
I'm assuming that the second of these changes fixed things but I've included the first to just-in-case it proves useful.

How to set up Dart debugging in WebStorm?

I am using IntelliJ WebStorm to develop an application in Dart and I'd like to use the debugging functionality, namely the capability to use breakpoints and in process evaluation.
How do I set it up in the IDE?
There are couple steps that need to be completed to be able to use debugging features:
Install Dartium on your development machine This is a special browser based on Chromium which has the Dart VirtualMachine built in. If you installed the whole dev-pack from DartLang you probably already have it, otherwise you can find the download link on www.dartlang.com/tools/download.html.
Set up WebStorm to use Dartium Once installed, add Dartium as an browser to WebStorm. In WebStorm click on File > Settings > Browsers then the green plus icon on the right and navigate to the chrome.exe executable in the Dartium folder.
Set up Javascript debugger in WebStorm In File > Settings > Debugger > Javascript set the built in server port to a port above 50000, I use 60666 for example.
Install the JetBrains IDE Support extension in Dartium Download the extension here
Set up the port in the IDE support extension Either right click on the JB extension logo and choose Options, or copy and paste this url
chrome-extension://hmhgeddbohgjknpmjagkdomcpobmllji/options.html
to your address bar and set the port to the one you chose in previous step for example 60666
And there you go, all is well, you are ready to go debugging ;)
Just remember when you create run/debug configuration to choose Dartium as your browser of choice!

Display in Firefox than IE in webapplication

How should I change the settings in VS 2010 so I can display the result (by pressing F5) of my Asp.net MVC application in Firefox instead of IE?
To use Firefox just for one particular project, you can update project properties and set external program to run.
Basically using this technique you can set any browser for any particular project, if you don't want or can't change system default browser.

Resources