Develop Reference

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.

Multiple Javascript files creating alert boxes

I have been given a project - the one HTML page includes about 45 different javascript files. I am getting alert boxes when I click on some of the elements - which javascript file is making the alert? How do I determine this, preferably which line in the javascript file but I can start with which file...
If this can be done within the web browser (I dont care which web browser) please let me know how... I have looked at the resources tab in chrome but it did not help me.
Thank you.

Use a text editor to replace all
alert
by
console.log
And then use Chrome inspector to see where the logs are.

Include your own javascript file on top of the page and predefine alert with:
alert = function(msg) {
alert(msg); // put breakpoint here
}
Then use the debugger (Firebug in Firefox, or Developer Tools in Chrome) to put breakpoint as described above. The stack trace view in the debugger will show you which script line / file is creating the alert

Use the profiler in Firebug
Console -> Profile -> Click to enable. It will show which all functions are calling, search that function names, and add break points to debug.

Firebug showing eval scripts on one line

When loading a JavaScript block via Ajax, the response is returned ok, but when viewing it in the code in Firebug (1.9.1) in the Script tab, it appears without any newlines. It's extremely difficult or impossible to set breakpoints anywhere.
Is there a way to get Firebug to preserve the newlines?

I don't think so, but Chrome's developer tools unobfuscator may do what you want (http://www.sagarganatra.com/2011/06/de-obfuscating-javascript-code-in.html).
However, if you load in your script blocks by adding a script tag to the page and changing its source to point to the relevant script file the eval function isn't used and firebug should display the script with line breaks included.

Found a fix for Chrome.
Simply add the following snippet to where you want to debug:
try{ throw Error() } catch(e) {}
and click the "Pause on all Exceptions" button in the Chrome Scripts console tab. Then simply hit F8 until you reach your try block.
Works like a charm. :)

Step Through HTML in VS 2010?

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.

Using Google Chrome to debug and edit javascript embedded in HTML page

Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?

Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.

I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
Using Chrome 21.0.1180.89 m for Windows
All files are shown after clicking that very discreetly placed button. See:
Now you may begin debugging...

None of these answers have worked for me.
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works.

Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.

Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source