Step Through HTML in VS 2010? - javascript

I'm wondering if it is possible to step through HTML and JavaScript Code in VS2010 ? I have a project in which I have an HTML file with Javascript inside it...I can't set a breakpoint on the HTML and although I can set a breakpoint on the Javascript it will not pause when I run the project.
Thanks

you can't debug HTML. If you want to debug javascript code that is embedded in the HTML, add a line
debugger;
inside the script tag. The browser will stop and let you debug it from there

As far as i know, you can't set breakpoints in/on HTML code, why would you. You can step through JavaScript code in IE, if you allow debugging of client scripts in the internet options of IE. For any other browser you will need some other JavaScript-debugger, something like Firebug.

If you are sure you have the javascript debugger attached, you can put a simple debugger; statement in your js which will cause it to break. You will have to have script debugging turned on an VS attached to your IE process. You could also use the IE Dev Tools JS debugger.

Related

Why doesn't debugger stop at breakpoint?

I have the problem that the chrome debugger for JS doesn't stop every time I execute one certain function. I tried debugger; and also setting breakpoints where I want the code to stop by putting a blue tag on the gutter next to the line on the left.
any ideas why this happens?
Without a clear reproduction plan, it is very hard to tell why your breakpoints are not hitting.
But, one surest way of stopping on a line is writing:
debugger;
to the location where you want to stop. Without any blue signs on the gutter, the debugger will halt.
NOTE: Be sure to clear all the debugger; when you are done with it.
More info is here
What I found worked was to set my breakpoints using the suggestions above, then in the extension's console run:
location.reload(true);
This re-opens the extensions, set off my breakpoints and allowed me to debug!
It appears that the problem is related to the debugger loading after the extension, thus not capturing the breakpoints. Hope that helps!
I had an issue with breakpoints being hit that I just resolved.
Breakpoints within javascript in the html were not being hit, although I could set and hit breakpoints in included Javascript files.
I found that the problem was that the source file was included twice. The base html page (not dynamically included) has the sourceURL tag in it. This caused the same javascript to exist twice in the source pane, causing the issue.
I removed the "sourceURL" tag from the base html page, and breakpoint resumed working
For me this appears to be a bug in chrome - nothing would cause a breakpoint to be hit, not even debugger. I had to close and re-open Chrome, and then my breakpoints worked.
Also, it's possible that breakpoints are disabled. You can toggle this in the debugger or by pressing Ctrl + F8
Maybe you add your target file to blackbox, so debugger could not be triggered on it.
solve:
ref: https://developer.chrome.com/devtools/docs/blackboxing
Had you add folder to workspace accidentally?
If yes, your devTool breakPoint would stop work on this file.
After I remove folder from workspace, breakpoint feature is back!
With client solutions like angular js, the modules and controllers are picked up independent of the file name. Most probably you would have created a backup/copy of file in the same folder as the actual file you are debugging. This might be the js file getting called instead of one you intended. You can delete that file and it should work fine.
I found that code referenced by a tag with the async property inside of it don't stop at breakpoints in developer mode.
This may sound dumb... but it worked for me... Simply closing and re-opening the browser restored JS debugging functionality.
to test your function debug point you can call that function right from console.. it will call and hit your breakpoint
Check if your function is called properly. For me, I resolved the problem by conceptualising the flow of my program and found out that the function calling had some errors. After figuring that out, it was easy to continue.
I had the same problem and it turned out that reason was that I had enabled bundle, i.e.
in the BundleConfig.cs I had BundleTable.EnableOptimizations = true;
When I changed it to BundleTable.EnableOptimizations = false; it worked.......
If you are using the VS, check if configuration is DEBUG. When is Release the MVC minify the JS.

Debugging in-page javascript with Chrome when the html is minified?

The scripts on our website are embedded in the html and everything is minified. Throwing a debugger statement into the javascript to debug doesn't help very much because there's only actually one line of html in the original source. When the source is prettified with Chrome's code prettifier, the debugger points to the wrong line in the code.
How can I debug minified javascript embedded in the html?
One thing that might help is that you can set breakpoints in chrome w/o using the debugger directive directly in code. Simply view the prettified code output in the chrome sources tab, and then double click on the line where you want to add a breakpoint.

Can the IE10 - F12 tools be used to degub JavaScript that is added dynamically?

I'm not that familiar with IE-10 and I'm trying to troubleshoot some code using the F12 tools. I can't find a way to debug ( i.e. set break points, etc. ) in a script that is Ajaxed in, and then append to the DOM.
I can download it more conventionally using <script> but not changing things would be a bit easier. Is there a way to do this?
The simplest way I can think of would be the temporarily add a debugger; command at the top of the dynamically added script file. That will cause it to drop into the debugger as soon as that script starts to execute. Once it drops into the debugger, you can set breakpoints in the now-loaded script that hasn't yet executed.

Can we debug inline javascript through firebug and have break point

We normally debug the javascript files like .js by having breakpoing in firebug , is there any way to debug inline javascript inside the page.
We have lot of inline code in the page itself with , let me know if there any efficent way of debugging.
Thanks
You can also use firebug to debug the javascript between your <script> tags.

VS2008 javascript debugger in usercontrol

In a VS2008 web project I have a usercontrol with some javascript that I want to debug. When I try to set a breakpoint I get "This is not a valid location for a breakpoint". I tried this on a regular aspx page and was able to set the breakpoint just fine.
Is there some limitation for setting javascript breakpoints in usercontrols? Is there some setting that needs to change?
Thanks
I can't seem to set a break point in my usercontrol either.
You can try adding the debugger; keyword, Sys.Debug.fail('message') or Sys.Debugger.assert(a == 1) to your javascript to force a breakpoint to work around this issue.
in vs.net you can add keyword debugger in your js function ,with the help of browser development piug-in ,as firebug(firefox,ie also has a dev plug-in like this) ,the page will stop at the line where you declure debugger.
eg:
<script>
function myFunc()
{
debugger;
//do sth
}
</script>

Categories

Resources