Chrome 开发者工具源未显示源文件

我对 JavaScript 和 React 很陌生，我知道 chrome 开发工具中的"源"选项卡应该让我在浏览器中查看我的 JavaScript 文件，但它们不是。我认为这就是为什么该计划没有做它想要做的事情。

索引.html-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic-dist/semantic.css" />
<link rel="stylesheet" href="./style.css" />
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script src="./js/seed.js"></script>
<script type="textbabel" data-plugins= "transform-class-properties" src="./js/app.js"></script>
<!-- Delete the script tag below to get started. -->
</body>
</html>
app.js-
class ProductList extends React.Component {
render() {
return(
<div className = 'ui unstackable items'>
Hello Friend!, I am a basic React Component
</div>
);
}`enter code here`
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);

这个问题在这个堆栈溢出帖子中得到了回答

在开发人员工具中打开网络选项卡并刷新(f5 表示快捷方式(或打开 chrome 开发工具 ->设置 -> 恢复默认值并恢复

通常，当您按Ctrl + P然后搜索所需的文件时，它应该向您显示源文件，例如Chrome开发工具(用于快捷方式 - F12(中的"源"选项卡中的JS文件

如果由于任何明显的原因没有显示您正在查找的文件未在当前UI页面中调用或使用，则

在开发人员工具中打开网络选项卡并刷新

如果不起作用，那么

打开 Chrome 开发工具 ->设置 -> 恢复默认值并恢复

我知道

chrome开发工具中的"来源"选项卡应该让我在浏览器中查看我的JavaScript文件，但它们不是。

您可以添加目录，通常通过 Chrome 显示的对话框添加your-project/src。然后，Chrome 会在浏览器窗口顶部显示一个狭窄的水平条，要求您确认 Chrome 对所选磁盘目录的访问权限。酒吧很容易被忽视。

添加目录后，如果无法设置断点，则没有多大用处。Chrome需要源映射。如果加载了源映射，则 Chrome 会在每个源文件的图标上叠加一个绿点，指示可以设置此文件中的断点。

看起来您正在将语义 ui 与反应一起使用。如果您想拥有一个样板项目，其中包含与Chrome及其"源"选项卡相关的所有设置和详细的调试说明，那么请查看crisp-react

尝试了很多解决此问题的解决方案，它们都不适用于我的(.Net Core(应用程序，因为我使用的是自定义的appSettings.Development-myName.json而不是默认的appSettings.Development.json...此外，我们选择浏览应用程序的选项也受到影响。就我而言，默认appSettings.Development.json和IIS Express的组合来调试应用程序是成功的。谢谢！

在我的情况下，奇怪地隐藏源文件的原因是我的错误 - 我认为 js 文件是用主请求加载的，但它是由辅助AJAX 请求的主体加载的。然后这种js文件的代码可以工作，但它不会出现在源代码中。

相关内容

最新更新

热门标签：