chrome浏览器调试js，结果Sources里面找不到js文件解决办法

 页面出现问题，就debug，这是前端开发工程师最常见的做法，但是有时候，我们打开开发者工具，在sources查找js文件，却发现怎么也找不到，无法设置断点。但是文件在network选项卡里确实load过了。

解决办法：

第一种办法：给需要调试的js文件头部加上这么一句://# sourceURL=dynamicScript.js

这一句像一个注释，但是确实能起到作用。

   我们在开发者工具下查看加了这句代码的js，会发现文件并不是叫common.js，而是改为了dynamicScript.js。而且是在一个单独的文件夹下。这样，我们就可以对该文件设置断点进行调试了。这里的示例，页面加载的时候顺利进入断点位置。

 

第二种办法：在需要调试的地方加上debugger，如下所示：

 重新加载页面的时候，确实能够进入断点的位置：

这种方式，只有在打开开发者模式的情况下，才会进入断点，所以不用担心在线上环境下，会导致代码运行问题。 

有的地方说F12->Sources->Ctrl+P(这也是Sources面板空白时的提示，如下)

然后在弹出框中输入想要查找的js文件，这里试过了，还是不行，在Sources下找不到的，在这里的快捷方式下仍然找不到。

 

 所以还是老老实实在js文件中加相关代码。