Develop Reference

How to debug js loaded in ajax request in Chrome DevTools

Actually I am a big fan of Google Chrome DevTools but it is very vast area for learning. I don't know much about it. I know how to out debug point, searching (Ctrl+Alt+F) and debugging, etc. basic things.
But in one of my project (its in asp.net MVC), it is requesting different views in Ajax request and in that views there are some js loading. I want to debug them but I am not able to. Actually I don't know where can I see them - especially the JS which is load after ajax call (its not inline javascript but a separate js files).
A workaround I found is - if I put 1 "debugger;" in that js file then it opens with some VM3012 or similar name with different numbers. Then only I can see the files. But I can not put debugger when I publish the code.
Any body knows then please help.
Thanks a lot for reading.
EDIT
as per first answer, I have tried but I can see that option "Open in Source panel" for normal JS file. But in my case my request is passing some query string to the js file like assets/components/utility/mycustom.js?_=1528282662460 and I am not able to see that option for such request. This help is appreciated but need more.

I know it's been 3 years but...
You can name the piece of javascript code inside the dynamic loaded file by adding the following above the code:
//# sourceURL=my-file-name.js
By doing it, that piece of javascript will be available in the file tree of the source panel and can also be found by the DevTools' CTRL+P shortcut.

Go to the network tab of the dev tools. You can filter by js files to help you find the file you need. Right click on the file you want and select Open in sources panel. You should now be able to put the breakpoint where you like as you are used to.

First step with AngularJs plug-in. Browser can't load the controller's function

Recently I've discovered AngularJS as mentioned in the title. After some lectures I'm trying to use this plug-in in order to obtain some dragNdrop feature for my web-page. I've downloaded the code from the git's master but nothing seems to work as planned. All the pages are filled with the AngularJS's syntax.
code result
I've tested the example on 3 different browsers but the result is always the same. The question is: what is the missing step for a correct browser-interpretation of the code? What do I need to include in the stock files given by the owner?

i'm not sure, but i think that the problem is that you're trying (according to attached screenshot) to load nested.html that is sort of "view page" (according to gihub repo), because of that there are no links to angular libs there. That's why try to include angular.js to your page or load index.html instead of nested/nested.html.
I hope my answer will help you to solve your problem.

Why is Node Express Duplicating Static Content

I have the following app.js file:
https://gist.github.com/manifestinteractive/393a4aae0c4ed4fb6bc2
When I look at files I am loading statically in the public folder via the operating system, they look correct, however, if I go to view them via the browser as intended for delivery through node express engine, the contents are duplicated. Basically, it is taking the file and appending it to itself, which of course breaks the javascript.
Anyone know why this would be happening? Suck a weird bug and I can't for the life of me put my finger on the cause.
For the record, I have tried looking everywhere for a solution. I've just not seen anyone talk about it. A quick test shows that I can manually change the JavaScript file at the source, and refresh the code in the browser, and it will reflect the changes correctly, but it will still be displayed twice.
Thought it might be some weird issue where maybe I had multiple instances of Node running or something, as that MIGHT explain it... but nothing :(
If I find what it is, I will follow up with the issue immediately, but for the time being, I am likely just doing something stupid someone here might yell at me for... and I would gladly welcome it :)

Why would my server not properly link to only one file on the server, but fine on all the others?

I originally posted this question on the code review forum, but was directed back to StackOverflow.
One contributor said that it was a problem with my Apache/server setup, but why only is one .js file affected? Problem described here:
I am a bit of a jQuery raven, I learn and take as needed forage about, and have no formal education, so your patience is appreciated.
I have a main issue that a jQuery plugin is not working on the server, but works locally.
I have checked for the usual oversights (having relative links not on the server, having all the required files on the server & case sensitivity issues), but it still wouldn't work.
I am not fluent in the FireFox debugging tools either, however I found a enormous anamoly which I suspect is causing the issue.
The plugin code is in it's own .js file, and in the "debugger" in firefox, when I click on the appropriate file, instead of previewing the .js file, it shows me the index PHP/HTML of the root for the domain.
For specific, real examples:
Example page where the plugin is failing: Here
Here are the error messages that I get under the "Console" tab in FireFoxe's tools:
SyntaxError: syntax error # http://bcw.se/3point0/js2013/imageScroller.js:1
TypeError: $(...).tinyscrollbar is not a function # http://bcw.se/3point0/index_debug_crousel_02.html:75
Use of Mutation Events is deprecated. Use MutationObserver instead. # http://code.jquery.com/jquery-latest.js:3492
And I presume the first two errors above are due to the anamoly and causing the failure, not directing properly to the right .js file, see screen dump below:
Can anyone help and is this the right forum?
Thanks in advance.

Your file is called ImageScroller.js and not imageScroller.js. Change that and it should work. (Apache should be case sensitive)
As imageScroller.js doesn't exist the url gets rewritten to the index page (probably by your .htaccess RewriteRule).
And the origin of the syntax error is kinda obvious - The browser tries to parse the fetched "js" file as JavaScript. But just isn't valid JavaScript ;).
Sincerely
Louis

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.

Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.

If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?

I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.