I am debugging 12K lines of JavaScript. Of course it is written by the off shore team. Now, I need to find out which js function is invoked when I interact with the UI. Is there anyway for me to just automatically jump into the function which is being executed?
I cannot really put a break point since I have no idea where to put the break point?
App runs only on IE7!
You can attach VS 2008 to a scripting host process like Internet Explorer. Notice that "scripting host" is specific to the Windows Scripting platform, which isn't used by other browsers.
Internet Explorer should be configured to "Allow script debugging" so that VS can attach to iexplorer.exe and be able to debug scripts running in it.
Bear in mind that this is an extremely frustrating debugging experience. If you can debug in more modern browsers (including IE9, which has decent developer tools), please do so!
Once you've attached Visual Studio to IE7, you can use the Break All option to terminate any running scripts. If no script is running, it will break the moment a script is executed, such as if you hover over an element with the mouse that has an onmouseover listener.
This might get somewhat cumbersome if you are looking for a specific piece of code. I don't think there's really a way around this besides just tracing through the code until you find the part that's relevent.
If this is a bug that happens when you click on a button, for example, look at the HTML code for the button. If it has an onclick handler, search for that function and set a breakpoint there, or add the word debugger; to the top of the function. If there is no onclick handler, search for the ID of the button in your Javascript code and see if any listener is bound to that DOM element.
There's really no reason why 12,000 lines of Javascript code should thwart your efforts to see what's going on. Find a repro for the issue, and then use Find to locate the relevant code in your Javascript file. Also, I realize your site might not work in Firefox or Chrome, but it might work in IE8 since it's fairly backwards compatible. IE8 has a better debugger and also the ability to explore various DOM elements which could come in handle for tracing what code is run where.
Hope this helps!
Related
I'm debugging some 3rd-party minified Javascript that somewhere is triggering a browser page refresh. However, I can't figure out what part of the code is causing the refresh.
Is there a way to put a breakpoint in Chrome that will be hit just before a page refresh so I can inspect the call stack to see what caused it?
Try this:
Open your Chrome Dev Tools
Navigate to the "Sources" tab
On the right panel, expand "Event Listener Breakpoints"
Expand the "Load" tree
Check the beforeunload and unload options
See if that helps; screenshot below.
Edit: Alternately, if that doesn't work, you can use Chrome to search all loaded scripts for the code that might be responsible. There's apparently a lot of ways to refresh the page with JavaScript but they mostly have a few common strings like "navigator", "location", "reload", "window".
Finally, if there's a link to the same page you are on, it's possible some JS is triggering a click on it-- unlikely, but worth exploring if nothing else has worked thus far...
(Please excuse the formatting as I'm on mobile...)
NOTE: It seems occasionally, for reasons I don't yet fully understand, this solution fails to actually cause the debugger to pause; in this situation, I found that thorn̈'s answer to this question did the trick for me.
In Firefox (not Chrome, it's important; UPD 2020: it now works in Chrome as well) Developer Tools, go to the console, enter addEventListener('beforeunload',()=>{debugger}), and execute your code. After the debugger stops at the debugger statement, look at the call stack. You'll see what triggered the event. Chrome didn't have it there.
At least, this worked for me.
In the devtool, network pane, toggle the "Preserve log", carefully check the initiator column.
You don't specify what's the 3rd party library does.
If it is a ui component like an ad or something similar, just place it inside an iframe with the sandbox attribute configured as you need.https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe (Scroll down to the sandbox attribute section)
If it is something triggered by an event, just use (in chrome dev tools only) the getEveneListener() function and follow the listener trail... (hard, but possible)
Example:
The listener property will lead you to the actual functions that will be invoked. You can than search them in the obfuscated code and add debugger to understand it's purpose.
There are many other scenarios - if you can specify more.
Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.
I have a SharePoint website with menus and everything.
I want to know what JavaScript function is called when I click an item.
How to know that? Is there any tool to trace javascript functions called? I use IE
Thanks a lot
I know this may not be the best help as you are not a chrome/firefox user. However, if you do chose to switch over, the Google Chrome browser has a script checker built in, which catches everything that you want to console.log().
This is simular with Firefox, however, firefox you have to download the addon "fire-bug" which can do the same, but it does not come pre-installed.
IE has an inbuilt 'program' called developer tools, which could be what you want, however I believe this came in through the later stages of IE such as IE 8+ (don't quote me on that)
You can use debugbar to inspect HTML element and also find what JavaScript function is called, then you can use Microsoft debugger, to put a breakpoint into the function and debug.
I'm trying to fix some JavaScript bugs. Firebug makes debugging these issues a lot easier when working in Firefox, but what do you do when the code works fine on Firefox but IE is complaining?
you can also check out the IE Developer Toolbar which isn't a debugger but will help you analyze the contents of your code.
Visual Studio will help with the debugging
Fiddler should help analyse the traffic travelling to and from your browser
You can try Firebug Lite or use Visual Studio to debug the JavaScript.
Since Internet Explorer 8, IE has been shipping with a built-in tool-set for debugging, troubleshooting, and generally helping in development of your pages/applications. You can access these tools by pressing F12 while in the browser.
HTML Tab
The HTML tab will let you peek into the DOM as the browser understands it. As you select elements from the HTML view, their styles will be detailed on the right, with individual rules have the ability to be toggled on and off. You can also modify rules, and determine whether the styles on the element were inherited, or assigned explicitly. Additionally, you can even tell which .css file they originate from.
There is a bit more you can do in the HTML tab, such as review and modify attributes on elements, and even make changes to the layout of the element from within the layout section. Additionally, you can make changes directly to the markup to quickly test out some structural ideas.
Script Tab
For resolving JavaScript issues, you can watch the Console and the Script Tag. If your script stumbles across an a call to an undefined method, you'll be alerted within your console. The console also lets you run arbitrary JavaScript against your page, if you want to toggle items on or off, or try bind a handler to a button.
The Script tab great as well as it will format your JavaScript for you, allow you to insert breakpoints, step in and over code blocks, and watch variables over time.
If you've used Firebug, or even the Webkit Inspector, the F12 Developer Tools in Internet Explorer 8+ should be pretty familiar to you.
Firebug lite doesn't work too well for me. The Developer Toolbar just isn't good enough. There really is no great solution.
Or IE Developer Toolbar
Have a look at DebugBar. License is free for personal use
For the DOM Inspector, try the Internet Explorer Developer Toolbar.
For the Net tab, try Fiddler.
For Javascript debugging, try Visual Web Developer 2008 Express Edition. (Or a higher edition of Visual Studio)
Also, try DebugBar.
Visual Studio 2008 can do JavaScript debugging, you have to go to IE's Tools->Internet Options->Advanced and uncheck 'Disable Script Debugging (Internet Explorer)' in order for the browser to bubble up the errors it detects.
Once you're in Visual Studio you basically have it's entire debugging arsenal at your disposal. It's not as integrated as Firebug, but it is way better than anything we used to have.
i think it is better that you first install the ie core addon in firefox then load the page with ie addon and press f12.
good luck.
Make a bookmark in the favourites bar, and put this address as the URL:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Then navigatge to the page you want and click the link. Firebug Lite will/should open up...
The IE8 beta comes with what I think is the IE Developer toolbar, but it seems to be a lot more powerful than the last time I tried the toolbar on IE7
I'm guessing this question was posted before the IE8 final came out, according tho some of the answers.
These days, IE8's inbuilt Developer Tools are great; and while the JS debugging isn't as useful as Visual Studio the Dev Tools in general much better than Firebug in my opinion. Between that and the Compatibility View Browser Mode I can handle all my IE6 development needs.
I found a solution to this problem, you could simply stick this tag to the page you are trying to debug and it will open firebug:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Explanation from https://getfirebug.com/firebuglite#Stable
If you're a serious Front-end Developer, give AJAX Edition a test run:
http://www.compuware.com/application-performance-management/ajax-performance-testing.html
It's a free tool that allows users’ to understand what is causing performance and functional-related problems in modern AJAX/web Applications.
In IE, go to MenuBar->Tools
Select Debugger Tools
Hit F12 and enjoy.
It is far from Fire Bug, but suitable for some quick help
There is always a way how to get around this issue, watch the video and you will be able to install firebug in 2 mins.
install firebug on ie
Good luck
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.