Javascript Chrome开发者工具源代码不显示源文件_Javascript_Reactjs

Javascript Chrome开发者工具源代码不显示源文件

javascript reactjs

Javascript Chrome开发者工具源代码不显示源文件,javascript,reactjs,Javascript,Reactjs,我对JavaScript和React非常陌生，我知道chrome开发工具中的“源代码”选项卡应该让我在浏览器中查看JavaScript文件，但它们不是。我想这就是为什么这个项目没有达到它的目的 index.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Project One</title> <link

我对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')
);


项目一
流行产品
app.js-
类ProductList扩展了React.Component{
render（）{
返回(
你好，朋友！我是一个基本的反应组件
);
}`在这里输入代码`
}
ReactDOM.render(
,
document.getElementById（'content'）
);

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

您可以通过Chrome显示的对话框添加一个目录，通常是

您的项目/src

。然后，Chrome在浏览器窗口顶部显示一个狭窄的水平条，要求您确认Chrome是否可以访问所选的磁盘目录。酒吧很容易被忽视

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

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

您的问题不完整，您在

开发工具中看到了什么？您如何为应用程序提供服务（npm start
或npm build
并运行构建）？还有react
，为什么您要编辑html
，而不使用CRA
的默认值？脚本需要是type=“text/babel”
，带有正斜杠。解决这个问题，app.js

将出现在源代码中，React将正常运行。@DennisVash OP没有使用CRA。谢谢，伙计们@克里斯说得对，抱歉没有说得更具体。