Google Chrome won't let me place breakpoints - javascript

I've been using Google Chrome to debug my javascript, but then all of a sudden I can no longer place breakpoints. I click on the line number, where I previously clicked to add a breakpoint, but no breakpoint will be added. Sometimes if I click very fast, like a madman, I can see it trying to add breakpoints, but it won't stick.
The only thing I changed was adding JSONView. I uninstalled that, but still can't add breakpoints.
Does anyone have any idea?
An edit:
I can place breakpoints on other pages, like StackOverflow, just not the one I'm developing running on localhost.

No it's not fixed. The Chrome debugger has done this for as long as I can remember. Just close and reopen the debugger and it usually comes right again. Sometimes you may need to try several times for it to work.

This bug was fixed yesterday (February 3) with the introduction of a new api for managing JavaScript breakpoints: http://code.google.com/p/chromium/issues/detail?id=69988
I downloaded the most recent Chromium nightly from http://build.chromium.org/f/chromium/snapshots/ and was able to successfully set breakpoints in JavaScript, which I had been unable to do using the current stable/beta/dev builds of Chrome.
Hopefully this fix will be incorporated into the next releases of Chrome. Until then, adding debugger; statements to your code is a decent workaround for setting breakpoints.

This will also happen when trying to set a breakpoint on unreachable code. If starting up a debugger in a new chrome process continues to cause problems, make sure there's no errant breaks or returns etc. prior to the breakpoint.
eg:
var foo = 'bar';
return foo;
foo = 'baz';
debugger
^^^ statements after return in above example will not be reached, chrome will rightly refuse to honor debugger commands or set breakpoints

Check your JS code! Got the error too on Chrome (and Firefox) and the error was a method named exactly like another.

Related

javascript: firebug not allowing to set breakpoint in certian scripts

I am using firefox+firebug for javascript development.
While setting breakpoints in the scripts,for certain files, it allows and for some files,
but for certain files it doesn't [which are loaded, and throws alert messages, if I put alert() there].
If I try to set break point at that line, the red-dot is marked at the last line of the script file, instead of the place where I needed.
I am attaching a screenshot of the issue.
Line 56 is where I wanted the breakpoint, but the breakpoint automatically moves/set at line-66, which is at the end of script file
This is a known bug in previous versions of Firebug 2.0, which should be fixed in the current version (currently 2.0.17).
Note that Firebug is going away once multi-process Firefox is released, so it´s recommended to use the browser internal DevTools instead, which don´t have this issue.
You can also add debugger in your JavaScript code.Try this
debugger;
this.getEntryCollection();

How to debug StealJS with IE 11 and Firefox 36?

I use the minor tag of StealJS to load my JS files and everything seems to work, but today I recognized that I'm simply unable to debug my code in IE 11 and Firefox 36. Until now I only used the new Opera based on Chrome/Blink, currently version 27, which works pretty well regarding debugging. But:
Firefox's built in dev tools don't show my JS files at all. They only show steal.js and directly afterwards a greyed out line called "evals" with two additionals lines of two JS libs I use and export in stealconfig.js.
Firefox's Firebug shows my files and I can set breakpoints, but there seems to be some errors, because if I set/unset the breakpoint there's a little animation shown which never finishes. If I reload the page the usual breakpoint icon, a red circle, is shown, so it looks like the breakpoint has been set successfully, but the code simply doesn't stop on the breakpoint. But it is run, because the functionality implemented at the break point is usable.
In IE 11 my JS files are shown in the "dynamic scripts" tree and I can set breakpoints as well, but everytime I reload the current page the icon for the breakpoint changes and gets some defect triangle with a warning sign, just like the breakpoint won't work anymore or such. And of course IE doesn't stop the code as well after I reload the page and if I open my JS file the breakpoint is not shown anymore, which at least works in Firefox's Firebug.
None of those problems happen in Opera/Chrome, I always see all my files, can set breakpoints and the code stops as expected. Additionally all browsers show individual requests for my JS file, nothing is bundled into one big one or such, it's all independent files during development.
So is StealJS and how it loads files simply incompatible with the other browsers? Do they need to add support for how Steal handles file loading? I used a former version of Steal with JavaScriptMVC and none of these problems occured with that version.
Looks like those are browser issues, so go and write bug reports.
https://github.com/stealjs/steal/issues/419#issuecomment-99059303

javascript line by line debugger

