Eclipse is a you-love-it or you-hate-it tool for editing Javascript files. For me, it's both.
Anyway, I often prefer the SPKET JS editor plugin for Eclipse over the default one because of small details like object knowledge and included file code completion.
However, when using the V8 debugger from Chrome Dev Tools for server-side JavaScript like Node.JS, it opens a third editor Chromium (from the browser) for code stepping.
I would like everything in one tab, so I tried opening my files with the JS editor from the V8 tools, but the name in the tab is now hidden (try editing multiple files this way) and a new one opens up on debugging anyway*.
(* Note that PHP debugging has a similar problem, but it opens a new instance from the same PHP editor)
Chromium JS editor | SPKET JS Editor | Eclipse JS Editor
Also, I don't know if this is node-specific or Eclipse-specific, but node --debug doesn't seam to do anything, no variable outlining, no breakpoints. Whereas node --debug-brk does as expected. So either Node.js is weird, Eclipse is, I've missed the point or I've set up debugging wrong.
Could anyone elaborate on debugging server-side JS in Eclipse and using the most complete JS editor, so that:
JS editor is aware of functions inside objects and separate files like SPKET (Often the case in modern implementations like Node.js) but preferably free for any use (like Chromium Dev Tools)
Eclipse keeps code and debugging in the same tab (if at all possible)
Tabs keep the name of the files (bug or wrong setting?)
I am running Eclipse Indigo 3.7.2 with Google Chrome Developer Tools SDK WIP + remote debugging + JSDT bridge and - if relevant - optionally SPKET 1.6.20 IDE, on Ubuntu 12.04 x64.
--edit--
At least I figured out where to put the breakpoints. Not in the editor, but in the debugger. Open the Project Explorer:
Window -> Show View -> Other... -> General -> Project Explorer
In Project Explorer -> Select your debug item -> Open proper JS file ->
THIS is where you want to add breakpoints.
ChromeDevTools by default has its own separate .js files for debugging. If you want to have debugger stepping in your files, you would need to set this up:
http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles
Related
So. Dumb question.
I am using developer tools on chrome as essentially my IDE in the source tab. I have a JS file writing a program with no associated html/css files. Is there anyway for me to utilize the debugger for my JS file? Specifically I want to step into a function
In developer mode, select Sources tab, then navigate to your JS files in the left side. In the right panel, you can add a breakpoint to any line by pressing the line number which has a real js statement. Then you can run your application again to debug your js scripts.
The picture below is an example(Line 33 of assert.js is selected).
There are a number of different ways to debug/test your JS code, Chrome is only one of them.
QUOKKA
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
Runkit notebook
RunKit notebooks completely remove the friction of trying new ideas. With one click you’ll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding.
Hopa
Hopa is a zero config JavaScript/TypeScript runner right in your terminal.
JSComplete playground
This is a playground for JavaScript and React. You can use it to test simple code or prototype ideas. It requires a modern browser that understands ES2015 (ES6).
VSCode extensions Javascript REPL
Javascript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc.
I'm writing a visual studio project template using the .vsz method(Custom Wizard) on Visual Studio 2010.
I got an auto-generated Java Script file named default.js, which some base code, and I expanded the code according to my own needs.
Now I'ld like to debug the Java Script code, and I didn't find any way to so so.
so I have the VS 2010 IDE opened on my desktop, with the default.js file opened on it. Till now I just saved the code changes I made, with ctrl+s, closed the VS, opened a new instance of VS, and saw the changes actually.
But now I got into troubles which I must debug the JS code in order to solve them..
I tried going to Internet Explorer->Tools->Internet Options->Advanced->and cleared the *Disable script debugging (Internet Explorer) and the
*Disable script debugging (Other) checkboxes, then I tried to put a breakpoint in the .js code in VS, but nothing happened...
Do you know what I have to do else in order to debug this script?
You have several ways:
Write debugger in your .js code wherever you want to start debugging. Upon reaching that code you'll be transferred to the VS and you'll be able to debug.
You can use your browser's developer tools. For instance, in Chrome you can press F12 to bring up the developer tools, and find your code under the Sources tab. From there, you can click on your line of code and it will bring up debugging when you reach that code.
Same goes for other browsers.
I am struggling with breakPoint issue in VS 2012 for more than hours. I am from eclipse background, there I never heard about such issues.
Problem :
The breakpoint will not currently be hit. No symbols have been loaded
for this document.
I have placed the break point in click action of Jquery.
I found the issue using the IE script debugging., The file loaded was old file., i.e I have modified a lot, but I can see no changes in the one which is loaded in IE. How to fix the bug
What I have Tried :
I know this question is duplicate, but being a newbie to VS and C#., I could not understand the older answers. For example, in this answer, he told to choose Debug -> Windows -> Modules. But I doesn't have Modules under windows in VS 2012. Also even though I read, I could not understand the explanation.
Also I am quite new to term Assemblies and PDB. Though, I located PDB files as he said. But how to open the .pdb file?
Need :
Could anyone explain me the same answer in easier term (with more explanation).
I found this out by accident with my VS2012 and ASP.NET MVC, maybe it can help somebody. I noticed that breakpoints in javascript that's inline in the *.cshtml file like this won't get hit (note that this file is a cshtml file):
But breakpoints in external *.js files will get hit:
Try to add debugger; key word before $.getJSON
Also make sure if you use IE to un-check the disable script debugging
Internet Options> Advanced tab> Under Browsing.
As I think this issue is related to Javascript debugging not C#
This results for me:
In your web application make sure Silverlight and ASP.NET debugger are enabled.
How to get there?
=> Right click on the Web Application => Properties => Web tab. Under Debuggers section make sure Silverlight and ASP.NET are enabled.
Running Visual Studio 2013 or Visual Studio 2015 RC, I've found that to get a breakpoint to work in a .js file I need two things to be true:
I need to start Visual Studio by right-clicking the VS shortcut and select "Run as administrator". (If right-clicking on the Taskbar icon, select the application shortcut icon from the pop-up menu and right-click on that to get a context menu that includes "Run as administrator".)
I need to set Internet Explorer as the default browser that will be opened for the web debugging session. If I choose Chrome or Firefox, the breakpoint doesn't work for me.
After opening and closing VS, rebooting the PC with all with no chance, this workaround worked for me in VS 2012 ( Ver 11.0.50727.1 RTMREL ):
In Project Property Pages, under Start Options, in Debugger section, only ASP.NET was enabled. As soon as I enabled Native Code and SQL Server, that red circle with plus sign inside, enabled again.
No idea why this worked! No active connection in Server Explorer nor using any native code in the project!
I had the same problem. You can use VS2017 to debug JS code this way.
When you set VS to launch the browser (Chrome in my case), it opens a new Chrome window. I was trying to debug the specific code (different URL from the window that opened) in a new tab. So I had the 'The breakpoint will not currently be hit. Breakpoint set but not yet bound' in VS.
I found out that if I opened the new URL in the original tab it suddenly worked. Seems that VS is tied to that particular tab.
Hope this helps.
These are the particulars of my situation: VS 2017 - Mainly C# code with some embedded HTML/JS which I needed to debug, Chrome (Version 68.0.3440), Windows 10
As this is Javascript code, so you need to use a javascript debugger. Generally internet browsers come with a debugger/inspector menu, which allows you to inspect/debug your javascript easily. Such debuggers come with a lot of useful features such as HTTP request/response inspection, browser session/local storage, etc.
Actually there is "Modules" option, but it's enabled only when you are in debug mode.
You can just press Ctrl+D,M combination when you're in debug.
In few words, PDB is a file that contains all debug information about your assebmly, you can not debug an assembly without this file. Assembly is a file that contains precompiled code for exetuion via CLR.
Could you provide a bit more information about your problem. What kind of application you are trying to debug for example?
Also, if you have located you pdb files made EXACTLY for your assembly, you can load it by right-clicking your assembly in modules window and selecting Load Symbols From > Symbol Path
Try deleting all breakpoints and restarting debugging in Visual Studio.
How can I debug JavaScript in Eclipse. I am using Eclipse 3.2.1. Everytime I click on the side it gives the option for adding bookmark but no break point.
Could anyone assist me on this?
In 2015, there are at least six choices for JavaScript debugging in Eclipse:
New since Eclipse 3.7: JavaScript Development Tools debugging support. The incubation part lists CrossFire support. That means, one can use Firefox + Firebug as page viewer without any Java code changes.
New since October 2012: VJET JavaScript IDE
Ajax Tools Framework
Aptana provides JavaScript debugging capabilities.
The commercial MyEclipse IDE also has JavaScript debugging support
From the same stable as MyEclipse, the Webclipse plug-in has the same JavaScript debugging technology.
Adding to the above, here are a couple of videos which focus on "debugging JavaScript using eclipse"
Debugging JavaScript using Eclipse and Chrome Tools
Debugging JavaScript using Eclipse and CrossFire (with FB)
Outdated
The Google Chrome Developer Tools for Java allow debugging using Chrome.
I don't believe Eclipse has a JavaScript debugger - those breakpoints are for Java code (I'm guessing you are editing a JSP file?)
Use Firebug to debug Javascript code, it's an excellent add-on that all web developers should have in their toolbox.
I'm not a 100% sure but I think Aptana let's you do that.
I tried to get aptana running on my ubuntu 10.4. Unfortunately I didn't succeed. Chrome on the other hand, has an eclipse plugin that lets you debug javascript that's running in a chrome instance. Works very well.
YOu'll have to install the eclipse plugin you'll find here:
http://code.google.com/p/chromedevtools/
Set Breakpoints in the javascript sources you edit in eclipse and browser your page in chrome. As soon as a javascript breakpoint is hit, the eclipse debugger halts and lets you step into, step over, browse the variables etc. Very nice!
JavaScript is executed in the browser, which is pretty far removed from Eclipse. Eclipse would have to somehow hook into the browser's JavaScript engine to debug it. Therefore there's no built-in debugging of JavaScript via Eclipse, since JS isn't really its main focus anyways.
However, there are plug-ins which you can install to do JavaScript debugging. I believe the main one is the AJAX Toolkit Framework (ATF). It embeds a Mozilla browser in Eclipse in order to do its debugging, so it won't be able to handle cross-browser complications that typically arise when writing JavaScript, but it will certainly help.
Use the debugging tools supported by the browser. As mentioned above
Firebug for Firefox
Chrome Developer Tools from Chrome
IE Developer for IE.
That way you can detect cross-browser issues. To help reduce the cross-browser issues, use a javascript framework ie jQuery, YUI, moo tools, etc.
Below is a screenshot (javascript-debug.png) of what it looks lime in Firebug.
1) hit 'F12'
2) click the 'Script' tab and 'enable it' (if you are already on your page - hit 'F5' to re-load)
3) next to the 'All' drop down, there will be another dropdown to the right. Select your javascript file from that dropdown.
In the screenshot, I've set a break-point at line 42 by 'left-mouse-click'. This will enable you to break, inspect, watch, etc.
It's possible to debug JavaScript by setting breakpoints in Eclipse using the AJAX Tools Framework.
MyEclipse (eclipse based, subscription required) and Webclipse (an eclipse plug-in, currently free), from my company, Genuitec, have newly engineered (as of 2015) JavaScript debugging built in:
You can debug both generic web applications and Node.js files.
For Node.js there is Nodeclipse 0.2 with some bug fixes for chromedevtools
I just saw this mentioned in Stack Overflow question Best WYSIWYG CSS editor and didn't know it could be done. I'm a Visual Studio newbie, so how do you do it?
Is there a separate debugger for JavaScript? I know how to work the one for code-behind pages... I usually use Firebug to deal with debugging JavaScript code.
I'm using Visual Studio 2005.
I prefer using Firebug for projects I can't use Visual Studio 2008 on.
To debug in Visual Studio 2005, make sure that "disable script debugging" is unchecked. Then load your webpage in Internet Explorer. From the debug menu inside of Visual Studio 2005, select "Attach to process" and pick the instance of Internet Explorer that has your web page loaded.
Alternatively, the Firebug team has been working on a "lite" version that you can include either as a script in your page or by launching it via a bookmarklet from your browser. It doesn't provide the full debugger that Firebug does, but it gives you a console and a command line from which you can inspect variables and log things to the console.
Visual Studio 2008 ASP.NET projects has debugging enabled by default. You can set breakpoints within your .js file while the website/web app project is run in the ASP.NET debug server.
TechRepublic has a good walk through - see Visual Studio 2008 simplifies JavaScript debugging.
Just make sure you have 'Disable Script Debugging' unchecked, and just hit F5 to start debugging in VS2005 or 2008.
I would also note that if you have your JavaScript inside the .aspx page you will have to find it via the script explore. However if you have it in a separate .js file you can just put a break point on it like you would any .cs file.
In Internet Explorer, select View -> Script Debugger -> Open. That should do it.
Usually you know where you are having problems, so you can set a breakpoint in your JavaScript code by placing the keyword "debugger;" on a line in your JavaScript code (obviously without the quotes) to set a breakpoint.
When you get to it in Internet Explorer, it will ask you if you want to debug and prompt you to choose a debugger from a list, hopefully you will see Visual Studio in that list (both a new instance as well as your currently-running instance) - if you are using Firefox with Firebug, it will automatically stop execution on that line and you will be within the Firebug debugger, not Visual Studio.
You will want to do the following to setup Internet Explorer for doing this - from within Internet Explorer, follow this menu path: Tools > Internet Options > Advanced Tab > Uncheck the "Disable Script Debugging" options.
You can set a breakpoint within JavaScript in Visual Studio 2005, but in addition to debugging needing to be enabled in Internet Explorer, you can only set the breakpoint in a .js file. You cannot debug any inline JavaScript code.
I also sometimes have problems when trying to debug my JavaScript code when using the attach process method to go into debugging. I will normally use the "Start debugging" green arrow. You will know that your code will stop at the breakpoint in your .js file if the breakpoint icon (Burgandy Circle by default) is filled in. If it's not filled in, you will never stop there.
Finally, make sure you have debugging enabled in your ASP.NET configuration settings.
Debugging client JavaScript code in Visual Studio 2005:
Add the following code to the start of the JavaScript code:
debugger
See Debugging client JavaScript in Visual Studio 2005.
Yeah using Microsoft Script Editor is a an option if you have Office XP or Office 2003 installed. In IE uncheck Disable Script debugging (Internet Explorer) and Disable Script debugging (Other).
Restart IE. In View menu you will have a new item, "script debugging", choose open. You will be given a choice of VS2005 or New instance of Microsoft Script Editor, choose that and give it a go.
Edit: try this link for a tutorial
I usually use Firebug to deal with debugging JS.
Unless you need to debug in IE, there's no need to stop using Firebug. It works with JavaScript in ASP.NET pages just as well as it does with any other type of page.
Visual Studio's JavaScript debugging is alright, but really cannot compete with the full range of client-side information that Firebug aggregates.