15

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.

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')
);
6
  • Your question is incomplete, what do you see in dev-tools? How do you serve the application (npm start or npm build and running the build)? Commented Sep 11, 2019 at 23:04
  • Also with react, why would you edit your html and not using the defaults of CRA Commented Sep 11, 2019 at 23:05
  • 1
    The script needs to be type="text/babel", with a forward slash. Fix that, and app.js will appear in the sources and React will run fine. Commented Sep 11, 2019 at 23:10
  • @DennisVash OP isn't using CRA. Commented Sep 11, 2019 at 23:11
  • Thanks, guys! @ChrisG WAS RIGHT sorry for not being more specific. Commented Sep 11, 2019 at 23:30

5 Answers 5

16

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

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

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

Opened the network tab in developer tools and refresh

if not works then

open chrome dev tools -> settings -> Restore default and restore

Sign up to request clarification or add additional context in comments.

3 Comments

- open chrome dev tools -> settings -> Restore default and restore - command P Worked for me!
So crazy. Computer restart didn't even fix the Source window. It was always blank. Nothing changed to make source disappear, but settings -> Restore defaults and reload worked for me. Thank you!
Gotta share... my source file showed up blank no matter what I did. Nothing worked for me until this. Putting "debugger" in the code forced devtools to load the source: stackoverflow.com/a/46734316/700444
1

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.

You add a directory, typically your-project/src via a dialog shown by Chrome. 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. 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. 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.

Looks like you are using semantic-ui with react. 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

Comments

1

This is crazy, I have figure it out: (Chrome and edge)

  • Go to network tab
  • Make sure this checkbox are checked: "Disable cache"
  • Left Click and hold the reload button => Empty cache and hard reload
  • Open source tab again => bum, it's work

Comments

0

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. In my case, a combination of default appSettings.Development.json and IIS Express to debug the app was a success. Thanks!

Comments

0

In my situation, the reason of strange hiding the source file was my mistake - I thought that the js-file was loaded with main request, but it was loaded by the body from secondary AJAX request. Then the code of such js-file works, but it does not appear in sources.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.