Chrome 开发者工具源不显示源文件答案

【问题标题】：Chrome developer tools sources not showing source filesChrome 开发者工具源不显示源文件
【发布时间】：2019-09-11 22:50:55
【问题描述】：

我是 JavaScript 和 React 的新手，我知道 chrome 开发工具中的“源”选项卡应该让我在浏览器中查看我的 JavaScript 文件，但事实并非如此。我认为这就是为什么该程序没有按照它的意思做。

index.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="text\babel" 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')
);

【问题讨论】：

您的问题不完整，您在dev-tools 中看到了什么？您如何为应用程序提供服务（npm start 或 npm build 并运行构建）？
还有react，你为什么要编辑你的html而不使用CRA的默认值
脚本必须是type="text/babel"，带有正斜杠。修复它，app.js 将出现在源代码中，React 将运行正常。
@DennisVash OP 没有使用 CRA。
谢谢，伙计们！ @ChrisG 很抱歉没有更具体。

标签： javascript reactjs

【解决方案1】：

这个问题在这里得到了回答in this stack overflow post

在开发者工具中打开网络标签并刷新（快捷键 f5）或打开chrome开发工具->设置->恢复默认并恢复

通常，当您 CTRL + P 然后搜索您想要的文件时，它应该在 chrome 开发工具的源选项卡中显示 js 文件等源文件（用于快捷键 - F12）

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

在开发者工具中打开网络标签并刷新

如果不行，那么

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

【讨论】：

【解决方案2】：

我知道 Chrome 开发工具中的“源”选项卡应该让我在浏览器中查看我的 JavaScript 文件，但事实并非如此。

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

一旦你添加了一个目录，如果你不能设置断点，它就没有多大用处。 Chrome 需要源映射。如果加载了源映射，则 Chrome 会在每个源文件的图标上叠加一个绿点，表示可以设置该文件内的断点。

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

【讨论】：