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

Question

I'm very new to JavaScript and React, I know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser but they aren't. And I think this is why the program is not doing what it meant to.我对 JavaScript 和 React 很陌生，我知道 chrome 开发工具中的“源”选项卡应该让我在浏览器中查看我的 JavaScript 文件，但事实并非如此。我认为这就是该程序的原因没有做它的意思。

index.html- 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')
);

Answer 1

this question is answered here in this stack overflow post这个问题在这个堆栈溢出帖子中得到了回答

Open the network tab in developer tools and refresh(f5 for shortcut) OR open chrome dev tools -> settings -> Restore default and restore在开发人员工具中打开网络选项卡并刷新（快捷键为 f5）或打开 chrome 开发工具 -> 设置 -> 恢复默认值并恢复

generally it should show you the source file like js files in source tab in chrome dev tools (for shortcut - F12) when you CTRL + P and then search your desire file通常，当您CTRL + P然后搜索您想要的文件时，它应该在 chrome 开发工具的源选项卡中显示源文件，如 js 文件（用于快捷方式 - F12）

and if it is not showing for any obvious reason which is the file you are looking is not being called or used in the current UI page then如果由于任何明显的原因没有显示您正在查找的文件在当前 UI 页面中没有被调用或使用，那么

Opened the network tab in developer tools and refresh在开发者工具中打开网络选项卡并刷新

if not works then如果不起作用，那么

open chrome dev tools -> settings -> Restore default and restore打开chrome开发工具->设置->恢复默认并恢复

Answer 2

I know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser but they aren't.我知道 chrome 开发工具中的“源”选项卡应该让我在浏览器中查看我的 JavaScript 文件，但事实并非如此。

You add a directory, typically your-project/src via a dialog shown by Chrome.您可以通过 Chrome 显示的对话框添加一个目录，通常是your-project/src 。 Then Chrome displays a narrow horizontal bar at the top of browser's window asking you to confirm Chrome's access to the chosen disk directory.然后 Chrome 在浏览器窗口顶部显示一个窄水平条，要求您确认 Chrome 对所选磁盘目录的访问权限。 The bar is easy to overlook.酒吧很容易被忽视。

Once you added a directory, it's not of much use if you cannot set breakpoints.一旦你添加了一个目录，如果你不能设置断点，它就没有多大用处了。 Chrome needs source maps for that. Chrome 需要源映射。 If source maps are loaded then Chrome superimposes a green dot on the icon of each source file indicating the breakpoints inside this file can be set.如果加载了源映射，则 Chrome 会在每个源文件的图标上叠加一个绿点，指示可以设置该文件内的断点。

Looks like you are using semantic-ui with react.看起来你正在使用语义 UI 和反应。 If you would like to have a boilerplate project with all that set up and detailed debugging instructions related to Chrome and its 'Sources' tab, then have a look at crisp-react如果您想要一个样板项目，其中包含与 Chrome 及其“源”选项卡相关的所有设置和详细调试说明，请查看清晰反应

Answer 3

Tried quite a few solutions to this issue none of them worked for my (.Net Core) application simply because I was using the customised appSettings.Development-myName.json instead of a default appSettings.Development.json... Additionally, the option we choose to browse the application also affected.尝试了很多解决方案来解决这个问题，但它们都不适用于我的（.Net Core）应用程序，因为我使用的是自定义的 appSettings.Development-myName.json 而不是默认的 appSettings.Development.json ......此外，该选项我们选择浏览的应用程序也受到影响。 In my case, a combination of default appSettings.Development.json and IIS Express to debug the app was a success.就我而言，默认 appSettings.Development.json 和 IIS Express 的组合来调试应用程序是成功的。 Thanks!谢谢！

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

问题描述

3 个解决方案

解决方案1
3 2021-12-28 07:30:17

解决方案2
1 2019-09-12 00:39:35

解决方案3
0 2022-06-14 10:02:35

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

问题描述

3 个解决方案

解决方案1 3 2021-12-28 07:30:17

解决方案2 1 2019-09-12 00:39:35

解决方案3 0 2022-06-14 10:02:35

解决方案1
3 2021-12-28 07:30:17

解决方案2
1 2019-09-12 00:39:35

解决方案3
0 2022-06-14 10:02:35