This might sound crazy but is there a debugger out there which automatically breaks on the first line of executed code ?
Sample : suppose I have debug mode on and I click on a button. Now the intelligent debugger should automatically set the breakpoint on the first line inside the .click({}) function.
This way it is very easy to see the starting point and very easy to backtrack.
There must surely be something.
Thanks
Most debuggers in the browser allow you to insert the keyword
debugger;
into your code which will cause a break to occur at that point in the execution.
Chrome with CTRL+SHIFT+J. ;) You can put breakpoints there. I think it also works under FF. Also new versions of IE have JavaScript debuggers (don't remember the shortcut though).
F12 in most browser opens the debugger.
Chrome, Safari, IE have this by default, and for FF there is the Firebug add on.
Also you can debug from visual studio, select debug from the menu --> Attach to process and then select the interter explorer process. But You should enable the script debuging in Internet Explorer first.

How to write and run scripts in the Google Chrome Javascript Console?

I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.
It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739
You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands
Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?
I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console
Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.

"No symbols loaded for the current document" while debugging JavaScript in Visual Studio

I'm working on a .NET 3.5 website, with three projects under one solution. I'm using jQuery in this project. I'd like to use the Visual Studio JavaScript debugger to step through my JavaScript code. If I set a breakpoint in any of the .js files I get a warning that says:
The breakpoint will not currently be hit. No symbols have been loaded for this document.
How do I fix this? I'm guessing that Visual Studio is having some trouble parsing through some of the jQuery code. I will try to replace the minimized version of jQuery.js with the expanded version, but I don't think that will fix it.
I was experiencing the same behavior in Visual Studio 2008, and after spending several minutes trying to get the symbols to load I ended up using a workaround - adding a line with the "debugger;" command in my JavaScript file.
After adding debugger; when you then reload the script in Internet Explorer it'll let you bring up a new instance of the script debugger, and it'll stop on your debugger command let you debug from there.
In this scenario I was already debugging the JavaScript in Firebug, but I wanted to debug against Internet Explorer as well.
Make sure you turn on script debugging in your internet options. And if you think it's on, double check it.
I had the same issue, but I solved it by changing my browser settings in Internet Explorer. Go to menu Tools -> Internet Options, select the Advanced tab, then make sure that both "Disable Script Debugging (Internet Explorer)" and "Disable Script Debugging (Other)" are unchecked.
Also, I needed to set Internet Explorer as my default browser, which is normally set as Firefox. To do that, in Visual Studio just right click on any browseable file in Solution Explorer and select "Browse With..." Select Internet Explorer and click "Set as Default".
I'm not sure if there's a way to get debugging running with other browsers, but it wouldn't surprise me if Visual Studio only plays nice with Internet Explorer.
Also, you may need to do "Attach to process" and add IExplorer.exe to get the debugger to start.
I would suggest using FireBug for JavaScript debugging. Give it a spin :)
I finally found the answer to this I think.
When you attach your debugger to the iexplore.exe process, you need to make sure you select "Script" as one of the debugging choices.
It's the button in a red box here: Screenshot of Select Button in Attach to Process Window
Then on the next screen, choose Script: Screenshot of Select Code Type window
This will warn you that you cannot debug Managed and Script at the same time, but that should be fine because your managed code is your server code and you attach to the web process (aspnet or w3wp) instead.
You'll know you did it right because VS 2008 will load ALL the script documents pertaining to that page (inline stuff, eval stuff, etc.) in Solution Explorer.
You'll have full access to the DOM, the immediate window will work, etc. It's pretty slick.
One other thing you might look for is a syntax error in your JavaScript code. That is what happened to me today. No symbols would load because I had one too many parentheses in my code. The IntelliSense barely registered the error. Once I fixed the syntax error, everything worked normally.
All of these answers are correct, but there is one more thing to check. Until yesterday I was always able to debug my JavaScript code from inside of Visual Studio (2012). I had added a Silverlight project to the solution, which turned on the Silverlight Debugger. This was my problem.
On the property page for the web application -> Start Options -> at the bottom of the page be sure that "Silverlight" is unchecked. Actually, I have only ASP.NET checked and now the debugger goes through Visual Studio.
Unchecking it and now the debugger stops on the "initialize" function as I wanted.
The solution for me was to update the IE from version 9 to 11. Hope it helps to someone. Peace!
You have to wait for the IDE to parse the JavaScript code. Just wait a while and you should see the JavaScript code change color. You will then be able to add breakpoints.
I had the same annoying issues on Visual Studio 2013, and JavaScript development without a debugger is just suicide.
All I did to fix it was to right click the break point red dot -> Disable Breakpoint and then right click again -> Enable Breakpoint.
This made the debugger work on JavaScript like a charm again.
This can also happen when your solution has multiple web projects, even if they're being served from a different ASP.NET Development Server (WebDev.WebServer40.exe) instance on different ports.
If running two or more web projects within your solution and you have multiple script files with the same name at the same place in different webs, the development web-servers may serve up the wrong file, causing this problem.
In my case, deleting the extra copies resolved the problem.
I sometimes have this problem with external JavaScript files - it is caused by the browser cache holding onto an old copy of the file. Forcing a refresh of the page linking to the JavaScript code solves the issue in this case.
Of course, make sure your debugger is attached to the correct browser process. ;)
This is perhaps glaringly obvious, but I stumbled over this for a second, so perhaps others will too. I didn't have Internet Explorer set up to handle HTML/HTTP, and hence it was not launched when I pressed the run button in Visual Studio.
Instead, I was starting Firefox. I went to Start Button | Default Programs, set all the defaults for Internet Explorer, and then debugging started working in Visual Studio for me without any other fuss.

Categories