Could not load content for webpack source file in Chrome sources tab

I'm using webpack v4.16.2 as my bundle tool, and set devtool to 'source-map'. I'm trying to debug the source file through the Chrome sources tab. However, when I click the source file lie down webpack:// directory, an error occurred:

I'm not using webpack-dev-server, just build the source files into the dist/ folder, and load the page through Nginx.

What does this error mean? I'm pretty sure that the source map files are generated. How can I fix this?

Thanks in advance.

Improve this question

edited Feb 24, 2020 at 6:05

1

were you able to figure this out?

– sloppy

Mar 11, 2020 at 7:10

Add a comment

3 Answers

Sorted by:

Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first)

Alex is right,

source-map devtool mode generate .map file when minify the code in production mode, file lost sourcesContent property.

Another way to fix it is to uncheck the Enable JavaScript source maps in Chrome Dev Tool. Share

Improve this answer

answered Nov 10, 2022 at 10:01

Ye Shiqing

1,41922 gold badges1414 silver badges2424 bronze badges

Add a comment

I have been the same issue this whole day:

try set webpack.prod.config

  optimization: {
    minimize: false
  }

Here is what I found so far:

source-map devtool mode generate .map file lost sourcesContent property when minify the code which is default in production mode. And the 'webpack://XXXX' to locate the sourcesContent where the original code is, then the error happens.

Improve this answer

answered Mar 11, 2020 at 9:52 (stackoverflow.com/users/13044…)

Alex

Add a comment

I was getting exactly the same problem, same error message etc when trying to debug typescript / html in Google Chrome.

The solution is to empty your cache.

Press Control + H to load up your browser history, and press the Clear Data button.

The try pressing Control + O or Control + P to load/select a source file again. Share

Improve this answer

数据来源：stackoverflow.com/questions/6…

blog.csdn.net/dzdzdzd1234… 网站： aHR0cHM6Ly93d3cucWluZ3RpbmcuZm0v

接口： aHR0cHM6Ly91c2VyLnFpbmd0aW5nLmZtL3UyL2FwaS92NC91c2VyL2xvZ2lu

问题下xhr断点后，会发现无法查看代码：

Could not load content for webpack:///node_modules/axios/lib/adapters/xhr.js (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

解决方法一：此时浏览器是找不到对应的映射文件，对于这个案例来看，我们猜测请求可能是拼接的，我们搜索一下试试：此时我们点进去这个文件，就会自动定位到在断点位置，也就帮助浏览器做好了映射