CODEWITHSUNDEEP
javascriptreactjs
gilad postovsky
gilad postovsky

Reputation: 145

Chrome developer tools sources not showing source files

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

Upvotes: 13

Views: 37160

Answers (5)

WestMountain
WestMountain

Reputation: 625

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

Upvotes: 1

Solo.dmitry
Solo.dmitry

Reputation: 770

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.

Upvotes: 0

codeLerner
codeLerner

Reputation: 33

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!

Upvotes: 0

Mohammad Atif Aftab
Mohammad Atif Aftab

Reputation: 1051

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

Upvotes: 14

winwiz1
winwiz1

Reputation: 3164

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

Upvotes: 1

Related Questions