I am debugging some code on the MS Edge browser, but it reloaded twice and showed a "This page is having a problem loading" message after two tries. The page has been tested on IE11 or lower, Chrome, and Firefox with no issues.
I have been having trouble bringing up the debugger during page execution by placing the debugger statement in various parts of the code. I have placed it in the first line of the script in the body tag, I have placed it in the first line of $(document).ready(); and even in the script tag in the header. I am so surprised when none of the debuggers triggered other than the one in IE11 (both Chrome and Firefox did not trigger either). Edge of course still continued on its reload loop and saying that it has a problem loading.
My question is - am I not doing this right? Is there a list of when a debugger; statement will not trigger? And more importantly, how do I trigger it in Edge before it reloads twice and throw the error page (For reference, pulling up F12 after it throws the error page gives the DOM of the error page, which is not helpful.)
This is an issue with Edge where the console seems to crash along with the browser. I have noticed it numerous times during development and have not been able to find a solution.
Check in every other browser on an empty cache and see if you are getting any errors in console. Older versions of Edge, before the last service pack were very flakey so I would suggest making sure your environment is upto date.
I can debug with IE without any problem, but when I try different browsers code is not stopping on breakpoints. I hava a project that is currently not compatible with IE. I'm using OpenJSCAD as a dependency in my project, therefore I need to debug on Chrome or Firefox.
Is it possible to debug Java Script with Visual Studio 2015 on Chrome or Firefox?
You can absolutely do it, however it is a bit tricky to do. In the toolbar, click the button to get the dropdown of browsers to debug with and then click "Browse with...". Click "Add...", set Program to wherever Chrome is on your machine and set Arguments to --remote-debugging-port=9222. You can also set Incognito as I have to ignore cache but it is not required.
Important! Chrome cannot be started before, Chrome needs to start fresh from Visual Studio otherwise debugging won't work.
After this goto "Debug" -> "Attach to Process..." -> select the chrome instance with the title of your project or similar and then click Attach.
If everything works you can now Debug your Javascript in Visual Studio and use all Chrome features as well.
Note that when you have attached to the process you can't just stop
debugging without terminating chrome.exe. However you can get around
this by clicking "Debug" -> "Detach all".
Javascript debugging in visual studio is not possible when we use non IE browser as debugging browser. The developer tools available on non-IE browsers are the first alternative(F12) to the JavaScript debugging.. If they are still not helping, the one should look for third party tools like https://www.jetbrains.com/webstorm/features/#JS_debugging
More Info on Debugging
I had this problem... And I realized what was happening, it was in my web/javascript App. I had an ahref link target='_blank', which created a new window out of the debugging process. So when in the new window no debugging. When in original VS window debugging works. Either temp disable the target _blanks, or hand change the URL in your current window.
Remember to set the Select "WebKit Code" as the "Attach to" option.
Also, to avoid having to start a fresh chrome every time I use Chrome Canary as the target process.
One thing I find annoying with this is that breakpoints placed in the original .js source files are ignored as VS creates "dynamic" script files in which the actual debugging is performed, I wonder if these can be synced somehow?
I am trying to get an function to run from an event listener on a form submit.
Chrome & Firefox (Iceweasel) work fine with this code. Internet explorer (Version 9) for some reason requires me to open up the developer tools and close it down straight away for the javascript to work, after the page can be refreshed and the code works fine.
The site is published at http://itdipext.ryanteck.org.uk/enquire.html and the javascript is at http://itdipext.ryanteck.org.uk/javascriptValidate.js
Why Internet Explorer 8?, Heck why javascript for basic form validation?
This is for a college assignment where HTML5 does not even exist yet. And internet explorer to make the teacher happy.
Thanks -
Ryan Walmsley
It looks like its due to the heavy use of console.log in your script.
IE doesn't create the console object until dev tools is open. You can add this to the top of your script to stop it breaking
var console=console||{"log":function(){}};
Be aware it wont log anything to the console with this in place.
When stepping through JavaScript code in Google Chrome debugger, how do I terminate script execution if I do not want to continue? The only way I found is closing the browser window.
Pressing "Reload this page" runs the rest of the code and even submits forms as if pressing F8 "Continue".
UPDATE:
When pressing F5 (Refresh) while a script is paused:
Google Chrome (v22) runs the script. If the script submits HTTP request, the HTTP response for that request is displayed. The original page is not refreshed.
IE 9 just freezes. However IE has an option "Stop Debugging" which, when pressed (provided you did not press F5 earlier), continues to run the script outside debugger.
Firebug behaves identically to Chrome.
Closing and then opening again the browser window is not always the next easiest way
because it will kill browser session state and that may be important. All your breakpoints are also lost.
UPDATE (Jan 2014):
Refresh while debugging:
Chrome v31: lets scripts to run and stops on further breakpoints (but does not submit ajax requests), then refreshes.
IE 11: refresh does nothing, but you can press F5 to continue.
Firefox v26: lets scripts to run but does not stop on further breakpoints, submits ajax requests, then refreshes.
Kind of progress!
Navigate to the same page while debugging:
Chrome v31: same as Refresh.
IE 11: scripts are terminated, new browser session is started (same as closing and opening again).
Firefox v26: nothing happens.
Also juacala suggested an effective workaround. For example, if you are using jQuery, running delete $ from console will stop execution once any jQuery method is encountered. I have tested it in all above browsers and can confirm it is working.
UPDATE (Mar 2015):
Finally, after over 2 years and almost 10K views, the right answer was given by Alexander K. Google Chrome has its own Task Manager which can kill a tab process without closing the tab itself, keeping all the breakpoints and other stuff intact.
I even went as far as BrowserStack.com to test it in Chrome v22 and found that this was working this way even at that time.
Juacala's workaround is still useful when debugging in IE or Firefox.
UPDATE (Jan 2019):
Chrome Dev Tools at last added a proper way to stop script execution which is nice (although a bit hidden). Refer to James Gentes's answer for details.
In Chrome, there is "Task Manager", accessible via Shift+ESC or through
Menu → More Tools → Task Manager
You can select your page task and end it by pressing "End Process" button.
As of April 2018, you can stop infinite loops in Chrome:
Open the Sources panel in Developer Tools (Ctrl+Shift+I**).
Click the Pause button to Pause script execution.
Also note the shortcut keys: F8 and Ctrl+\
2020 April update
As of Chrome 80, none of the current answers work. There is no visible "Pause" button - you need to long-click the "Play" button to access the Stop icon:
One way you can do it is pause the script, look at what code follows where you are currently stopped, e.g.:
var something = somethingElse.blah;
In the console, do the following:
delete somethingElse;
Then play the script: it will cause a fatal error when it tries to access somethingElse, and the script will die. Voila, you've terminated the script.
EDIT: Originally, I deleted a variable. That's not good enough. You have to delete a function or an object of which JavaScript attempts to access a property.
[2022 edit: this was reported as https://bugs.chromium.org/p/chromium/issues/detail?id=774852 and https://bugs.chromium.org/p/chromium/issues/detail?id=1112863 in 2017, and was just recently marked as fixed 5 years later, so if you are still experiencing this, you should update Chrome (and in general keep it updated). If you are experiencing this issue in 2023 or forward, it may be a different issue, a bug regression, etc.]
If you are encountering this while using the debugger statement,
debugger;
... then I think the page will continue running forever until the js runtime yields, or the next break. Assuming you're in break-on-error mode (the pause-icon toggle), you can ensure a break happens by instead doing something like:
debugger;throw 1;
or maybe call a non-existent function:
debugger;z();
(Of course this doesn't help if you are trying to step through functions, though perhaps you could dynamically add in a throw 1 or z() or somesuch in the Sources panel, ctrl-S to save, and then ctrl-R to refresh... this may however skip one breakpoint, but may work if you're in a loop.)
If you are doing a loop and expect to trigger the debugger statement again, you could just type throw 1 instead.
throw 1;
Then when you hit ctrl-R, the next throw will be hit, and the page will refresh.
(tested with Chrome v38, circa Apr 2017)
Refering to the answer given by #scottndecker to the following question, chrome now provides a 'disable JavaScript' option under Developer Tools:
Vertical ... in upper right (in Developer Tools menu, not in Chrome main menu)
Settings (in newer Chrome versions it is visible separately as a cogwheel besides the ... button, not under it)
And under 'Preferences' go to the 'Debugger' section at the very bottom and select 'Disable JavaScript'
Good thing is you can stop and rerun again just by checking/unchecking it.
Good question here. I think you cannot terminate the script execution. Although I have never looked for it, I have been using the chrome debugger for quite a long time at work. I usually set breakpoints in my javascript code and then I debug the portion of code I'm interested in. When I finish debugging that code, I usually just run the rest of the program or refresh the browser.
If you want to prevent the rest of the script from being executed (e.g. due to AJAX calls that are going to be made) the only thing you can do is to remove that code in the console on-the-fly, thus preventing those calls from being executed, then you could execute the remaining code without problems.
I hope this helps!
P.S: I tried to find out an option for terminating the execution in some tutorials / guides like the following ones, but couldn't find it. As I said before, probably there is no such option.
http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C
http://www.nsbasic.com/app/tutorials/TT10.htm
You can pause on any XHR pattern which I find very useful during debugging these kind of scenarios.
For example I have given breakpoint on an URL pattern containing "/"
If you have a rogue loop, pause the code in Google Chrome debugger (the small "||" button while in Sources tab).
Switch back to Chrome itself, open "Task Manager" (Shift+ESC), select your tab, click the "End Process" button.
You will get the Aww Snap message and then you can reload (F5).
As others have noted, reloading the page at the point of pausing is the same as restarting the rogue loop and can cause nasty lockups if the debugger also then locks (in some cases leading to restarting chrome or even the PC). The debugger needs a "Stop" button. Nb: The accepted answer is out of date in that some aspects of it are now apparently wrong. If you vote me down, pls explain :).
Go to the Sources tab and select Filesystem subTab
Select a folder, containing the file you execute
Accept folder access recuest
Select the file you execute
Put a breakpoint inside the file you execute
Click the "Pause script execution option"
Select the copy link address option in the RMB context menu
Paste the copied address into the browser address bar to open the file
File execution will be stopped at the breakpoint
Open the source tab in 'Developer Tools', click on a line number in a script that is running, this will create a breakpoint and the debugger will break there.
There are many appropiate solution to this problem as mentioned above in this post, but i have found a small hack that can be inserrted in the script or pasted in the Chromes console (debugger) to achieve it:
jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
This will cause execution to be paused when you hit F12.
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.