如何在 Chrome DevTools 中调试 ajax 请求中加载的 js

Question

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.

Answer 1

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.

Answer 2

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.